Safari 剪贴板事件.剪贴板数据检查图像是否粘贴

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