Question

在我的代码中，我正在生成拖放或复制粘贴图像的缩略图。拖放不是问题，但通过复制粘贴，我可以在Safari（下面的快照）中看到错误，但仍然生成缩略图！

错误：

我的代码的相关摘要：

＆＃13;

document.getElementById('target').addEventListener('paste', function(event){
  console.log("pasted!", event);
  this.style.background='green';

  // get pasted data; Source: http://codingmiles.com/pasting-image-contenteditable-div/
  var pastedData = event.clipboardData.items[0];

  console.log("pastedData",pastedData);

  // If the clipboard data is of type image, read the data
  if(pastedData.type.indexOf("image") === 0) {
    console.log('calling thumbnail function'); // does not show up in the console! o.O
    composeThumbnail(pastedData.getAsFile()); // this still works!
  }
});

function composeThumbnail(file) { // source: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

  if (!/^image\//.test(file.type)) { // if not an image; 0 since we take only 1 image, if multiple dragged at once, consider only the first one in the array
    console.log('ERROR: Not an image file.');
    return false;
  }

  // compose an <img> for the thumbnail
  var thumbnailImage = document.createElement("img");
  thumbnailImage.file = file;
  document.getElementById('target').appendChild(thumbnailImage);

  var reader = new FileReader();

  reader.onload = (function(thumbnailImage) {
    // this image is part of the data, so send typing notification to the agent
    return function(event) {
      thumbnailImage.src = event.target.result;
    };
  })(thumbnailImage);

  reader.readAsDataURL(file);

}

＆＃13;

#target{
  width: 100%;
  height: 200px;
  border: 2px solid black;
  border-radius: 5px;
  background: transparent;
  padding: 15px;
}

#target img{
  height: 25%;
  width: auto;
  vertical-align: middle;
  border-radius: 5px;
  padding: 5px;
}

#target *{
  vertical-align: text-top;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>

    <div id="target" contenteditable="true"></div>

  </body>
</html>

＆＃13;

正如评论中所提到的，我使用this resource作为粘贴事件处理程序。

我的Safari版本是9.1，我使用的是Mac OS X El Capitan。

为什么缩略图仍在生成？我在这里缺少什么？

Answer 1

Safari不支持将图片粘贴到令人满意的DIV中。我最后一次使用Safari v9.1.1检查时，它仍然不受支持。

您可以查看this page的底部，它是这样说的。

Answer 2

我可能迟到了，但不是

{
 var pastedData = event.clipboardData.items[0];
}

尝试

{
 var pastedData = event.clipboardData.files[0];
 .
 .
 .
 composeThumbnail(pastedData)
}

event.clipboardData.items给出了Safari不支持的DataTransferItemList列表

图像粘贴到contenteditable div工作在Safari中的错误原因

2 个答案: