如何在浏览器中使用JavaScript进行屏幕截图

在浏览器中进行屏幕截图（或称为“客户端”）涉及到各种权衡——没有一种完美的解决方案适用于所有情况。让我们看看三种不同的屏幕截图方法，然后探讨如何通过将它们发送到服务器或让用户下载图片来使用它们。

屏幕截图可能是你的JavaScript应用程序中非常有价值和重要的一部分。像谷歌这样的公司使用它们来获取用户反馈，像BugHerd这样的产品将屏幕截图作为其产品的核心部分，它们还非常适合生成数据导出（如图表）。

要求用户对他们正在查看的内容进行屏幕截图会增加很多摩擦。首先，他们需要知道键盘快捷键（这在macOS和Windows之间是不同的）。

然后他们需要知道如何处理它。例如，他们可以将其上传到像Dropbox这样的地方，或者通过电子邮件发送给你。大多数用户可能不知道如何调整屏幕截图的大小或优化质量。如果你自己托管屏幕截图，你希望确保它们占用的空间尽可能少，这反过来又确保你的支出尽可能少。

以下是你可以为用户自动捕获屏幕截图的三种方式：

1. 使用html2canvas进行客户端屏幕截图

Niklas von Hertzen在2011年回答了一个StackOverflow问题，说可以将页面的DOM放入HTML画布中，并用它来生成屏幕截图。在他公开代码后，他用原始的想法更新了他的答案，那就是html2canvas。后来的调查发现，谷歌使用非常相似的技术自动生成用户反馈的屏幕截图，证明了这种实现是可扩展的，并且足够强大，适用于大型产品。

如何使用html2canvas

这个想法非常简单——当你想生成屏幕截图时，捕获DOM（页面的HTML），并将该DOM传递到HTML画布中。在某些限制下，画布元素可以生成内部内容的数据URI（作为base64字符串）。下面的示例生成了一个屏幕截图，并将其作为图像在窗口中打开。

const screenshotTarget = document.body;

html2canvas(screenshotTarget).then((canvas) => {
   
    const base64image = canvas.toDataURL("image/png");
    window.location.href = base64image;
});

使用画布方法的优缺点

优点

快速——你不需要等待任何外部服务，