html2canvas跨域问题需前后端协同解决：前端img设crossOrigin="anonymous"且html2canvas配置useCORS:true、allowTaint:false；后端必须返回Access-Control-Allow-Origin:*等CORS头，缺一不可。
Canvas 一旦绘制了跨域图片，toDataURL()、toBlob() 和 getImageData() 就会直接抛出 SecurityError: The canvas has been tainted by cross-origin data ——这不是 bug，是浏览器强制执行的安全策略，绕不开，只能按规则来。
img.crossOrigin 属性必须显式设置为 'anonymous'
只在服务器返回 Access-Control-Allow-Origin 头还不够。浏览器判断是否“允许跨域读取像素”的关键，在于 <img> 元素是否携带合法的 crossOrigin 属性，且值必须匹配响应头。
-
img.crossOrigin = 'anonymous'是最常用、也最安全的选择；等效于 HTML 中写<img crossorigin="anonymous"> -
img.crossOrigin = ''（空字符串）会被当作'anonymous'处理，但不推荐，语义不清 -
img.crossOrigin = 'use-credentials'仅当需要携带 Cookie 或认证头时才用，此时服务端必须返回Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin不能为* - 设成任意无效值（如
'xyz'或未设置）→ 浏览器按“非 CORS 模式”请求 → 图片能显示，但绘入 Canvas 后必然污染
服务端必须返回有效的 CORS 响应头
前端设了 crossOrigin，只是发出了“带 Origin 的请求”；如果服务端没回对应头，请求仍被视为普通跨域请求，Canvas 依然污染。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 必需响应头：
Access-Control-Allow-Origin: *（或明确指定源，如https://yourdomain.com） - CDN（如阿里云 OSS、腾讯云 COS）需在控制台手动开启跨域规则，仅配置 Nginx 不够——OSS 的跨域设置独立于后端
- 某些 CDN（尤其免费层）默认不返回 CORS 头，即使你加了
crossOrigin，Network 面板里看 Response Headers 里没有Access-Control-Allow-Origin，就等于白配 - 验证方法：在浏览器 Network 面板中找到该图片请求，确认 Response Headers 包含有效的
Access-Control-Allow-Origin
html2canvas 的 useCORS 和 allowTaint 参数怎么配
html2canvas 不是原生 Canvas API，它内部模拟加载和绘制流程，所以要额外告诉它“怎么处理跨域资源”。这两个参数常被混用，但作用完全不同：
立即学习“前端免费学习笔记（深入）”；
-
useCORS: true→ 让 html2canvas 对所有<img>自动补上crossOrigin="anonymous"并发起 CORS 请求（前提是图片 URL 可被 CORS 化，且服务端支持） -
allowTaint: true→ 允许 html2canvas 绘制“已被污染”的图片，但结果 Canvas 无法调用toDataURL()等方法（跟原生 Canvas 行为一致） - 正确组合是：
useCORS: true+allowTaint: false（默认值），这样才能生成可导出的 clean canvas - 如果服务端不支持 CORS，
useCORS: true会失败（图片加载失败或空白），此时唯一办法是代理或 Base64 转换，不是靠改参数硬扛
污染发生时机和快速验证方法
污染不是加载时发生的，而是在调用 ctx.drawImage() 把跨域图片画进 Canvas 的那一刻触发的。也就是说，图片能正常显示 ≠ Canvas 安全。
- 快速验证是否已污染：
ctx.getImageData(0, 0, 1, 1)—— 如果立刻报SecurityError，说明已污染 - 不要等到
toDataURL()才发现失败；在drawImage()后立即做一次最小像素读取，便于定位问题阶段 - 注意：污染是单向不可逆的。哪怕后续再 draw 一张同源图，Canvas 依然保持污染状态
- 本地开发时容易误判：file:// 协议下
crossOrigin会被忽略，必须用 http(s) 服务（如live-server、http-server或 webpack dev server）测试
