javascript - 为什么这个持有 SVG 的 `blob:` URL 会污染 Chrome 中的 Canvas ？

Question

我正在做以下事情:

1. 将 SVG 文档生成为字符串
2. 使用 new Blob 和 createObjectURL 将其捕获到 blob: URL 中
3. 使用 fromURL 从中创建一个 fabric.Image 对象
4. 在 fromURL 回调中，调用 canvas.add 将新的 Image 添加到 Canvas

这是我的代码:

var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height = "200"><foreignObject width="100%" height="100%"><text xmlns = "http://www.w3.org/1999/xhtml" style = "font-size: 40px; color: #FFFFFF">Example</text></foreignObject></svg>';
var svgBlob = new Blob([svg], {type: 'image/svg+xml'});
var svgURL = window.URL.createObjectURL(svgBlob);
 fabric.Image.fromURL(svgURL,function(oIMG) {
   oIMG.crossOrigin = 'Anonymous';
   canvas.add(oIMG);
 });

然后我尝试 getImageData:

var dataImage = context.getImageData(0,0,canvas.width,canvas.height).data;

在 Chrome 中，这给了我错误:

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

这很奇怪，因为我从不使用任何跨源 URL，只使用 blob: URL。

在 Firefox 中它运行完美。该问题似乎是 Chrome 特有的。

Answer 1

这是 Chrome 中的一个已知错误:Canvas is tainted after drawing SVG including <foreignObject> .该线程中记录了当前的解决方法:

It seems that in the meantime the canvas is not tainted if the same picture has been loaded from a data URI.

This provides for a workaround.

您可以 turn your blob into a data: URL通过 FileReader 像这样:

var svg = '...';
var svgBlob = new Blob([svg], {type: 'image/svg+xml'});

var reader = new FileReader();
reader.readAsDataURL(svgBlob);

reader.onload = function(e) {
    var svgDataURL = e.target.result;
    fabric.Image.fromURL(svgDataURL, function(oIMG) {
        canvas.add(oIMG);
    });
}