使用 canvas.toBlob 污染的画布答案

【问题标题】：Tainted Canvas with canvas.toBlob使用 canvas.toBlob 污染的画布
【发布时间】：2015-12-20 13:11:40
【问题描述】：

我正在尝试将 svg 转换为图像并提示用户下载。

var chart = $(svg.node())
            .attr('xmlns', 'http://www.w3.org/2000/svg');
var width = that.svg_width;
var height = that.svg_height;
var data = new XMLSerializer().serializeToString(chart.get(0));
var svg1 = new Blob([data], { type: "image/svg+xml;charset=utf-8" });
var url = URL.createObjectURL(svg1);

var img = $('<img />')
            .width(width)
            .height(height);
img.attr('crossOrigin' ,'' );
img.bind('load', function() {
        var canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img.get(0), 0, 0);
        canvas.toBlob(function(blob) { // this is where it fails
                saveAs(blob, "test.png");
        });
});
img.attr('src', url);

Chrome 抛出异常，提示“未捕获的 SecurityError：无法在 'HTMLCanvasElement' 上执行 'toDataURL'：可能无法导出受污染的画布。”在 canvas.toBlob

本案例不涉及跨域。 svg 位于我正在转换为图像并尝试加载到画布中的同一页面上。那么画布是如何被污染的呢？我错过了什么吗？

【问题讨论】：

标签： javascript html canvas svg

【解决方案1】：

经过一番挖掘发现https://code.google.com/p/chromium/issues/detail?id=294129。我的 svg 有一个（基于 d3 的图表），这就是我遇到这个问题的原因。

使用数据 uri 而不是从 blob 加载 svg 解决了我的问题

【讨论】：

但是当您从 blob 更改为数据 url 时，它将在 Chrome 而不是在 Firefox 中工作
您是如何使用数据 URI 而不是从 blob 加载 SVG 的？你有任何机会的代码 sn-p 吗？
而不是new Blob([data], { type: "image/svg+xml;charset=utf-8" }); 写"data:image/svg+xml;charset=utf-8," + data;。它为您提供了一个 URL，该 URL 转到 img.src 以绕过邪恶 createObjectURL