Question

如果我使用键盘的“打印屏幕”键拍摄了屏幕截图，然后将其复制并粘贴到普通的<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>

Answer 1

哇，我为什么这么愚蠢...但是老实说，Firefox和Chrome的控制台误导了。。它确实可以正常工作，但是Chrome / FF中的console.log E/PAGER: android.widget.TableLayout{691c2a9 V.E...... ........ 1200,0-2400,1265 #7f090031 app:id/frag_two} android.widget.TableLayout{d15902e V.E...... ........ 2400,0-3600,1265 #7f0900b6 app:id/frag_three} null和event会给你错误的提示否定结果，例如空数组和event.clipboardData :(

因此，您必须像这样更深入地进行挖掘： length: 0

您将看到它！

为什么剪贴板数据没有截图数据

1 个答案: