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

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());