使用JavaScript從剪貼板粘貼圖像

Question

我們如何使用javascript將剪貼板中的圖像粘貼到自定義的RTF編輯器中？ （ctrl + c和ctrl + v或快照）。

有人使用過Ajax的RTF編輯器嗎？ 將圖像從剪貼板粘貼到Ajax RTE是否可行？

請分享您的想法！

謝謝！

Answer 1

由於這個問題仍然經常出現在Google的搜索結果中，因此我想指出的是， 至少 在所有現代瀏覽器（2018）的 Google Chrome瀏覽器（2011） 中，這都是可能的。 他們實現了將其在GMail中使用的功能，但可用於所有網站。

從剪貼板功能粘貼圖像在Gmail和Google Chrome 12+中如何工作？

Answer 2

現在肯定可以在Chrome和Firefox中實現。 我不太了解IE / Safari。

以imgur.com，onpaste和pasteboard.co為例， 在github上查看粘貼板的代碼，以及Joel在其博客上的出色寫作

對於記錄，您需要用戶在元素上按Ctrl + V，然后可以通過從event.clipboardData讀取來捕獲粘貼事件處理程序中的數據，但要使其在event.clipboardData工作，您需要確保重點放在一個空的contenteditable元素上，然后從那里獲取結果，這在Firefox 22中效果不佳。請參見此處

Answer 3

諸如Firefox 4之類的新瀏覽器支持將剪貼板中的圖像數據作為帶有已編碼PNG Data的Data URI粘貼到RTE中。 但是，大多數Web應用程序都會錯誤地解析這些數據URI並將其丟棄。 Yahoo郵件可以正確處理。 但是，Gmail和Hotmail會將其丟棄。 我已通知Google和Microsoft。

Answer 4

現在我找到了剪貼板數據對象 。

但是它只能從剪貼板中檢索文本格式或URL。 clipboardData數據僅適用於IE，它適用於字符串，如果我們粘貼圖片，則返回null。

一個測試例子

 <form>
    <input type="text" id="context"  onClick="paste();">  
  </form>

<script type="text/javascript"> 

function paste() {  

var sRetrieveData = clipboardData.getData("Text");
document.getElementById('context').value = sRetrieveData;        

}
</script>

默認情況下，firefox上不啟用剪貼板訪問權限， 此處說明。 另一方面， execCommand（）僅處理文本值，並且不兼容Firefox。

就像其他人所說的那樣，代碼可以在IE上運行是一個安全隱患，任何站點都可以訪問您的剪貼板文本。

復制圖像相對URL的最簡單方法是使用Java Applet，Windows ActiveX插件， .net代碼或將其拖放。

Answer 5

為了幫助他人，我將在此處留下鏈接，其中包含Nick Rattalack的回答

// window.addEventListener('paste', ... or
document.onpaste = function(event){
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  for (index in items) {
    var item = items[index];
    if (item.kind === 'file') {
      var blob = item.getAsFile();
      var reader = new FileReader();
      reader.onload = function(event){
        console.log(event.target.result)}; // data url!
      reader.readAsDataURL(blob);
    }
  }
}

從剪貼板功能粘貼圖像在Gmail和Google Chrome 12+中如何工作？

Answer 6

不幸的是，無法將圖像從剪貼板粘貼到RTE。

如果您從Microsoft Word之類的桌面應用程序復制包含圖像和一些文本的Blob，則該圖像將作為損壞的引用出現（盡管比例正確），並且文本將正確粘貼（格式將丟失） 。

唯一可能的是在RTE中復制映像，然后粘貼回RTE中。