Canvas导出PNG报错'Tainted canvases may not be exported'求助

• 问题根源：点击change按钮修改背景时，新加载的图片没设置crossOrigin属性，导致画布被跨域污染。初始导出正常是因为背景是通过CSS设置的，没通过Canvas绘制图片；但修改后是用drawImage把图片画到Canvas上，这时候无跨域标识的图片会触发污染，浏览器禁止导出这类画布内容。

• 修复步骤：

  1. 给加载背景的图片对象先设置crossOrigin = 'anonymous'，再设置src，顺序绝对不能搞反——浏览器会在请求图片前检查跨域标识，晚设置就不会生效。
  2. 确认图片所在服务器支持匿名跨域请求（你用的这类公共图片服务一般都支持）。

• 具体代码修改：
  找到change方法里的图片加载逻辑，改成下面这样：

  const img = new Image();
  img.crossOrigin = 'anonymous'; // 这行必须写在src前面
  img.onload = () => {
    const ctx = this.canvas.nativeElement.getContext('2d');
    ctx.drawImage(img, 0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
  };
  img.src = 'https://picsum.photos/800/600';
  

• 额外提醒：

  • 如果图片服务器不支持CORS，就算加了crossOrigin也没用，这时候可以把图片转成base64格式再绘制，或者换成同域图片。
  • 别尝试在src设置之后再补加crossOrigin，浏览器已经发起请求了，跨域标识不会生效。

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