我有两套用于测试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':可能无法导出受污染的画布。)
<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中的画布,第二组我通过javascript创建它。
我对Set 2代码的目标是获得图像的64个基本编码。
答案 0 :(得分:13)
您可以使用crossOrigin属性。
var img= new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;
答案 1 :(得分:7)
这是一个CORS问题 - Gravatar发送正确的标题,您只需要输入正确的属性:
<img id="preview1" crossorigin="anonymous" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG">
function getBase64() {
var 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");
alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
}
getBase64();
请注意,我测试时的第一个示例也失败了,就像它应该的那样。