下载小地图

src/plugin/utils.ts

@@ -163,3 +163,30 @@ export function nextFrame(cb: (time: number) => void) {
         requestAnimationFrame(cb);
     });
 }
+
+/**
+ * 下载一个画布对应的图片
+ * @param canvas 画布
+ * @param name 图片名称
+ */
+export function downloadCanvasImage(
+    canvas: HTMLCanvasElement,
+    name: string
+): void {
+    const data = canvas.toDataURL('image/png');
+    download(data, name);
+}
+
+/**
+ * 下载一个文件
+ * @param content 下载的内容
+ * @param name 文件名称
+ */
+export function download(content: string, name: string) {
+    const a = document.createElement('a');
+    a.download = `${name}.png`;
+    a.href = content;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+}

src/source/cls.d.ts

@@ -624,13 +624,22 @@ interface IdToCls {
     X70080: 'tileset';
     X70081: 'tileset';
     X70082: 'tileset';
+    X70083: 'tileset';
+    X70084: 'tileset';
+    X70090: 'tileset';
+    X70091: 'tileset';
+    X70098: 'tileset';
+    X70099: 'tileset';
     X70112: 'tileset';
     X70114: 'tileset';
     X70116: 'tileset';
     X70120: 'tileset';
     X70122: 'tileset';
+    X70124: 'tileset';
     X70128: 'tileset';
     X70130: 'tileset';
+    X70131: 'tileset';
+    X70132: 'tileset';
     X70184: 'tileset';
     X70185: 'tileset';
     X70186: 'tileset';

src/source/maps.d.ts

@@ -624,13 +624,22 @@ interface IdToNumber {
     X70080: 70080;
     X70081: 70081;
     X70082: 70082;
+    X70083: 70083;
+    X70084: 70084;
+    X70090: 70090;
+    X70091: 70091;
+    X70098: 70098;
+    X70099: 70099;
     X70112: 70112;
     X70114: 70114;
     X70116: 70116;
     X70120: 70120;
     X70122: 70122;
+    X70124: 70124;
     X70128: 70128;
     X70130: 70130;
+    X70131: 70131;
+    X70132: 70132;
     X70184: 70184;
     X70185: 70185;
     X70186: 70186;
@@ -1267,13 +1276,22 @@ interface NumberToId {
     70080: 'X70080';
     70081: 'X70081';
     70082: 'X70082';
+    70083: 'X70083';
+    70084: 'X70084';
+    70090: 'X70090';
+    70091: 'X70091';
+    70098: 'X70098';
+    70099: 'X70099';
     70112: 'X70112';
     70114: 'X70114';
     70116: 'X70116';
     70120: 'X70120';
     70122: 'X70122';
+    70124: 'X70124';
     70128: 'X70128';
     70130: 'X70130';
+    70131: 'X70131';
+    70132: 'X70132';
     70184: 'X70184';
     70185: 'X70185';
     70186: 'X70186';

src/ui/fly.vue

@@ -24,6 +24,13 @@
                     un-checked-children="OFF"
                 ></a-switch>
             </div>
+            <span
+                v-if="!isMobile"
+                class="button-text"
+                id="fly-download"
+                @click="download"
+                >下载地图图片</span
+            >
         </div>
         <div id="fly-main">
             <div id="fly-left">
@@ -86,7 +93,7 @@ import {
     DoubleRightOutlined
 } from '@ant-design/icons-vue';
 import { debounce } from 'lodash';
-import { keycode, tip } from '../plugin/utils';
+import { downloadCanvasImage, keycode, tip } from '../plugin/utils';
 import { sleep } from 'mutate-animate';
 import { KeyCode } from '../plugin/keyCodes';
 
@@ -94,7 +101,7 @@ type Loc2 = [number, number, number, number];
 
 const area = getArea();
 const nowArea = ref(
-    Object.keys(area).find(v => area[v].includes(core.status.floorId))!
+    Object.keys(area).find(v => area[v].includes(core.status.floorId)) ?? ''
 );
 const nowFloor = ref(core.status.floorId);
 const noBorder = ref(true);
@@ -137,6 +144,7 @@ let map: HTMLCanvasElement;
 let mapCtx: CanvasRenderingContext2D;
 let thumb: HTMLCanvasElement;
 let thumbCtx: CanvasRenderingContext2D;
+let downloadMode = false;
 
 function exit() {
     core.plugin.flyOpened.value = false;
@@ -279,7 +287,7 @@ function drawThumbnail(
     y: number,
     noCheck: boolean = false
 ) {
-    if (!noCheck && !checkThumbnail(floorId, x, y)) return;
+    if (!downloadMode && !noCheck && !checkThumbnail(floorId, x, y)) return;
     const floor = core.status.maps[floorId];
     drawedThumbnail[floorId] = true;
 
@@ -295,25 +303,27 @@ function drawThumbnail(
         ctx,
         damage: scale > 7
     });
-    if (!core.hasVisitedFloor(floorId)) {
-        ctx.fillStyle = '#d0d6';
-        ctx.fillRect(
-            x - floor.width / 2,
-            y - floor.height / 2,
-            floor.width,
-            floor.height
-        );
-        ctx.fillStyle = '#000';
-    }
-    if (nowFloor.value === floorId) {
-        ctx.fillStyle = '#ff04';
-        ctx.fillRect(
-            x - floor.width / 2,
-            y - floor.height / 2,
-            floor.width,
-            floor.height
-        );
-        ctx.fillStyle = '#000';
+    if (!downloadMode) {
+        if (!core.hasVisitedFloor(floorId)) {
+            ctx.fillStyle = '#d0d6';
+            ctx.fillRect(
+                x - floor.width / 2,
+                y - floor.height / 2,
+                floor.width,
+                floor.height
+            );
+            ctx.fillStyle = '#000';
+        }
+        if (nowFloor.value === floorId) {
+            ctx.fillStyle = '#ff04';
+            ctx.fillRect(
+                x - floor.width / 2,
+                y - floor.height / 2,
+                floor.width,
+                floor.height
+            );
+            ctx.fillStyle = '#000';
+        }
     }
 }
 
@@ -369,6 +379,22 @@ function draw() {
     drawRight();
 }
 
+function download() {
+    if (nowArea.value === '') {
+        tip('error', '当前地图不再任意一个区域内！');
+        return;
+    }
+    downloadMode = true;
+    const before = scale;
+    scale = 32;
+    drawMap();
+    downloadCanvasImage(temp, nowArea.value);
+    scale = before;
+    downloadMode = false;
+    draw();
+    tip('success', '图片下载成功！');
+}
+
 function fly() {
     if (core.flyTo(nowFloor.value)) exit();
     else tip('error', `无法飞往${floor.value.title}`);