weakedMap 有缓存问题

src/utils/utils.ts

@@ -1,6 +1,7 @@
 import { store } from "@/features/mark/store";
 import { PictureSlice } from "@/types";
 
+// TODO: 打开cache后，会造成没有 vue devtools 时，canvas缓存错误，暂时不知道原因
 // 通过回看的测试，打开回看，再关闭回看，稍等一会儿再打开回看，确实可以看到该缓存时缓存了，该丢弃时丢弃了
 
 // 把store.currentTask当做 weakRef ，当它不存在时，就丢弃它所有的图片
@@ -12,14 +13,14 @@ const weakedMapImages = new WeakMap<Object, Map<string, HTMLImageElement>>();
  * @returns Promise<HTMLImageElement>
  */
 export async function loadImage(url: string): Promise<HTMLImageElement> {
-  if (store.currentTask && weakedMapImages.get(store.currentTask)) {
-    const imagesCache = weakedMapImages.get(store.currentTask);
-    if (imagesCache) {
-      // console.log("cached image", url);
-      const image = imagesCache.get(url);
-      if (image) return image;
-    }
-  }
+  // if (store.currentTask && weakedMapImages.get(store.currentTask)) {
+  //   const imagesCache = weakedMapImages.get(store.currentTask);
+  //   if (imagesCache) {
+  //     // console.log("cached image", url);
+  //     const image = imagesCache.get(url);
+  //     if (image) return image;
+  //   }
+  // }
 
   // else loading image
 
@@ -28,14 +29,14 @@ export async function loadImage(url: string): Promise<HTMLImageElement> {
     image.setAttribute("crossorigin", "anonymous");
     image.src = url;
     image.onload = () => {
-      if (store.currentTask) {
-        let imagesCache = weakedMapImages.get(store.currentTask);
-        if (!imagesCache) {
-          imagesCache = new Map<string, HTMLImageElement>();
-          weakedMapImages.set(store.currentTask, imagesCache);
-        }
-        imagesCache.set(url, image);
-      }
+      // if (store.currentTask) {
+      //   let imagesCache = weakedMapImages.get(store.currentTask);
+      //   if (!imagesCache) {
+      //     imagesCache = new Map<string, HTMLImageElement>();
+      //     weakedMapImages.set(store.currentTask, imagesCache);
+      //   }
+      //   imagesCache.set(url, image);
+      // }
       resolve(image);
     };
     image.onerror = reject;
@@ -50,17 +51,17 @@ export function getDataUrlForSliceConfig(
   maxSliceWidth: number,
   urlForCache: string
 ) {
-  const { i, x, y, w, h } = sliceConfig;
-  const key = `${urlForCache}-${i}-${x}-${y}-${w}-${h}`;
+  // const { i, x, y, w, h } = sliceConfig;
+  // const key = `${urlForCache}-${i}-${x}-${y}-${w}-${h}`;
 
-  if (store.currentTask && weakedMapDataUrls.get(store.currentTask)) {
-    const dataUrlsCache = weakedMapDataUrls.get(store.currentTask);
-    if (dataUrlsCache) {
-      // console.log("cached canvas", key);
-      const image = dataUrlsCache.get(key);
-      if (image) return image;
-    }
-  }
+  // if (store.currentTask && weakedMapDataUrls.get(store.currentTask)) {
+  //   const dataUrlsCache = weakedMapDataUrls.get(store.currentTask);
+  //   if (dataUrlsCache) {
+  //     // console.log("cached canvas", key);
+  //     const image = dataUrlsCache.get(key);
+  //     if (image) return image;
+  //   }
+  // }
 
   const canvas = document.createElement("canvas");
   canvas.width = Math.max(sliceConfig.w, maxSliceWidth);
@@ -86,14 +87,14 @@ export function getDataUrlForSliceConfig(
 
   // 如果用toBlob，则产生异步，而且URL.createObjectURL还会需要手动释放
   const dataurl = canvas.toDataURL();
-  if (store.currentTask) {
-    let dataUrlsCache = weakedMapDataUrls.get(store.currentTask);
-    if (!dataUrlsCache) {
-      dataUrlsCache = new Map<string, string>();
-      weakedMapDataUrls.set(store.currentTask, dataUrlsCache);
-    }
-    dataUrlsCache.set(key, dataurl);
-  }
+  // if (store.currentTask) {
+  //   let dataUrlsCache = weakedMapDataUrls.get(store.currentTask);
+  //   if (!dataUrlsCache) {
+  //     dataUrlsCache = new Map<string, string>();
+  //     weakedMapDataUrls.set(store.currentTask, dataUrlsCache);
+  //   }
+  //   dataUrlsCache.set(key, dataurl);
+  // }
 
   return dataurl;
 }
@@ -105,15 +106,15 @@ export function getDataUrlForSplitConfig(
   urlForCache: string
 ) {
   const [start, end] = config;
-  const key = `${urlForCache}-${start}-${end}`;
-  if (store.currentTask && weakedMapDataUrls.get(store.currentTask)) {
-    const dataUrlsCache = weakedMapDataUrls.get(store.currentTask);
-    if (dataUrlsCache) {
-      // console.log("cached canvas", key);
-      const image = dataUrlsCache.get(key);
-      if (image) return image;
-    }
-  }
+  // const key = `${urlForCache}-${start}-${end}`;
+  // if (store.currentTask && weakedMapDataUrls.get(store.currentTask)) {
+  //   const dataUrlsCache = weakedMapDataUrls.get(store.currentTask);
+  //   if (dataUrlsCache) {
+  //     // console.log("cached canvas", key);
+  //     const image = dataUrlsCache.get(key);
+  //     if (image) return image;
+  //   }
+  // }
 
   const width = image.naturalWidth * (end - start);
   const canvas = document.createElement("canvas");
@@ -138,14 +139,14 @@ export function getDataUrlForSplitConfig(
 
   // 如果用toBlob，则产生异步，而且URL.createObjectURL还会需要手动释放
   const dataurl = canvas.toDataURL();
-  if (store.currentTask) {
-    let dataUrlsCache = weakedMapDataUrls.get(store.currentTask);
-    if (!dataUrlsCache) {
-      dataUrlsCache = new Map<string, string>();
-      weakedMapDataUrls.set(store.currentTask, dataUrlsCache);
-    }
-    dataUrlsCache.set(key, dataurl);
-  }
+  // if (store.currentTask) {
+  //   let dataUrlsCache = weakedMapDataUrls.get(store.currentTask);
+  //   if (!dataUrlsCache) {
+  //     dataUrlsCache = new Map<string, string>();
+  //     weakedMapDataUrls.set(store.currentTask, dataUrlsCache);
+  //   }
+  //   dataUrlsCache.set(key, dataurl);
+  // }
 
   return dataurl;
 }

vite.config.ts

@@ -32,4 +32,7 @@ export default defineConfig({
     alias: [{ find: "@", replacement: path.resolve(__dirname, "./src") }],
     extensions: [".js", ".ts", ".vue", ".json", ".scss", ".css"],
   },
+  // define: {
+  //   __VUE_PROD_DEVTOOLS__: true, // no effect
+  // },
 });