prefetch image & using URL.createObjectURL

src/features/arbitrate/MarkBody.vue

@@ -131,7 +131,7 @@ export default defineComponent({
         const indexInSliceUrls = sliceConfig.i;
         const image = images[indexInSliceUrls - 1];
 
-        const dataUrl = getDataUrlForSliceConfig(
+        const dataUrl = await getDataUrlForSliceConfig(
           image,
           sliceConfig,
           maxSliceWidth,
@@ -210,7 +210,7 @@ export default defineComponent({
 
           accumBottomHeight += image.naturalHeight;
 
-          const dataUrl = getDataUrlForSplitConfig(
+          const dataUrl = await getDataUrlForSplitConfig(
             image,
             config,
             maxSliceWidth,
@@ -268,6 +268,10 @@ export default defineComponent({
       }
       __lock = true;
       __currentStudentId = store.currentTask?.studentId ?? -1;
+      for (const s of sliceImagesWithTrackList) {
+        // console.log("revoke", s.url);
+        URL.revokeObjectURL(s.url);
+      }
       sliceImagesWithTrackList.splice(0);
 
       if (!store.currentTask) {

src/features/library/inspect/MarkBody.vue

@@ -131,7 +131,7 @@ export default defineComponent({
         const indexInSliceUrls = sliceConfig.i;
         const image = images[indexInSliceUrls - 1];
 
-        const dataUrl = getDataUrlForSliceConfig(
+        const dataUrl = await getDataUrlForSliceConfig(
           image,
           sliceConfig,
           maxSliceWidth,
@@ -210,7 +210,7 @@ export default defineComponent({
 
           accumBottomHeight += image.naturalHeight;
 
-          const dataUrl = getDataUrlForSplitConfig(
+          const dataUrl = await getDataUrlForSplitConfig(
             image,
             config,
             maxSliceWidth,
@@ -268,6 +268,10 @@ export default defineComponent({
       }
       __lock = true;
       __currentStudentId = store.currentTask?.studentId ?? -1;
+      for (const s of sliceImagesWithTrackList) {
+        // console.log("revoke", s.url);
+        URL.revokeObjectURL(s.url);
+      }
       sliceImagesWithTrackList.splice(0);
 
       if (!store.currentTask) {

src/features/mark/Mark.vue

@@ -52,7 +52,7 @@ import MarkBody from "./MarkBody.vue";
 import { useTimers } from "@/setups/useTimers";
 import MarkHistory from "./MarkHistory.vue";
 import MarkBoardTrack from "./MarkBoardTrack.vue";
-import { ModeEnum, Setting } from "@/types";
+import { ModeEnum, Setting, Task } from "@/types";
 import MarkBoardKeyBoard from "./MarkBoardKeyBoard.vue";
 import MarkBoardMouse from "./MarkBoardMouse.vue";
 import { isEmpty, isNumber } from "lodash";
@@ -122,6 +122,11 @@ export default defineComponent({
         if (store.status.totalCount - store.status.markedCount === 0) {
           await updateStatus();
         }
+
+        // prefetch sliceUrls image
+        for (const sliceUrl of (res.data as Task).sliceUrls) {
+          fetch(store.setting.fileServer + sliceUrl);
+        }
       } else {
         store.message = res.data.message;
       }

src/features/mark/MarkBody.vue

@@ -169,7 +169,7 @@ export default defineComponent({
         );
         const image = images[urls.indexOf(url)];
 
-        const dataUrl = getDataUrlForSliceConfig(
+        const dataUrl = await getDataUrlForSliceConfig(
           image,
           sliceConfig,
           maxSliceWidth,
@@ -243,7 +243,7 @@ export default defineComponent({
 
           accumBottomHeight += image.naturalHeight;
 
-          const dataUrl = getDataUrlForSplitConfig(
+          const dataUrl = await getDataUrlForSplitConfig(
             image,
             config,
             maxSliceWidth,
@@ -301,6 +301,10 @@ export default defineComponent({
       }
       __lock = true;
       __currentLibraryId = store.currentTask?.libraryId ?? -1;
+      for (const s of sliceImagesWithTrackList) {
+        // console.log("revoke", s.url);
+        URL.revokeObjectURL(s.url);
+      }
       sliceImagesWithTrackList.splice(0);
       // check if have MarkResult for currentTask
       let markResult = store.currentMarkResult;

src/utils/utils.ts

@@ -45,7 +45,7 @@ export async function loadImage(url: string): Promise<HTMLImageElement> {
 
 // 存放当前task的切片图的dataur
 const weakedMapDataUrls = new WeakMap<Object, Map<string, string>>();
-export function getDataUrlForSliceConfig(
+export async function getDataUrlForSliceConfig(
   image: HTMLImageElement,
   sliceConfig: PictureSlice,
   maxSliceWidth: number,
@@ -86,7 +86,12 @@ export function getDataUrlForSliceConfig(
   // console.log(canvas.toDataURL());
 
   // 如果用toBlob，则产生异步，而且URL.createObjectURL还会需要手动释放
-  const dataurl = canvas.toDataURL();
+  // const dataurl = canvas.toDataURL();
+  const blob = await new Promise((res) => {
+    canvas.toBlob(res);
+  });
+  const dataurl = URL.createObjectURL(blob);
+  // console.log(dataurl);
   // if (store.currentTask) {
   //   let dataUrlsCache = weakedMapDataUrls.get(store.currentTask);
   //   if (!dataUrlsCache) {
@@ -99,7 +104,7 @@ export function getDataUrlForSliceConfig(
   return dataurl;
 }
 
-export function getDataUrlForSplitConfig(
+export async function getDataUrlForSplitConfig(
   image: HTMLImageElement,
   config: [number, number],
   maxSliceWidth: number,
@@ -138,7 +143,11 @@ export function getDataUrlForSplitConfig(
   );
 
   // 如果用toBlob，则产生异步，而且URL.createObjectURL还会需要手动释放
-  const dataurl = canvas.toDataURL();
+  // const dataurl = canvas.toDataURL();
+  const blob = await new Promise((res) => {
+    canvas.toBlob(res);
+  });
+  const dataurl = URL.createObjectURL(blob);
   // if (store.currentTask) {
   //   let dataUrlsCache = weakedMapDataUrls.get(store.currentTask);
   //   if (!dataUrlsCache) {