1 
<div id='img3'>background-image with this</div>

#img3 {
  background-image: url("../icons/we-flow.png");
}

var img = img3.computedStyleMap().get("background-image");
//img=img1;
var canvas=document.createElement('canvas');
img.crossOrigin="Anonymous";
var ctx=canvas.getContext('2d');
try {
  ctx.drawImage(img, 0, 0);
  var data=ctx.getImageData(0, 0, canvas.width, canvas.height).data;
}catch (error) {
  console.log('refresh page will get this', img.toString(), {error, img});
}

このコードを chrome 83 で実行し、最初にコードをロードすると、すべて問題ありませんが、ブラウザーでページを更新すると、console.log が表示されます。

DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

なぜ、どうすれば修正できますか？

4

1 に答える 1