Question

我正在尝试将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会抛出异常，说明＆＃34; Uncaught SecurityError：无法执行＆＃39; toDataURL＆＃39; on＆＃39; HTMLCanvasElement＆＃39;：可能无法导出受污染的画布。＆＃34;在canvas.toBlob

这种情况不涉及交叉起源。 svg在我转换为图像并尝试加载画布的同一页面上。那么画布是如何被污染的？我错过了什么吗？

Answer 1

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

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

受污染的画布与canvas.toBlob

1 个答案: