用canvas.toBlob污染的画布 [英] Tainted Canvas with canvas.toBlob
问题描述
我正在尝试将svg转换为图像,并提示用户下载.
I am trying to convert a svg to an image and prompt a download to the user.
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
Chrome throws an exception saying "Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." at canvas.toBlob
在这种情况下不涉及交叉原点. svg在同一页上,我正在将其转换为图像并尝试加载到画布中.那么,帆布是如何被污染的呢?我想念什么吗?
There is no cross origin involved in this case. The svg is on the same page which i am converting to an image and trying to load in canvas. So how is the canvas tainted? Am I missing something?
推荐答案
经过一些挖掘,发现 https://code.google.com/p/chromium/issues/detail?id=294129 .我的svg的< foreignObject>(基于d3的图表),这就是为什么我遇到这个问题.
After some digging came across https://code.google.com/p/chromium/issues/detail?id=294129. My svg was having a < foreignObject > (d3 based chart) and that's why i was having this issue.
使用数据uri而不是从blob加载svg解决了我的问题
Using the data uri instead of loading the svg from the blob solved my issue
这篇关于用canvas.toBlob污染的画布的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!