如何解决无法在“ CanvasRenderingContext2D”上执行“ getImageData”：画布已被跨域数据污染？

Question

我正在尝试使用以下代码。

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
img.crossOrigin = 'anonymous';
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);

错误：无法在'CanvasRenderingContext2D'上执行'getImageData'：画布已被跨域数据污染。发生了。我正在尝试 img.crossOrigin ='anonymous'; ，并引用了此链接 How to fix getImageData() error The canvas has been tainted by cross-origin data? 但仍然存在相同的错误