html5导出错误,JavaScript：toDataUrl()抛出“安全错误：可能无法导出受污染的画布”. - 程序园...

我有一个

HTML5画布,我从svg中绘制一个图像.

HTML

JavaScript的

var DOMURL = window.URL || window.webkitURL || window;

var data = ''+

''+

'

'foreignObject {'+

'background-color: #000;'+

'color: #fff'+

'border-radius: 10px;'+

'}'+

'h1 {'+

'color: #2acabd;'+

'font: 25px arial;'+

'font-weight: bold;'+

'text-align: center;'+

'}'+

'h2 {'+

'margin: 0;'+

'color: #2acabd;'+

'font: 15px arial;'+

'}'+

'p {'+

'color: #fff;'+

'}'+

''+

'

'+

'

Heading

'+

'

'+

'

'+

'

Full Name

'+

'

Alan Johnson

'+

'

Date of Birth

'+

'

7th November 1988

'+

'

34329483028493284093284432

'+

'

'+

'

'+

'

'+

''+

'';

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

img = new Image();

img.setAttribute("crossOrigin", "anonymous");

var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});

var url = DOMURL.createObjectURL(svg);

img.onload = function() {

ctx.drawImage(img, 0, 0);

DOMURL.revokeObjectURL(url);

console.log(canvas.toDataURL());

}

img.src = url;

当我调用canvas.toDataURL()时,我得到了异常：

(index):98 Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

我已经在Stack Overflow上看到了与此异常相关的许多其他问题和答案.我的问题是不同的,因为(正如你所看到的)我不是在任何一点,包括我的svg或画布中来自另一个域的任何图像.

我猜测问题是我正在使用DOMURL.createObjectURL创建一个对象URL.

我知道在不同的浏览器中执行此操作存在一些兼容性问题,但此应用只​​需要在Chrome中运行.此外,直接在画布上绘制文本不是一个选项,我必须通过svg.

关于如何解决这个问题,并成功获得我的画布的PNG的任何想法？