html2canvas报错Unable to clone canvas as it is tainted求助

以下是针对你遇到的“Unable to clone canvas as it is tainted”错误的具体解决方案，按优先级排序：

• 给所有外部图片添加crossorigin属性
  确保HTML中所有<img>标签都显式设置crossorigin="anonymous"，动态创建的图片也要在设置src前先配置跨域：

  <img src="https://external-domain.com/image.jpg" crossorigin="anonymous">
  

  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.src = 'https://external-domain.com/image.jpg';
  

• 启用html2canvas的跨域支持
  在html2canvas的配置项中添加useCORS: true，强制工具处理跨域资源，修改你的点击函数：

  $('#snap').click(function () {
    html2canvas(document.getElementById("sfs-page"), {
      useCORS: true, // 新增跨域配置
      onrendered: function(canvas) {
        var tempcanvas = document.createElement('canvas');
        tempcanvas.width=465;
        tempcanvas.height=524;
        var context=tempcanvas.getContext('2d');
        context.drawImage(canvas,465,40,465,524,0,0,465,524);
        var link=document.createElement("a");
        link.href=canvas.toDataURL('image/jpg');
        link.download = 'screenshot.jpg';
        link.click();
        window.open(link);
      }
    });
  });
  

• 检查外部图片服务器的CORS配置
  外部图片所在服务器必须返回Access-Control-Allow-Origin响应头（值为*或你的域名），否则即使前端配置了crossorigin也会触发污染。

• 临时显示隐藏容器再截图
  隐藏状态的容器可能导致html2canvas无法正确解析跨域资源，可在截图前临时显示容器，完成后恢复隐藏：

  $('#snap').click(function () {
    const sfsPage = document.getElementById("sfs-page");
    // 临时显示容器
    sfsPage.style.display = 'block';
    html2canvas(sfsPage, {
      useCORS: true,
      onrendered: function(canvas) {
        // 恢复隐藏状态
        sfsPage.style.display = 'none';
        // 后续截图处理逻辑...
      }
    });
  });
  

• 避免污染canvas的二次绘制
  如果原canvas已被污染，调用drawImage会延续污染状态。若不需要裁剪功能，可直接使用html2canvas生成的canvas进行下载操作，去掉临时canvas的二次绘制步骤。

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