html2canvas/截图

Question

如上图所示，在使用HTML2CANVAS的时候碰到一个问题，就是使用html2canvas进行截图的时候，对于外部连接图片的截图是空的，但是如果使用项目内的图片就能够截出来，如何实现能够直接截取外部链接的截图方法

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

问题解答

你遇到的问题是使用 html2canvas 截图外部链接图片时，截图结果为空，而使用项目内图片可以截图成功。这个问题是因为 html2canvas 在截图时，会将外部链接图片的 URL 转换为一个 data URL，以便在客户端渲染图片。但是，这个 data URL 可能会被浏览器的同源策略限制，导致无法获取外部链接图片的内容。

解决这个问题的一种方法是使用 html2canvas 的 allowUrl 选项，设置为 true，这样 html2canvas 就可以获取外部链接图片的内容。例如：

html2canvas(document.body, {
  allowUrl: true,
  useCORS: true
}).then(canvas => {
  // 截图结果
});

另外，你也可以使用 html2canvas 的 proxy 选项，设置为一个代理服务器的 URL，以便将外部链接图片的请求代理到服务器上，然后在服务器上获取图片内容。例如：

html2canvas(document.body, {
  proxy: 'https://your-proxy-server.com/proxy',
  useCORS: true
}).then(canvas => {
  // 截图结果
});

需要注意的是，这些解决方案都需要服务器端的支持和配置。

代码示例

以下是一个使用 html2canvas 截图外部链接图片的示例代码：

const html2canvas = require('html2canvas');

html2canvas(document.body, {
  allowUrl: true,
  useCORS: true
}).then(canvas => {
  const img = canvas.toBuffer('image/jpeg');
  // 保存截图结果
  fs.writeFileSync('screenshot.jpg', img);
});

这个示例代码使用 html2canvas 截图整个 HTML 页面，然后将截图结果保存到一个 JPEG 文件中。