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

您可以使用html2canvas来截取屏幕快照并上传，所有这些都使用JavaScript。

使用以下内容获取当前屏幕的屏幕截图：

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

});

然后使用canvas.toDataURL();将图像转换为base64并上传。

Answer 2

是的，您可以：

捕获粘贴到您网页中的剪贴板中的数据
通过HTTP将数据上传到某个地方
将所述数据作为图像显示在您的网页中

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

传递了事件监听器的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());

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

2 个答案: