javascript - toDataURL 抛出未捕获的安全异常

Question

我有两套用于测试 html5 canvas 的代码

第 1 组 - 完美工作

<img id="preview" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG">
<canvas id="myCanvas"/>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("preview");
ctx.drawImage(img, 10, 10);
alert(c.toDataURL());

设置 2 - 显示异常错误(未捕获的安全错误:无法在“HTMLCanvasElement”上执行“toDataURL”:可能无法导出受污染的 Canvas 。)

<img id="preview1" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG">

function getBase64() {
    var img = new Image();
    img =  document.getElementById("preview1");
    var canvas = document.createElement("canvas");
    canvas.width =img.width;
    canvas.height =img.width;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png"); //This line of code will throw exception
    alert(  dataURL.replace(/^data:image\/(png|jpg);base64,/, "")); 
}

我不知道为什么在 Set 1 toDataURL 中没有抛出任何异常，而 Set toDataURL 将抛出异常并且两者都使用同一组图像。不同之处在于第一组我用 HTML 对 Canvas 进行硬编码，第二组我通过 javascript 创建它。

我对 Set 2 代码的目标是获得图像的 64 位编码。

Answer 1

你可以只使用 crossOrigin 属性。

var img= new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;