javascript - 随机调用 Img.onerror - SVG 字符串作为源

Question

我有一个例程，它接受一个画布上下文和一个 SVG 字符串并将其渲染到画布上，它返回一个一旦完成就解决的承诺。

无论出于何种原因，它在 Firefox 和 Safari 中都失败了（没有在 IE 中尝试过），但似乎是我可以一直在 Chrome 中工作的唯一解决方案。我尝试了几种不同的选择：

• 首先将其转换为 blob，通过 createObjectURL 运行该 blob，将 img src 设置为此，在画布上绘制图像。这在 HTTP 上大部分时间都有效，但在 HTTPS 上它大部分时间都失败了，但并非总是如此。
• 将其转换为 blob，使用文件阅读器将其读取为 base64 SVG 表示，将 img src 设置为 base64，在画布上绘制图像。

代码：

export default (ctx, rawSVG, { width, height }) =>
    new Promise((resolve, reject) => {
        const img = new Image(width, height);
        img.onload = () => {
            ctx.drawImage(img, 0, 0);
            resolve(img);
        };

        img.onerror = err => reject(err);

        img.src = `data:image/svg+xml;utf8,${encodeURIComponent(rawSVG)}`;
    });

标签： javascriptimagesvgbase64