javascript - 使用 Firefox 插件的 Javascript 捕获浏览器屏幕(完整且可见)

Question

标题非常不言自明，但我将在这里进行更深入的解释。我的图像托管网站有一个 Firefox 扩展(目前已关闭)。

它目前有两个功能:

• 右键单击图像并远程上传
• 右键单击图像，弹出 JavaScript 弹出窗口以输入新宽度并上传

扩展程序仍然需要一个(或两个)功能，允许用户上传浏览器上当前可见的内容或浏览器的完整捕获(包括滚动条下的内容)。

我尝试过的:

我尝试从其他扩展复制各种代码，并将它们与我自己的扩展结合起来。它们包括诸如 Canvas 之类的东西，我不太理解。我能够以某种方式获得 base64 图像字符串(我不太记得如何获得)。有了这个字符串，我认为实现我的目标的最佳方法是通过 XMLHttpRequest 将其发送到我的图像主机，并在我的主机中创建图像。 ResponseText 将是图像的链接。

正如你所看到的，我在这里做了太多的事情 - 我显然不需要在我的服务器端针对这个问题进行额外的处理。我认为有一些方法可以仅通过扩展来处理所有内容，而无需在服务器端进行额外的编码(如果我错了，请纠正我)。

实际问题

这是附加组件:https://addons.mozilla.org/en-US/firefox/addon/imgit/
正如您所看到的，扩展程序添加了两个上下文菜单，我需要第三个上下文菜单，其中有一个向右的箭头，用于打开另一个菜单，其中包含我需要的两个新选项:

• 捕获可见屏幕并上传
• 捕获全屏并上传

第一个选项应该捕获并上传浏览器中可见的内容，不包括滚动条下的内容。第二个选项应该捕获所有内容并将其上传到我的网站，包括滚动条下的内容。

添加上下文菜单并不是什么大问题，但让它们按照我想要的方式运行是我遇到的问题。我不知道如何开始，而且我在网络上的研究也无法让我走得更远。通过 Javascript 以某种方式创建图像(使用 canvas ，我不知道如何)并将 Base64 编码的字符串发送到我的网站实际上可以工作，但拍摄快照并使其进行 Base64 编码是问题。我还不确定 Firefox 扩展是否真的允许我使用 Ajax 发送/接收数据。

我需要你做什么

我需要一个合乎逻辑的方法来解决这个问题。如果您有想法，请回答并显示代码片段，我们将不胜感激。我不是 Javascript 专家，但有了一些关于如何开始的信息，我可以让自己摆脱困境。

实现我想要的目标的最佳方法是什么？

Answer 1

查看 grabScreen devtools的截图命令的功能。