为什么clipboardData没有截图数据

Question

如果我用键盘的“打印屏幕”键截图，复制它并粘贴到一个普通的<div contenteditable />元素中，屏幕截图就会工作并显示在那里，就像你在这里看到的https://jsfiddle.net/2sf7benL/1/

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

编辑以添加更多上下文：

复制步骤：

在下面的演示中，按keyboard

• Paste上的“打印屏幕”键

1. 。屏幕截图将显示在<div />.

中

​

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

<div contenteditable></div>

​

这是我想要的最终结果。现在，我不是简单地在contenteditable中粘贴它，而是侦听它的paste事件，以便访问clipboardData中的屏幕快照，最后在contenteditable中使用URL.createObjectURL呈现它。

​

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

哇为什么我这么笨..。但公平地说，火狐和Chrome的控制台是误导..。它实际上是有效的，但是console.log event和event.clipboardData在chrome/FF中会给出错误的负结果，比如空数组和length: 0 :(

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

你会看到的！