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 刷新页面时， SOMETIMES 会开始抛出受污染的画布错误。只有当我单击x关闭选项卡，然后再次单击该链接以打开一个全新的选项卡时，它肯定会再次运行。

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

Answer 1

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

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

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

对于类似的小错误案例，您还应在设置此src属性之前定义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);事件处理程序：

＆＃13;

<!-- 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>

＆＃13;

Procedure TForm1.StringGrid1KeyPress (Sender: TObject; var Key: Char);

 Var
  Sel: TGridRect; // Selecting the Scenes
  St: String; // Stroke
  R, c: word; // Row-Stroke, Col-Column

  Begin
 If Key = ^ C then
    Begin
     St: = ''; / / A full explanation of the structure
  Sel: = StringGrid1.Selection; // Wait a while for a loose ticket
  For r: = Sel.Top to Sel.Bottom do // query the lines of the first row
  Begin
    For c: = Sel.Left to Sel.Right do // query the number of lines in the foreground
    // Scribble in the Stroke of a Distributor
    If c = Sel.Right then St: = St + StringGrid1.Cells [c, r] else St: = St + StringGrid1.Cells [c, r] + # 9;
    St: = St + # 13 # 10; // the pattern of the stencil
  End;
  ClipBoard.AsText: = St; // Displays the alarm
    End;

End;

＆＃13;

使用F5刷新页面时引发了受污染的画布错误

1 个答案: