使用JavaScript打印canvas图片时触发Tainted canvases导出错误如何解决

API 探路者

2026-10-17

错误根因

该报错为canvas被跨域源污染导致的权限限制。浏览器同源策略明确要求：只要canvas绘制了非同源域的资源，就会被标记为tainted（污染）状态，禁止调用toDataURL、getImageData等导出类接口。
你当前场景触发污染的常见原因有两个：

通过Blob生成的SVG ObjectURL在多数浏览器中会被识别为跨域源，绘制到canvas后直接触发污染
你嵌入SVG的#mytable内容中如果包含外部图片、外部字体等非同源资源，也会导致canvas被污染

修复方案

方案1：直接修改现有逻辑

第一步先清理#mytable中的外部资源：所有图片、字体全部转成base64格式内嵌，不允许使用外部HTTP/HTTPS链接
替换原有的Blob+ObjectURL实现，改为直接将SVG转base64赋值给图片，同时显式声明图片跨域属性，修改后的代码片段如下：

// 原有data变量定义保持不变
var img = new Image();
// 直接转base64赋值，避免ObjectURL跨域问题
img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(data);
img.crossOrigin = 'anonymous';
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};

如果你最终需求是唤起打印而非下载图片，完全可以绕过canvas导出逻辑，直接调用原生打印能力避免污染问题，打印函数修改为：

function btnclick() {
  // 插入临时打印样式，只显示canvas
  const printStyle = document.createElement('style');
  printStyle.textContent = `
    @media print {
      body * { visibility: hidden; }
      #canvas { visibility: visible; position: absolute; left: 0; top: 0; width: 100%; }
    }
  `;
  document.head.appendChild(printStyle);
  window.print();
  // 打印完成后清理临时样式
  document.head.removeChild(printStyle);
}