使用 F5 刷新页面时抛出受污染的画布错误答案

【问题标题】：Tainted canvas error thrown when refreshing the page with F5使用 F5 刷新页面时抛出受污染的画布错误
【发布时间】：2017-04-06 20:13:00
【问题描述】：

我的代码有问题，这与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 刷新页面时，它SOMETIMES 开始抛出tainted canvas 错误。只有当我单击 x 关闭选项卡，然后再次单击链接打开一个全新的选项卡时，它肯定会再次工作。

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

【问题讨论】：

请在问题中包含所有相关代码。

标签： javascript html canvas html5-canvas

【解决方案1】：

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

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

但是当您重新加载页面时，图像已经被缓存，并且在设置 crossOrigin 属性之前加载。然后你的画布就会被污染。

对于类似的小错误情况，您还应该在设置此 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>

【讨论】：