如何將圖像放入剪貼板中？

如何使用Javascript（在copy事件的處理程序中）將圖像放入剪貼板，就好像它會通過右鍵單擊瀏覽器中的圖像並從上下文菜單中選擇「複製圖像」來完成。如何將圖像放入剪貼板中？

此script顯示剪貼板內容的詳細信息。對於複製的圖像其打印：

DataTransfer { dropEffect: "none", effectAllowed: "uninitialized", items: DataTransferItemList[2], types: Array[2], files: FileList[1], mozItemCount: 1, mozCursor: "auto", mozUserCancelled: false, mozSourceNode: null } 
DataTransferItem { kind: "string", type: "text/html" } 
DataTransferItem { kind: "file", type: "image/png" } 
Array [ "text/html", "Files" ] 
File { name: "image.png", lastModified: 1504122845696, lastModifiedDate: Date 2017-08-30T19:54:05.696Z, webkitRelativePath: "", size: 385273, type: "image/png" }

所以，問題可以很可能改寫 - 如何將文件附加到clipboardData在copy事件處理函數？

document.addEventListener('copy', (event) => { 
    // event.clipboardData.? 
    // maybe event.clipboardData.setData(?) 
})

使用setData()方法不工作demo。

來源

2017-08-30 czerny

你搜索？ https://stackoverflow.com/questions/33175909/copy-image-to-clipboard – epascarello

當你點擊'複製圖像'在右鍵單擊圖像上下文菜單中，它已經在剪貼板中。 –

@ koushik-chatterjee是的。我想以編程方式模擬這種行爲。 – czerny

//get reference to the div 
 
var div = document.getElementById('someDiv'); 
 

 
//attach a paste event 
 
div.addEventListener('paste', function(ev){ 
 
    var imgFile = null; 
 
    var idx; 
 
    var items = ev.clipboardData.items; 
 
    for(idx=0;idx<items.length;idx++) { 
 
     //check if any content is file 
 
     if(items[idx].kind==="file") { 
 
      //take that file to imgFile 
 
      imgFile = items[idx].getAsFile(); 
 
      break; 
 
     } 
 
    } 
 
    if(imgFile==null) {return;} 
 
    
 
    //create a File reader 
 
    var reader = new FileReader(); 
 
    reader.onload = function() { 
 
     //create an img DOM object 
 
     var img = new Image(); 
 
     //reader.result is nothing but the Base64 representation 
 
     img.src = reader.result; 
 
     
 
     //operate the DOM, clear the div and append the img 
 
     div.innerHTML = ''; 
 
     div.appendChild(img); 
 
    } 
 
    //read that file using the reader 
 
    reader.readAsDataURL(imgFile); 
 
});

<div id="someDiv" style="min-width: 200px;min-height: 200px; border: 1px solid red"> 
 
Paste an image here (using Ctrl + V) 
 

 
</div>

來源

2017-08-30 21:48:37

問題是關於將圖像寫入剪貼板並處理'copy'事件。這個迴應似乎是關於'paste'事件和從剪貼板讀取圖像。 – czerny

你不需要處理，你需要處理的是粘貼事件，把它放在某個地方 –

哦，看起來你想調用'copy image'的動作 –

如何將圖像放入剪貼板中？

回答

相關問題