截取网页截图答案

【问题标题】：Taking a Screenshot of Webpage截取网页截图
【发布时间】：2022-10-14 14:12:33
【问题描述】：

我想截取网页截图，让用户下载为 PNG 文件。我的代码工作正常，但它没有捕获一些图像元素。

我究竟做错了什么。

这是代码

<!-- https://github.com/niklasvh/html2canvas -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.4/html2canvas.min.js"></script>
<script>
function capture () {
  html2canvas(document.body).then((canvas) => {
    let a = document.createElement("a");
    a.download = "ss.png";
    a.href = canvas.toDataURL("image/png");
    a.click();
  });
}
</script>
<input type="button" value="Capture" onclick="capture()"/>

这段代码的结果就是这个捕获

但是我的网站看起来有点像这样，很明显你可以看到缺少什么

【问题讨论】：

你在等window::load吗？
是的，我是@GrafiCode
尝试将{ useCORS: true } 作为html2canvas() 的第二个参数传递。
与@Ivar 相关的评论：github.com/niklasvh/html2canvas/issues/722
你好@Ivar，我也试过了......没有太大变化。我认为它可以捕获除图像块之外的所有内容。

标签： javascript html html2canvas screen-capture

【解决方案1】：

看起来它与CORS问题有关。

为确保这是一个 CORS 问题，您应该检查控制台中是否有任何错误提及 CORS 问题。

您应该确保您的图像与您的网站位于同一域中。如果没有，您应该确保从中加载图像的服务器正在接受 CORS 请求。

如果是 CORS 问题并且服务器接受 CORS 请求，您可以将选项设置为 html2canvas 函数，如下所示：

html2canvas(el, {
   useCORS: true,
   allowTaint: true 
}).then(() => ...)

还请确保您正在加载具有 crossorigin 属性的图像，如下所示：

<img crossorigin src="...">

【讨论】：