javascript - 使用 F5 刷新页面时抛出受污染的 Canvas 错误

Question

我的代码有问题，与此 CodePen 非常相似。

var img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Diceros_bicornis.jpg/320px-Diceros_bicornis.jpg';
img.crossOrigin = "Anonymous"
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
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);

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas -->

<canvas id="canvas" width="300" height="227" style="float:left"></canvas>
<div id="color" style="width:200px;height:50px;float:left"></div>

当页面首次打开时，它确实可以正常工作。但是，当我使用 F5 刷新页面时，它有时开始抛出受污染的 Canvas 错误。只有当我单击 x 关闭选项卡，然后再次单击该链接打开一个全新的选项卡时，它肯定会再次起作用。

我已经有 img.crossOrigin = "Anonymous"。

Answer 1

这听起来像是一个 chrome bug，但很容易解决:首先设置您的 crossOrigin 属性。

第一次发出请求时，crossOrigin 属性会在图像加载之前设置，因此您的浏览器将重做请求。

但是当您重新加载页面时，图像已被缓存，并在设置 crossOrigin 属性之前加载。那么你的 Canvas 就会被污染。

对于类似的小错误情况，您还应该在设置此 src 属性之前定义 onload 事件处理程序:

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

var img = new Image();
img.crossOrigin = "Anonymous"
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
};
// set the src last
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Diceros_bicornis.jpg/320px-Diceros_bicornis.jpg';

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);

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas -->

<canvas id="canvas" width="300" height="227" style="float:left"></canvas>
<div id="color" style="width:200px;height:50px;float:left"></div>