我可以从剪贴板截取屏幕截图吗？

Question

我可以从剪贴板截取屏幕截图，将其发送到 ajax 并放入 <img> 标签中吗？

例如，

我有这个表格：

<form>
  <div id="img"><img src="need put screen here!"></div>
  <textarea></textarea>
  <button type="submit">Answer!</button>
</form>

我需要它！人们要求从剪贴板中截取屏幕截图。

如果屏幕停留在代码 base64 中的剪贴板中，我将其制作成 PHP 中的图片。

我只是不知道，如何从剪贴板截取屏幕截图并将其发送到 ajax。

Answer 1

是的，您可以：

1. 在剪贴板中捕获粘贴到您网页中的数据
2. 通过 HTTP 将所述数据上传到某处
3. 在您的网页中将所述数据显示为图像

要在剪贴板中获取数据，您需要为“粘贴”事件类型附加一个事件侦听器。该事件在活动文档元素上触发，并在元素层次结构中一直向上到文档窗口。

您的事件侦听器传递的ClipboardEvent 对象将让您获取剪贴板中的实际数据、文本和/或图像：

addEventListener("paste", ev => {
    for(const item of ev.clipboardData.items) { /// Clipboard may contain multiple elements of different type -- text, image, etc
        if(item.type.startsWith("image/")) { /// We are only interested in clipboard data that is an image
            /// Do something with the data, image available as `item.getAsFile()`
        }
    }
});

图像数据可用于item.getAsFile()，File（Blob 的子类）。您可以简单地上传 blob：

var xhr = new XMLHttpRequest();
xhr.open("PUT", "http://example.com");
xhr.send(item.getAsFile()); /// Send the image with HTTP somewhere

您还可以显示粘贴的图像，假设您的文档中某处有<img id="foobar">：

document.getElementById("foobar").src = URL.createObjectURL(item.getAsFile());

Answer 2

您可以使用html2canvas 截取屏幕截图并上传，全部使用 JavaScript。

使用以下方法截取当前屏幕：

html2canvas(document.body).then(function(canvas) {

});

然后使用canvas.toDataURL();将图片转成base64并上传。