canvas读取跨域图片像素失败 Failed to execute getImageData The canvas has been tainted by cross-origin data

男娘i 2023-02-20 07:21 4阅读 0赞

错误描述：

Uncaught SecurityError: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.

这个canvas的例子，是读取和操作画布上的像素。该画布将一幅照片显示在画布上，然后试图通过鼠标点击照片，读取点中的像素，并显示在一个div上。

结果报错，如开头所述。错误描述有关键词，跨域，究其原因，是因为展示的这张照片，位于其他站点。

应对之道，将图片的地址加上时间戳，然后再设个跨域属性，可也。

var img = new Image();
    var url = 'https://media.prod.mdn.mozit.cloud/attachments/2013/06/22/5397/7a3ec0cae64a95ad454ac3bc2c71c004/rhino.jpg';
    img.src = url + '?' + new Date().getTime();
    img.setAttribute('crossOrigin', '');

完整代码：

结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200624164516694.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0,size_16,color_FFFFFF,t_70