feat: h2c模式添加跨域图片加载失败时的处理回调

扩展h2cImgLoadErrCallback参数以支持此特性
跨域图片的加载失败时，添加相关逻辑，让其不影响截图的整体流程

Author: likai

src/lib/main-entrance/PlugInParameters.ts

@@ -1,6 +1,7 @@
 import {
   customToolbarType,
   mouseEventType,
+  screenShotType,
   userToolbarType
 } from "@/lib/type/ComponentType";
 
@@ -35,6 +36,7 @@ let useCustomImgSize = false;
 let customImgSize = { w: 0, h: 0 };
 // 调用者定义的工具栏数据
 let userToolbar: Array<customToolbarType> = [];
+let h2cCrossImgLoadErrFn: screenShotType["h2cImgLoadErrCallback"] | null = null;
 let saveCallback: ((code: number, msg: string) => void) | null = null;
 let saveImgTitle: string | null = null;
 let canvasEvents: mouseEventType | null = null;
@@ -60,6 +62,7 @@ export default class PlugInParameters {
       saveImgTitle = null;
       destroyContainer = true;
       userToolbar = [];
+      h2cCrossImgLoadErrFn = null;
     }
   }
 
@@ -223,13 +226,20 @@ export default class PlugInParameters {
       toolbarData.push({ ...item, id: 100 + (i + 1) });
     }
     userToolbar = toolbarData;
-    console.log(userToolbar);
   }
 
   public getUserToolbar() {
     return userToolbar;
   }
 
+  public setH2cCrossImgLoadErrFn(fn: screenShotType["h2cImgLoadErrCallback"]) {
+    h2cCrossImgLoadErrFn = fn;
+  }
+
+  public getH2cCrossImgLoadErrFn() {
+    return h2cCrossImgLoadErrFn;
+  }
+
   public setCanvasEvents(event: mouseEventType) {
     canvasEvents = event;
   }

src/lib/split-methods/SetPlugInParameters.ts

@@ -87,6 +87,11 @@ export function setPlugInParameters(options: screenShotType) {
     plugInParameters.setUserToolbar(options.userToolbar);
   }
 
+  // h2c模式下，跨域图片加载失败时的回调函数
+  if (options?.h2cImgLoadErrCallback) {
+    plugInParameters.setH2cCrossImgLoadErrFn(options.h2cImgLoadErrCallback);
+  }
+
   // 处理用户定义的画布事件
   if (options?.canvasEvents) {
     plugInParameters.setCanvasEvents(options.canvasEvents);

src/lib/split-methods/drawCrossImg.ts

@@ -1,6 +1,9 @@
+import PlugInParameters from "@/lib/main-entrance/PlugInParameters";
+
 export function drawCrossImg(html: Document) {
   const promises: Promise<string>[] = [];
   const imageNodes = html.querySelectorAll("img");
+  const plugInParameters = new PlugInParameters();
   imageNodes.forEach(element => {
     const href = element.getAttribute("src");
     if (!href) return;
@@ -21,7 +24,17 @@ export function drawCrossImg(html: Document) {
         element.setAttribute("src", base64);
         resolve("转换成功");
       };
-      img.onerror = reject;
+      img.onerror = function(err) {
+        const h2cCrossImgLoadErrFn = plugInParameters?.getH2cCrossImgLoadErrFn();
+        if (h2cCrossImgLoadErrFn && typeof err != "string") {
+          h2cCrossImgLoadErrFn({
+            ...err,
+            imgUrl: href
+          });
+        }
+        // 跨域图片加载失败时，此处不做处理
+        resolve(true);
+      };
       if (href !== null) {
         img.src = href;
       }

src/lib/type/ComponentType.ts

@@ -113,6 +113,7 @@ export type screenShotType = {
     cutInfo: positionInfoType;
   }) => void; // 工具栏截图确认回调
   closeCallback?: () => void; // 工具栏关闭回调
+  h2cImgLoadErrCallback?: (err: Event & { imgUrl: string }) => void; // html2canvas跨域图片加载失败回调
   triggerCallback?: (res: {
     code: number;
     msg: string;