为什么 clipboardData 没有截图数据

Question

如果我用键盘的 'Print screen' 键截取屏幕截图，将其复制并粘贴到普通 <div contenteditable /> 元素中，屏幕截图将正常工作并显示在此处 https://jsfiddle.net/2sf7benL/1/

但是，如果我将 paste 事件侦听器添加到 <div contenteditable /> 元素，并将屏幕截图粘贴到其中，clipboardData 对象中不会捕获任何内容，如此处所示 https://jsfiddle.net/kds265Lv/2/

编辑要添加更多上下文：

重现步骤：

按键盘上的 'Print Screen' 键
粘贴到下面的演示中。
截图会显示在<div />.

div { height: 200px; width: 200px; border: 1px solid}

<div contenteditable></div>

这就是我想要的最终结果。现在，我不是简单地将它粘贴到 contenteditable 中，而是监听它的 paste 事件以访问 clipboardData 中的屏幕截图，最后使用 URL.createObjectURL 中的 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>

Answer 1

哇，为什么我这么笨...但公平地说，Firefox 和 Chrome 的控制台具有误导性。它确实有效，但 console.log event 和 event.clipboardData in chrome/FF 会给你假阴性结果，比如空数组和 length: 0 :(

所以你只需要像这样更深入地挖掘： event.clipboardData.files[0]

你会看到的！

为什么 clipboardData 没有截图数据

Why clipboardData doesn't have screenshots data

html

javascript

contenteditable