精确type

src/features/mark/CommonMarkBody.vue

@@ -209,12 +209,12 @@ async function processSliceConfig() {
     const indexInSliceUrls = sliceConfig.i;
     const image = images[sliceConfig.i];
 
-    const dataUrl = (await getDataUrlForSliceConfig(
+    const dataUrl = await getDataUrlForSliceConfig(
       image,
       sliceConfig,
       maxSliceWidth,
       url
-    )) as string;
+    );
 
     let trackLists = [] as Array<Track>;
     if (useMarkResult) {
@@ -241,9 +241,9 @@ async function processSliceConfig() {
       (t) => t.offsetIndex === indexInSliceUrls
     );
 
-    const sliceImageRendered = await getImageUsingDataUrl(dataUrl);
+    const sliceImageRendered = await getImageUsingDataUrl(dataUrl!);
     tempSliceImagesWithTrackList.push({
-      url: dataUrl,
+      url: dataUrl!,
       indexInSliceUrls: sliceConfig.i,
       // 通过positionY来定位是第几张slice的还原，并过滤出相应的track
       trackList: thisImageTrackList.filter(
@@ -307,12 +307,12 @@ async function processSplitConfig() {
 
       accumBottomHeight += image.naturalHeight;
 
-      const dataUrl = (await getDataUrlForSplitConfig(
+      const dataUrl = await getDataUrlForSplitConfig(
         image,
         config,
         maxSliceWidth,
         url
-      )) as string;
+      );
 
       let trackLists = [] as Array<Track>;
       if (useMarkResult) {
@@ -339,9 +339,9 @@ async function processSplitConfig() {
       const thisImageTagList = tagLists.filter(
         (t) => t.offsetIndex === indexInSliceUrls
       );
-      const sliceImageRendered = await getImageUsingDataUrl(dataUrl);
+      const sliceImageRendered = await getImageUsingDataUrl(dataUrl!);
       tempSliceImagesWithTrackList.push({
-        url: dataUrl,
+        url: dataUrl!,
         indexInSliceUrls: store.currentTask.sliceUrls.indexOf(url) + 1,
         trackList: thisImageTrackList.filter(
           (t) =>

src/utils/utils.ts

@@ -68,9 +68,10 @@ export async function getDataUrlForSliceConfig(
   const ctx = canvas.getContext("2d");
   if (!ctx) {
     console.log('canvas.getContext("2d") error');
+    throw "canvas ctx error";
   }
   // drawImage 画图软件透明色
-  ctx?.drawImage(
+  ctx.drawImage(
     image,
     sliceConfig.x,
     sliceConfig.y,
@@ -139,9 +140,10 @@ export async function getDataUrlForSplitConfig(
   const ctx = canvas.getContext("2d");
   if (!ctx) {
     console.log('canvas.getContext("2d") error');
+    throw "canvas ctx error";
   }
   // drawImage 画图软件透明色
-  ctx?.drawImage(
+  ctx.drawImage(
     image,
     image.naturalWidth * start,
     0,
@@ -194,12 +196,11 @@ export async function preDrawImage(_currentTask: Task) {
       const url = _currentTask.sliceUrls[sliceConfig.i - 1];
       const image = images[sliceConfig.i];
 
-      (await getDataUrlForSliceConfig(
-        image,
-        sliceConfig,
-        maxSliceWidth,
-        url
-      )) as string;
+      try {
+        await getDataUrlForSliceConfig(image, sliceConfig, maxSliceWidth, url);
+      } catch (error) {
+        console.log("preDrawImage failed: ", error);
+      }
     }
   } else {
     for (const url of _currentTask.sliceUrls) {
@@ -220,12 +221,11 @@ export async function preDrawImage(_currentTask: Task) {
         const indexInSliceUrls = _currentTask.sliceUrls.indexOf(url) + 1;
         const image = images[indexInSliceUrls - 1];
 
-        (await getDataUrlForSplitConfig(
-          image,
-          config,
-          maxSliceWidth,
-          url
-        )) as string;
+        try {
+          await getDataUrlForSplitConfig(image, config, maxSliceWidth, url);
+        } catch (error) {
+          console.log("preDrawImage failed: ", error);
+        }
       }
     }
   }