javascript - 为什么clipboardData没有截图数据

Question

如果我使用键盘的“打印屏幕”键截取屏幕截图，将其复制并粘贴到普通的 <div contenteditable /> 元素中，则屏幕截图将正常工作并显示在那里，如您在此处看到的 https://jsfiddle.net/2sf7benL/1/

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

编辑添加更多上下文:

重现步骤:

1. 按键盘上的“打印屏幕”键

2. 将其粘贴到下面的演示中。

3. 屏幕截图将显示在 <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>

Answer 1

哇，为什么我这么笨......但公平地说，Firefox 和 Chrome 的控制台具有误导性......它实际上可以工作，但是 console.log event 和 event.clipboardData在 chrome/FF 中会给你假阴性结果，例如空数组和 length: 0 :(

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

你会看到它!