裁切图cache

src/features/mark/CommonMarkBody.vue

@@ -340,10 +340,10 @@ export default defineComponent({
       }
       __lock = true;
       __currentLibraryId = uid ?? -1;
-      for (const s of sliceImagesWithTrackList) {
+      // for (const s of sliceImagesWithTrackList) {
-        // console.log("revoke", s.url);
+      //   // console.log("revoke", s.url);
-        URL.revokeObjectURL(s.url);
+      //   URL.revokeObjectURL(s.url);
-      }
+      // }
       sliceImagesWithTrackList.splice(0);
       // check if have MarkResult for currentTask
       let markResult = store.currentMarkResult;

src/utils/utils.ts

@@ -43,25 +43,23 @@ export async function loadImage(url: string): Promise<HTMLImageElement> {
   });
 }
 
-// 存放当前task的切片图的dataur
+// 存放裁切图的ObjectUrls
-const weakedMapDataUrls = new WeakMap<Object, Map<string, string>>();
+let objectUrlMap = new Map<string, string>();
+const OBJECT_URLS_MAP_MAX_SIZE = 100;
+
 export async function getDataUrlForSliceConfig(
   image: HTMLImageElement,
   sliceConfig: PictureSlice,
   maxSliceWidth: number,
   urlForCache: string
 ) {
-  // const { i, x, y, w, h } = sliceConfig;
+  const { i, x, y, w, h } = sliceConfig;
-  // const key = `${urlForCache}-${i}-${x}-${y}-${w}-${h}`;
+  const key = `${urlForCache}-${i}-${x}-${y}-${w}-${h}`;
-
+
-  // if (store.currentTask && weakedMapDataUrls.get(store.currentTask)) {
+  if (objectUrlMap.get(key)) {
-  //   const dataUrlsCache = weakedMapDataUrls.get(store.currentTask);
+    console.log("cached slice objectUrl");
-  //   if (dataUrlsCache) {
+    return objectUrlMap.get(key);
-  //     // 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);
@@ -91,15 +89,17 @@ export async function getDataUrlForSliceConfig(
     canvas.toBlob(res);
   });
   const dataurl = URL.createObjectURL(blob);
-  // console.log(dataurl);
+
-  // if (store.currentTask) {
+  if (objectUrlMap.size > OBJECT_URLS_MAP_MAX_SIZE) {
-  //   let dataUrlsCache = weakedMapDataUrls.get(store.currentTask);
+    const ary = [...objectUrlMap.entries()];
-  //   if (!dataUrlsCache) {
+    const toRelease = ary.splice(0, 10);
-  //     dataUrlsCache = new Map<string, string>();
+    for (const u of toRelease) {
-  //     weakedMapDataUrls.set(store.currentTask, dataUrlsCache);
+      URL.revokeObjectURL(u[1]);
-  //   }
+    }
-  //   dataUrlsCache.set(key, dataurl);
+    objectUrlMap = new Map(ary);
-  // }
+  }
+
+  objectUrlMap.set(key, dataurl);
 
   return dataurl;
 }
@@ -111,15 +111,12 @@ export async function getDataUrlForSplitConfig(
   urlForCache: string
 ) {
   const [start, end] = config;
-  // const key = `${urlForCache}-${start}-${end}`;
+  const key = `${urlForCache}-${start}-${end}`;
-  // if (store.currentTask && weakedMapDataUrls.get(store.currentTask)) {
+
-  //   const dataUrlsCache = weakedMapDataUrls.get(store.currentTask);
+  if (objectUrlMap.get(key)) {
-  //   if (dataUrlsCache) {
+    console.log("cached split objectUrl");
-  //     // console.log("cached canvas", key);
+    return objectUrlMap.get(key);
-  //     const image = dataUrlsCache.get(key);
+  }
-  //     if (image) return image;
-  //   }
-  // }
 
   const width = image.naturalWidth * (end - start);
   const canvas = document.createElement("canvas");
@@ -148,14 +145,16 @@ export async function getDataUrlForSplitConfig(
     canvas.toBlob(res);
   });
   const dataurl = URL.createObjectURL(blob);
-  // 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 (objectUrlMap.size > OBJECT_URLS_MAP_MAX_SIZE) {
+    const ary = [...objectUrlMap.entries()];
+    const toRelease = ary.splice(0, 10);
+    for (const u of toRelease) {
+      URL.revokeObjectURL(u[1]);
+    }
+    objectUrlMap = new Map(ary);
+  }
+
+  objectUrlMap.set(key, dataurl);
   return dataurl;
 }