嘿，这个问题我太熟悉了——很多开发者在处理Canvas跨域图片时都会踩这个坑！咱们先把问题根源理清楚，再一步步解决：

为什么会出现这种矛盾？ #

当你没设置crossOrigin: 'anonymous'时，浏览器虽然能加载跨域图片，但会把Canvas标记为「污染」状态，禁止你调用toDataURL()或toBlob()这类下载相关的API，于是抛出安全错误。

而当你设置了crossOrigin: 'anonymous'后，浏览器会严格按照CORS规则去请求图片：只有图片服务器返回了允许你域名访问的Access-Control-Allow-Origin响应头，浏览器才会允许你在Canvas中使用这张图；如果服务器没配置这个头，浏览器会直接拒绝加载图片，自然Canvas里就看不到了。

具体解决办法 #

1. 配置图片服务器的CORS响应头（优先推荐） #

如果这张图片是你自己的服务器托管的，直接在服务器上添加CORS配置即可：

• Nginx：在对应的server或location块中添加：

  add_header Access-Control-Allow-Origin *; # 允许所有域名，也可以指定你的具体域名，比如https://your-site.com
  add_header Access-Control-Allow-Methods GET;
  

• Apache：在.htaccess文件或配置文件中添加：

  Header set Access-Control-Allow-Origin "*"
  

配置完成后，再重新加载图片，应该就能同时正常显示和下载了。

2. 使用代理服务器中转图片（第三方图片无法配置CORS时用） #

如果图片是第三方平台的（比如公共图床、外部站点图片等），对方没开放CORS的话，你需要自己搭一个简单的后端代理，把跨域图片请求转发成同域请求：

举个Node.js + Express的极简代理例子：

const express = require('express');
const axios = require('axios');
const app = express();

// 代理图片请求
app.get('/proxy', async (req, res) => {
  try {
    const imgUrl = req.query.url;
    const response = await axios.get(imgUrl, { responseType: 'stream' });
    response.data.pipe(res);
  } catch (err) {
    res.status(500).send('图片代理失败');
  }
});

app.listen(3000, () => console.log('代理服务器运行在3000端口'));

然后前端请求图片时，换成代理地址：

const img = new Image();
// 不用设置crossOrigin，因为现在请求的是同域的代理地址
img.src = `http://localhost:3000/proxy?url=https://第三方图片地址`;
img.onload = () => {
  ctx.drawImage(img, 0, 0);
  // 现在可以正常调用下载API了
};

3. 处理图片缓存问题 #

有时候你设置了crossOrigin后，浏览器可能还在使用之前缓存的无CORS头的图片，导致加载失败。这时候可以给图片URL加个随机参数，强制浏览器重新请求：

img.src = `https://example.com/img.jpg?timestamp=${Date.now()}`;

4. 添加错误监听排查问题 #

给图片添加error事件监听，能快速定位是不是CORS导致的加载失败：

img.onerror = () => {
  console.error('图片加载失败，请检查CORS配置或代理是否正常');
};

总结 #

优先尝试配置图片服务器的CORS头，这是最规范的解决方案；如果是第三方图片，就用代理中转；别忘了处理缓存和错误监听，方便排查问题。

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