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时，你可以通过电话jpg或png，如果不是更复杂，则需要后端api

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

1 个答案: