Safari ClipboardEvent.clipboardData检查是否粘贴了图像

Question

我需要添加额外的行为，当用户粘贴图片在移动Safari。我使用下面的代码来获取clipboardData

document.getElementById('content').addEventListener('paste', function(e) {
    var clipboardData = e.clipboardData;
// check if image were pasted
}

从这一点上，我如何检查它的图像(jpg，png，gif)是否被粘贴？

Answer 1

我无法从e.clipboardData获取数据，因为它根本没有显示任何数据。所以我用可编辑的div代替，这样你就可以检查它是否是可编辑的div中的一个图像，并找出里面有什么。

​

document.getElementById("content").addEventListener("paste", function(e) {
  setTimeout(() => {
    var pasted = $("#content").children();
    if (!pasted.length) {
      console.log("nothing pasted!");
      return;
    }
    pasted.map((i, x) => {
      if (x.tagName != "IMG") {
        console.log(x);
        console.log(`${x.tagName} not image`);
        return;
      }
      console.log(`pasted image=[${x.src}]!`);
    });
  });
});

#content {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content' contenteditable='true'></div>

​

当您获得data-url时，您可以联系jpg或png，否则将更加复杂，需要一个后端api。