html2canvas 截不到远程图片：CORS 处理

页面截图后远程图片位置是空白，控制台报跨域相关错误。原因是画布读取跨源像素时被浏览器拦下，与图片能否正常显示无关。

三个条件

1. 开启 useCORS，让库为图片请求加上跨域属性。
2. 图片服务端返回跨域允许头，允许当前来源。
3. 图片元素本身带上 crossorigin 属性，否则缓存里存的是不带 CORS 的副本。

html2canvas(node, {
  useCORS: true,
  allowTaint: false,
  backgroundColor: null
}).then(canvas => { /* 导出 */ });

allowTaint 的取舍

开启后允许把跨域图片画进画布，代价是画布被标记为污染，导出接口会直接报错。需要导出图片时不要开启。

缓存带来的坑

同一张图先以普通方式加载过一次，再以跨域方式加载时，浏览器可能复用不带 CORS 头的缓存副本。给地址追加查询参数可以强制重新请求。

同源代理

无法控制图片服务端时，把图片地址换成同源代理接口，由服务端转发并补上响应头，前端不再直接跨源。

检查顺序

• 确认 useCORS 已开启。
• 在响应头里确认存在跨域允许头。
• 确认图片标签带有 crossorigin 属性。
• 确认没有在开启 allowTaint 后又调用导出接口。