Uncaught DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.`

在写canvas的时候要获取图像数据,遇到了上面这个错误。

1
2
3
4
5
6
7
8
9
10
var img = new Image()
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
img.onload = function() {
ctx.drawImage(img, 0, 0)
img.style.display = 'none'
};
img.src = '1.png'
//....省略不重要的代码
var pix = ctx.getImageData(x, y, 1, 1)//错误的地方

原因

一般情况下,我们可以不通过CORS就在画布中使用跨域图片,用new Image()加载,然后将这个图片画在canvas上。但是这么做会污染画布,也就是让canvas变成了脏状态,一旦画布被污染,我们就不能读取其数据。譬如toDataUrl、getImageData()等。

​ 为了解决这个问题,image新增了一个属性crossOrigin,使得img也走类似XHR的跨域权限机制。设置了crossOrigin的img,即便是跨域图片被画在canvas上,也不会使canvas变为脏状态。

解决办法

  • 给image设置crossOrigin属性 img.crossOrigin="anonymous"

    提供资源的服务器也得支持跨域请求 header要设置Access-Control-Allow-Origin:*

    crossOrigin属性一定要在src之前设置

  • 如果在本地运行报错,可能是因为使用了file://

    也就是说这个页面需要运行在服务器上,所以我们可以运行一个localhost

    Set up localhost的几个方法..

    • 丢在 WampServer 里
    • python -m http.server 8080 (Python3)

stackoverfow 的相关提问 canvas CORS