feat: 优化图片跨域

XianZhengquan · Sep 3, 2021 · 8d0dccd · 8d0dccd
1 parent e754efe
commit 8d0dccd
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -72,3 +72,7 @@ json2canvas({
 > 2021年08月18日
 
 - 优化图片跨域
+
+> 2021年09月03日
+
+- 图片加载失败之后，继续绘制，跳过当前失败
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "json-to-canvas",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "json-to-canvas",
     "main": "dist/index.js",
     "scripts": {

diff --git a/src/index.ts b/src/index.ts
@@ -31,47 +31,50 @@ export const json2canvas: Json2canvas = async (props) => {
                     if (!err) sourceItem.url = res;
                 });
             }
-            const Image = await loadImage(sourceItem.url);
-
-            if (callback) {
-                callback(
-                    ctx,
-                    {
-                        width: canvas.width,
-                        height: canvas.height
-                    },
-                    {
-                        x,
-                        y,
-                        width,
-                        height,
-                        borderColor,
-                        lineWidth,
-                        url: sourceItem.url,
-                        image: Image
-                    }
-                );
-            } else if (name === ImageName.Avatar) {
-                // 在 clip() 之前保存canvas状态
-                ctx.save();
-                ctx.strokeStyle = borderColor;
-                ctx.lineWidth = lineWidth * scale;
-                ctx.beginPath();
-                ctx.arc(
-                    x + width / 2,
-                    y + width / 2,
-                    width / 2,
-                    0,
-                    2 * Math.PI,
-                    false
-                );
-                ctx.stroke();
-                ctx.clip();
-                ctx.drawImage(Image, x, y, width, height);
-                // 恢复到上面save()时的状态
-                ctx.restore();
-            } else {
-                ctx.drawImage(Image, x, y, width, height);
+            try {
+                const Image = await loadImage(sourceItem.url);
+                if (callback) {
+                    callback(
+                        ctx,
+                        {
+                            width: canvas.width,
+                            height: canvas.height
+                        },
+                        {
+                            x,
+                            y,
+                            width,
+                            height,
+                            borderColor,
+                            lineWidth,
+                            url: sourceItem.url,
+                            image: Image
+                        }
+                    );
+                } else if (name === ImageName.Avatar) {
+                    // 在 clip() 之前保存canvas状态
+                    ctx.save();
+                    ctx.strokeStyle = borderColor;
+                    ctx.lineWidth = lineWidth * scale;
+                    ctx.beginPath();
+                    ctx.arc(
+                        x + width / 2,
+                        y + width / 2,
+                        width / 2,
+                        0,
+                        2 * Math.PI,
+                        false
+                    );
+                    ctx.stroke();
+                    ctx.clip();
+                    ctx.drawImage(Image, x, y, width, height);
+                    // 恢复到上面save()时的状态
+                    ctx.restore();
+                } else {
+                    ctx.drawImage(Image, x, y, width, height);
+                }
+            } catch (e) {
+                console.error(e, `图片地址：${ sourceItem.url }`);
             }
         } else if (sourceItem.type === SourceItemType.Text) {
             const {