fix: 修改直接再相册分享无法分享的问题

src/utils/index.ts

@@ -205,6 +205,23 @@ export const checkPromise = <T = any>(check: () => T) => {
   });
 };
 
+export const imageToBlob = (src: string) => {
+  return new Promise<Blob>((resolve) => {
+    let canvas = document.createElement("canvas");
+    let img = document.createElement("img");
+    img.onload = () => {
+      canvas.width = img.width;
+      canvas.height = img.height;
+      let context = canvas.getContext("2d");
+      context.drawImage(img, 0, 0, img.width, img.height);
+      canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height);
+      canvas.toBlob(resolve);
+    };
+    img.setAttribute("crossOrigin", "Anonymous"); //前端支持跨域
+    img.src = src;
+  });
+};
+
 // 下载文件
 // export const downFile = (url: string, name?: string) => {
 //   console.log(saveAs(url, name))
@@ -535,13 +552,11 @@ export const blobToBase64 = (blob: Blob) => {
     // readAsDataURL
     fileReader.readAsDataURL(blob);
     fileReader.onerror = () => {
-      reject(new Error('blobToBase64 error'));
+      reject(new Error("blobToBase64 error"));
     };
   });
-}
-
-
+};
 
 export const getId = () => {
-  return (new Date()).getTime().toString() + Math.ceil(Math.random() * 1000).toString()
-}
+  return new Date().getTime().toString() + Math.ceil(Math.random() * 1000).toString();
+};

src/views/photos/index.vue

@@ -74,8 +74,8 @@ import Photos from "@/components/photos/index.vue";
 import ActionMenus from "@/components/group-button/index.vue";
 import { useConfirm } from "@/hook";
 import UiInput from "@/components/base/components/input/index.vue";
-import { api } from "@/store/sync";
-import { getId } from "@/utils";
+import { api, downloadImage, uploadImage } from "@/store/sync";
+import { formatDate, getId, imageToBlob } from "@/utils";
 
 const sortPhotos = computed(() => [...photos.value].reverse());
 const active = ref<PhotoRaw>();
@@ -104,7 +104,20 @@ const menus = [
     key: "share",
     icon: "share",
     text: "分享",
-    onClick: () => {
+    onClick: async () => {
+      // 如果没下载过相册则下载，通过文件名判断
+      if (!active.value.url.includes("img_")) {
+        const filename = `img_${formatDate(new Date(), "yyyyMMddhhmmss")}_${
+          active.value.meterPerPixel || 1
+        }_${new Date().getTime().toString().substring(8)}.jpg`;
+
+        const img = await api.getFile(active.value.url);
+        const blob = await imageToBlob(img);
+        const url = await uploadImage(blob, filename);
+        await downloadImage(blob, filename);
+        active.value.url = url;
+      }
+
       api.shareImage(active.value.url);
     },
   },

src/views/scene/photo.vue

@@ -63,17 +63,7 @@ const screenshot = async (sdk: LaserSDK) => {
     const data = sdk.scene.screenshot(dom.offsetWidth, dom.offsetHeight);
     const { dataUrl: base64 } = await data.finishPromise;
     const blob = base64ToBlob(base64);
-    let url: string;
-    if (down) {
-      const filename = `img_${formatDate(new Date(), "yyyyMMddhhmmss")}_${
-        data.meterPerPixel || 1
-      }_${new Date().getTime().toString().substring(8)}.jpg`;
-      url = await uploadImage(blob, filename);
-      await downloadImage(blob, filename);
-    } else {
-      url = await uploadImage(blob);
-    }
-
+    let url: string = await uploadImage(blob);
     return {
       url,
       meterPerPixel: data.meterPerPixel,
@@ -83,7 +73,8 @@ const screenshot = async (sdk: LaserSDK) => {
 
   baseLines.value.concat(list.value).forEach((item) => (item.show = false));
   await nextTick();
-  const screenshot = await getScreenshot(true);
+
+  const screenshot = await getScreenshot();
   baseLines.value.concat(list.value).forEach((item) => (item.show = true));
   await nextTick();
 

vite.config.ts

@@ -12,6 +12,7 @@ export default async ({ mode }) => {
   if (isDev) {
     await createMockServer(Number(env.VITE_DEV_PORT));
     server = {
+      port: 5555,
       watch: {
         ignored: [
           "**/node_modules/**",
@@ -48,7 +49,7 @@ export default async ({ mode }) => {
       },
       extensions: [".js", ".ts", ".json", ".vue"],
     },
-    server,
     plugins: [vue()],
+    server,
   });
 };