Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

最新推荐文章于 2024-09-12 18:02:32 发布

转载最新推荐文章于 2024-09-12 18:02:32 发布 · 2.4w 阅读

11 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2338463/blog/2960346

文章标签：

#python

本文探讨了在使用HTML5 canvas进行图像处理时遇到的“画布污染”问题，尤其是在调用toDataURL方法时出现的跨域错误。文章详细解释了问题的根源在于CORS策略，并提供了解决方案，即通过设置图像的crossOrigin属性为'Anonymous'来避免跨域限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

大概意思是canvas无法执行toDataURL方法：污染的画布无法输出，请原谅我的灵魂翻译。
经google 发现原来是受限于 CORS 策略，会存在跨域问题，虽然可以使用图像（比如append到页面上）但是绘制到画布上会污染画布，一旦一个画布被污染,就无法提取画布的数据，比如无法使用使用画布toBlob(),toDataURL(),或getImageData()方法;当使用这些方法的时候会抛出一个安全错误

解决方案：

图片设置：crossOrigin属性
代码片段：img.setAttribute("crossOrigin",'Anonymous')

完整代码:

``
  var canvas=document.getElementById("canvas"),//获取canvas
      ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔)
      img = new Image(),//创建新的图片对象
      base64 = '' ;//base64 
  img.src = 'http://www.xxxx.png';
  img.setAttribute("crossOrigin",'Anonymous')
  img.onload = function(){//图片加载完，再draw 和 toDataURL
       ctx.drawImage(img,0,0);    
       base64 = canvas.toDataURL("image/png"); 
   };

转载于:https://my.oschina.net/u/2338463/blog/2960346