我试图在获得图像之前先在画布上绘制图像dataURL(),但是返回的数据就像是空的。
dataURL()
当我在控制台中检查它时,我发现A字符串中有很多:("data:image/png;base64,iVBO..some random chars... bQhfoAAAAAAAAAA... a lot of A ...AAAASUVORK5CYII=")
A
"data:image/png;base64,iVBO..some random chars... bQhfoAAAAAAAAAA... a lot of A ...AAAASUVORK5CYII="
当我尝试将画布附加到文档时,也没有绘制任何内容,并且控制台中没有引发任何错误。
这里有什么问题 ?
这是我的代码:
var img = new Image(); img.src = "http://somerandomWebsite/picture.png"; var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; var context = canvas.getContext('2d'); context.drawImage(img, 0,0); // this doesn't seem to work var dataURL = canvas.toDataURL(); // this will give me a lot of "A" doSomething(dataURL);
另外,进行快速刷新时,图像会正确绘制到画布上,但是控制台中出现错误消息,并且dataURL为空。
dataURL
Firefox中的消息是: “ SecurityError:操作不安全。” , 在Chrome中是 “未捕获的安全错误:无法在’HTMLCanvasElement’上执行’toDataURL’:污染的画布可能无法导出。” , 而在IE上,我刚得到 “ SecurityError” 。
这是什么意思 ?
您必须等待图像 加载 完毕才能在画布上绘画。
为此,只需使用load您<img>元素的事件处理程序即可:
load
<img>
// create a new image var img = new Image(); // declare a function to call once the image has loaded img.onload = function(){ var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; var context = canvas.getContext('2d'); context.drawImage(img, 0,0); var dataURL = canvas.toDataURL(); // now you can do something with the dataURL doSomething(dataURL); } // now set the image's src img.src = "http://somerandomWebsite/picture.png";
此外,在画布context.toDataURL(),并context.getImageData能正常工作,你必须让在你的图像资源跨域兼容的方式,否则画布‘污点’,这意味着任何获得的像素数据的方法将被阻止。
context.toDataURL()
context.getImageData
img.crossOrigin
"use-credentials"
"anonymous"
Nota Bene :CORS 标头由服务器发送,该cross-origin属性只会让它知道您要使用CORS来获取图像数据,如果 服务器 设置不正确,您将无法绕开它。 另外,某些UserAgent(IE和Safari)仍未实现此属性。
cross-origin
边缘案例 :如果某些图像来自服务器,而某些图像来自CORS兼容的服务器,则您可能需要使用onerror事件处理程序,如果将cross-origin属性设置"anonymous"为非CORS服务器,则该事件处理程序将触发。
onerror
function corsError(){ this.crossOrigin=''; this.src=''; this.removeEventListener('error', corsError, false); } img.addEventListener('error', corsError, false);