Question

我们制作了一个非常简单的html编辑器（contenteditable="true"），用户可以粘贴从其他网页复制的图像，但如果用户从word复制图像，word会将src粘贴为file：// temp /someimg.jpg并且浏览器不会加载图像。

<img src="file://..../.jgp">

但如果我在开发计算机（http://127.0.0.1）上运行网页并执行相同的操作，则会将图像src粘贴为＆＃34; data：image / jpeg; base64 .....＆＃34;

是否有某种方法可以将base64编码的图片始终粘贴到编辑器，而不仅仅是文件：// location？

Answer 1

您需要处理粘贴事件并阅读剪贴板以获取图像内容。请在下面的代码段（在谷歌浏览器中测试）中找到原型，并展示相同的内容。您可以参考http://joelb.me/blog/2011/code-snippet-accessing-clipboard-images-with-javascript/博客了解有关在不同浏览器中处理的更多信息。

// create paste event listener
window.addEventListener("paste", pasteHandler);

// handle paste events
function pasteHandler(e) {
  if (e.clipboardData) {
    var items = e.clipboardData.items;
    if (items) {
      for (var i in items) { // iterate through clipbord items
        var item = items[i];
        if (item.kind == "file") {  //image is a file
        
          // create image source
          var blob = item.getAsFile();
          var URLObj = window.URL || window.webkitURL;
          var source = URLObj.createObjectURL(blob);
          var pastedImage = new Image();
          pastedImage.src = source;
          
          // add it in editor
          document.getElementById("editor").innerHTML = document.getElementById("editor").innerHTML + pastedImage.outerHTML;
        }
      }
    }
  }
}

#editor{
  min-width: 400px;
  min-height: 250px;
  border: solid;
  border-width: thin;
  padding: 10px;
}

<div id="editor" contenteditable=true>Copy an image from word<br/>Press Ctrl+v to paste it here <br/></div>

HTML编辑器和粘贴Word中的图像

1 个答案: