如果我使用键盘的“打印屏幕”键截取屏幕截图,将其复制并粘贴到普通的 <div contenteditable />
元素中,则屏幕截图将正常工作并显示在那里,如您在此处看到的 https://jsfiddle.net/2sf7benL/1/
但是,如果我将 paste
事件监听器添加到 <div contenteditable />
元素,并将屏幕截图粘贴到其中,则 clipboardData
对象中不会捕获任何内容,如下所示 https://jsfiddle.net/kds265Lv/2/
编辑 添加更多上下文:
重现步骤:
按键盘上的“打印屏幕”键
将其粘贴到下面的演示中。
屏幕截图将显示在
<div />
中。
div { height: 200px; width: 200px; border: 1px solid}
<div contenteditable></div>
这就是我想要的最终结果。现在,我不是简单地将其粘贴到 contenteditable
中,而是监听其 paste
事件,以便访问 clipboardData
中的屏幕截图,并最终使用 URL.createObjectURL
中的 contenteditable
渲染它:
function handlePaste (e) {
var clipboardData, pastedData;
// Stop data actually being pasted into div
e.stopPropagation();
e.preventDefault();
// Get pasted data via clipboard API
clipboardData = e.clipboardData || window.clipboardData;
console.log(clipboardData)// this is always empty when i paste screenshots
console.log(clipboardData.files[0]) // TADA!!!
// Do whatever with pasteddata
}
document.getElementById('editableDiv').addEventListener('paste', handlePaste);
div {height: 200px; width:200px; border:1px solid}
<div id='editableDiv' contenteditable='true'></div>
最佳答案
哇,为什么我这么笨......但公平地说,Firefox 和 Chrome 的控制台具有误导性......它实际上可以工作,但是 console.log event
和 event.clipboardData
在 chrome/FF 中会给你假阴性结果,例如空数组和 length: 0
:(
所以你只需要像这样更深入地挖掘:
event.clipboardData.files[0]
你会看到它!
关于javascript - 为什么clipboardData没有截图数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59211656/