canvas读取跨域图片像素失败 Failed to execute getImageData The canvas has been tainted by cross-origin data- 前端开发

错误描述：

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

这个canvas的例子，是读取和操作画布上的像素。该画布将一幅照片显示在画布上，然后试图通过鼠标点击照片，读取点中的像素，并显示在一个div上。

结果报错，如开头所述。错误描述有关键词，跨域，究其原因，是因为展示的这张照片，位于其他站点。

应对之道，将图片的地址加上时间戳，然后再设个跨域属性，可也。

var img = new Image();
var url = 'https://media.prod.mdn.mozit.cloud/attachmentshttps://cdn.jxasp.com:9143/image/2013/06https://cdn.jxasp.com:9143/image/22/5397/7a3ec0cae64a95ad454ac3bc2c71c004/rhino.jpg';
img.src = url + '?' + new Date().getTime();
img.setAttribute('crossOrigin', '');
1
2
3
4

完整代码：

<style>
#canvas{
    border:solid 1px #999;
}
#color{
    width:100px;
    height:100px;
}
</style>

<canvas id="canvas" width="310" height="240"></canvas>
<div id="color"></div>

<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var img = new Image();
var url = 'https://media.prod.mdn.mozit.cloud/attachmentshttps://cdn.jxasp.com:9143/image/2013/06https://cdn.jxasp.com:9143/image/22/5397/7a3ec0cae64a95ad454ac3bc2c71c004/rhino.jpg';
img.src = url + '?' + new Date().getTime();
img.setAttribute('crossOrigin', '');
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
};

var color = document.getElementById('color');

function pick(event) {
  var x = event.layerX;
  var y = event.layerY;
  var pixel = ctx.getImageData(x, y, 1, 1);
  var data = pixel.data;
  var rgba = 'rgba(' + data[0] + ',' + data[1] +
             ',' + data[2] + ',' + (data[3] / 255) + ')';
  color.style.background =  rgba;
  color.textContent = rgba;
}

canvas.addEventListener('mousemove', pick);

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42