使用F5刷新页面时引发的画布变色错误

Question

I have problem with my code, which is quite similar to this 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> 

It somehow certainly works when the page is first open. But when I refresh the page with F5 , it SOMETIMES starts throwing the tainted canvas error . Only when I click x to close the tab, and then click the link again to open a brand new tab will it certainly work again.

I already have img.crossOrigin = "Anonymous" .

Answer 1

That sounds like a chrome bug, but easily workaround-able : Set your crossOrigin attribute first.

The first time the request is made, the crossOrigin attribute is set before the image has loaded, hence your browser will redo the request.

But when you reload the page, the image is already cached, and loads before the crossOrigin attribute is set. Then your canvas will be tainted.

For similar little bugs cases, you should also define your onload event handler before setting this src attribute :

 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>