FabricJS调用toDataURL时报错“Tainted canvases may not be exported”求解决

这个问题我碰到过好多次了，本质是浏览器的跨域安全限制在起作用——当你用来自其他域名的图片填充Canvas后，浏览器会把画布标记为「被污染」，禁止你导出它的内容（比如调用toDataURL()），目的是防止恶意站点盗用未经授权的图片资源。

针对你的需求（生成PNG数据并赋值给img标签的src），这里有两个可行的解决方案：

方案1：给图片添加跨域属性（推荐，前提是图片服务器支持CORS） #

如果你的图片所在服务器配置了CORS允许跨域访问（会返回Access-Control-Allow-Origin这类响应头），只需要在加载图片时提前设置crossOrigin属性即可：

const img = new Image();
// 关键设置：允许匿名跨域访问
img.crossOrigin = "anonymous";
img.src = "你的图片URL";

img.onload = () => {
  // 图片加载完成后再绘制到Canvas上
  const pattern = ctx.createPattern(img, "repeat");
  // 你的矩形绘制逻辑...
};

对应到你的ImageContainer组件，只需要在初始化图片时加上crossOrigin配置：

class ImageContainer {
  constructor(imgUrl, ctx) {
    this.ctx = ctx;
    this.img = new Image();
    // 添加这一行，确保跨域属性在src之前设置
    this.img.crossOrigin = "anonymous";
    this.img.src = imgUrl;
    
    this.img.onload = () => {
      this.pattern = this.ctx.createPattern(this.img, "repeat");
      // 后续的绘制、导出逻辑就不会触发污染错误了
    };
  }
}

⚠️ 注意：如果图片已经被浏览器缓存，可能需要给图片URL加个随机参数（比如img.src = imgUrl + "?t=" + Date.now()），强制浏览器重新加载图片，确保跨域属性生效。

方案2：使用同域图片或代理服务器 #

如果图片服务器不支持CORS（无法返回跨域响应头），那你有两个备选方案：

• 将图片迁移到和你的网页同域名的服务器上，这样就不存在跨域问题了；
• 搭建一个代理服务器，把跨域图片的请求转发成同域请求——代理服务器会帮你获取图片，再返回给你的网页，这样浏览器就会认为图片是同域的，不会触发污染限制。

只要按照上面的方法调整，你就能正常调用toDataURL()生成PNG数据，再赋值给img标签的src属性了。

内容的提问来源于stack exchange，提问作者Eugene Vilder