Comment mettre une image dans le presse-papier en Javascript?

Question

Comment mettre l'image dans le presse-papiers en utilisant Javascript (dans le gestionnaire de l'événement copy) comme si cela se faisait en cliquant avec le bouton droit sur l'image dans le navigateur et en sélectionnant "Copier l'image" dans le menu contextuel.

Ce script affiche les détails du contenu du presse-papiers. Pour l'image copiée imprime:

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" } 

La question peut être reformulée probablement - comment joindre un fichier à clipboardData en fonction de gestionnaire d'événements copy?

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

ne fonctionne pas demo en utilisant la méthode setData().

Answer 1

//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>