### [html2canvas 截不到远程图片：CORS 处理](https://www.huociguo.com/article/1633)

**Published:** 2026-10-01T13:14:40

**Author:** 米了

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

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

![屏幕上显示的代码](https://api.huociguo.com/wp-content/uploads/2026/10/e4.jpg)

截图涉及画布对像素的读取权限

## 三个条件

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

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

## allowTaint 的取舍

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

## 缓存带来的坑

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

## 同源代理

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

## 检查顺序

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

**Tags:** CORS配置, html2canvas, useCORS, 图片渲染, 跨域截图

**Categories:** HTML5

---