使用html2canvas捕获DOM时在线图片加载失败，如何修复？

问题重现 #

我用html2canvas实现图片下载功能，代码如下：

const handleDownloadImage = async () => {
  try {
    const canvas = await html2canvas(cardRef.current);
    console.log(cardRef.current);
    const imageData = canvas.toDataURL("image/png");
    setImageUrl(imageData);
  } catch (error) {
    console.error("Error capturing image:", error);
  }
};

但加载在线图片时出现错误日志：

#4 240ms Starting DOM parsing logger.ts:25:29
#4 273ms Starting renderer for element at 216,32 with size 400x450 logger.ts:25:29
#4 273ms Canvas renderer initialized (400x450) with scale 1 logger.ts:25:29
#4 278ms Error loading image https://userpic.codeforces.org/3332594/title/6e3ce0bb53e6ed79.jpg Home:13441:25
#4 295ms Finished rendering

本地图片正常工作，确定是跨域在线图片导致的问题，以下是可行的解决方法：

方案1：开启html2canvas的跨域配置 #

html2canvas内置了跨域支持参数，调用时添加useCORS: true即可，前提是目标图片服务器配置了正确的CORS响应头（如Access-Control-Allow-Origin）：

const handleDownloadImage = async () => {
  try {
    const canvas = await html2canvas(cardRef.current, {
      useCORS: true // 启用跨域加载
    });
    const imageData = canvas.toDataURL("image/png");
    setImageUrl(imageData);
  } catch (error) {
    console.error("Error capturing image:", error);
  }
};

方案2：后端代理转发图片 #

如果目标服务器不支持CORS，可通过自己的后端接口转发图片请求，让前端请求同域资源：

前端代码修改：

// 调用后端代理接口获取图片
const getProxiedImage = async (originalUrl) => {
  const res = await fetch(`/api/proxy?url=${encodeURIComponent(originalUrl)}`);
  const blob = await res.blob();
  return URL.createObjectURL(blob);
};

const handleDownloadImage = async () => {
  try {
    // 替换DOM中的在线图片为代理地址
    const imgs = cardRef.current.querySelectorAll('img[src^="http"]');
    imgs.forEach(img => {
      img.dataset.original = img.src;
    });
    for (const img of imgs) {
      img.src = await getProxiedImage(img.dataset.original);
    }

    // 生成canvas
    const canvas = await html2canvas(cardRef.current);
    const imageData = canvas.toDataURL("image/png");
    setImageUrl(imageData);

    // 恢复原图片地址（可选）
    imgs.forEach(img => {
      img.src = img.dataset.original;
    });
  } catch (error) {
    console.error("Error capturing image:", error);
  }
};

后端示例（Node.js/Express）：

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

app.get('/api/proxy', async (req, res) => {
  try {
    const imgUrl = decodeURIComponent(req.query.url);
    const imgRes = await axios.get(imgUrl, { responseType: 'arraybuffer' });
    res.set('Content-Type', imgRes.headers['content-type']);
    res.send(imgRes.data);
  } catch (err) {
    res.status(500).send('Proxy failed');
  }
});

app.listen(3000, () => console.log('Proxy server running on port 3000'));

方案3：给图片添加跨域属性 #

在图片元素上添加crossOrigin="anonymous"，配合html2canvas的useCORS: true使用，适用于服务器支持匿名跨域的场景：

<img src="https://userpic.codeforces.org/3332594/title/6e3ce0bb53e6ed79.jpg" crossOrigin="anonymous" />

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