在获取 dataURL()
之前,我试图在 Canvas 上绘制图像,但返回的数据是空的。
当我在控制台中检查它时,我看到字符串中有很多 A
: ("data:image/png;base64,iVBO..some random chars. .. bQhfoAAAAAAAAAA... 很多 A ...AAAASUVORK5CYII="
)
当我尝试将 Canvas 附加到文档时,也没有绘制任何内容,控制台中也没有抛出任何错误。
这里有什么问题?
这是我的代码:
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);
此外,在进行快速刷新时,图像会正确绘制到 Canvas 上,但我在控制台中收到一条错误消息,dataURL
为空。
Firefox 中的消息是:“SecurityError:操作不安全。”,
在 Chrome 中它是“未捕获的安全错误:无法在‘HTMLCanvasElement’上执行‘toDataURL’:可能无法导出受污染的 Canvas 。”,
在 IE 上,我只得到“SecurityError”。
这是什么意思?
最佳答案
您必须等待您的图像加载,然后才能在 Canvas 上绘制它。
为此,只需使用 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";
此外,对于 Canvas 的 context.toDataURL()
和 context.getImageData
要正常工作,您必须在 cross-origin compliant way 中获取图像资源,否则 Canvas 被“污染”,这意味着任何获取像素数据的方法都将被阻止。
- 如果您的图片来自同一个服务器,没问题。
- 如果您的图片是从外部服务器 提供的,请确保它在其跨源 header 中允许您的图片并设置
img.crossOrigin
至"use-credentials"
. - 如果服务器允许匿名请求,您可以设置
img.crossOrigin
至"anonymous"
.
注意:CORS header 由服务器发送,cross-origin
属性只会让它知道你要使用CORS来获取图像数据,如果服务器设置不当,你无法绕过它。
还有一些 UserAgents(IE 和 Safari)还没有实现这个属性。
边缘情况:如果您的某些图像来自您的服务器,而另一些来自符合 CORS 的服务器,那么您可能需要使用 onerror
如果设置 cross-origin
应该触发的事件处理程序属性为 "anonymous"
在非 CORS 服务器上。
function corsError(){
this.crossOrigin='';
this.src='';
this.removeEventListener('error', corsError, false);
}
img.addEventListener('error', corsError, false);
关于javascript - CanvasContext2D drawImage() 问题 [onload 和 CORS],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48369127/