javascript - 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 获取数据，因为它根本没有显示。所以我改为使用 Editable div，然后您可以检查它是否是 Editable 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时你可以teljpg或者png，如果没有就更复杂了，一个后端api需要