Question

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

无论出于何种原因，它都无法在Firefox和Safari中运行（在IE中没有尝试过），但它似乎是我始终可以在Chrome中使用的唯一解决方案。我尝试了几种其他选择：

首先将其转换为blob，然后通过createObjectURL运行该blob，将img src设置为该blob，然后在画布上绘制图像。在大多数情况下，这可以通过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)}`;
    });

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

0 个答案: