拍摄网页截图

Question

我想采取截图的网页，让用户下载作为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()"/>

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

​

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

​

​

Answer 1

看起来这和CORS的问题有关。

为了确保这是CORS问题，您应该检查控制台中是否有提到CORS问题的错误。

您应该确保您的图像是主机在同一领域与您的网站。如果不是，您应该确保加载映像的服务器正在接受CORS请求。

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

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

还请确保您正在以以下方式加载具有交叉原点属性的图像：

<img crossorigin src="...">