Copia l'immagine negli appunti

Question

Apparentemente, non è possibile (ancora) copiare a livello di codice un'immagine negli Appunti da un'app Web JavaScript?

Ho provato a copiare un testo negli appunti e ha funzionato.

Ora vorrei copiare un'immagine e se si preme Ctrl +v per incollare in Word o Excel o Paint.

$(function() { 
    $("#btnSave").click(function() { 
     html2canvas($("#container1"), { 
      onrendered: function(canvas) { 
       theCanvas = canvas; 

       document.body.appendChild(canvas); 
       Canvas2Image.saveAsPNG(canvas); 
       $("#img-out").append(canvas); 
      } 
     }); 
    }); 
}); 

Answer 1

Non è possibile copiare su clipboard con Javascript per motivi di sicurezza, in questa discussione è possibile trovare una soluzione. Coinvolge il flash. Click button copy to clipboard using jQuery

Answer 2

Partenza questa guida per copiare e incollare con JavaScript: https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

In base a questo, Chrome, Safari e Firefox tutte le immagini supporta la copia con testo in chiaro, mentre IE permette solo la copia del testo. La pagina collegata sopra descrive come questo servizio utilizza un'estensione per aggiungere questa funzionalità a un menu di scelta rapida, ma sembra che diversi browser supportino la copia programmatica di immagini.

Answer 3

Hai ragione. Non c'è ancora il supporto per copiare i dati di immagine negli appunti in Chrome. https://bugs.chromium.org/p/chromium/issues/detail?id=150835. Sembra che sia stato aperto da circa 4 anni.

C'è una specifica API appunti che sta arrivando anche se https://w3c.github.io/clipboard-apis/

Answer 4

ho cercato su internet e non sono riuscito a trovare una soluzione a questo così sono andato avanti e sperimentato. lavorato con successo in tutti i browser:

Il codice HTML che sto utilizzando per il test è:

<div class="copyable"> 
    <img src="images/sherlock.jpg" alt="Copy Image to Clipboard via Javascript."/> 
</div> 
<div class="copyable"> 
    <img src="images/stark.jpg" alt="Copy Image to Clipboard via Javascript."/> 
</div> 

Il/codice jQuery JavaScript assomiglia a questo:

<script> 
     //Cross-browser function to select content 
     function SelectText(element) { 
      var doc = document; 
      if (doc.body.createTextRange) { 
       var range = document.body.createTextRange(); 
       range.moveToElementText(element); 
       range.select(); 
      } else if (window.getSelection) { 
       var selection = window.getSelection(); 
       var range = document.createRange(); 
       range.selectNodeContents(element); 
       selection.removeAllRanges(); 
       selection.addRange(range); 
      } 
     } 
     $(".copyable").click(function (e) { 
      //Make the container Div contenteditable 
      $(this).attr("contenteditable", true); 
      //Select the image 
      SelectText($(this).get(0)); 
      //Execute copy Command 
      //Note: This will ONLY work directly inside a click listenner 
      document.execCommand('copy'); 
      //Unselect the content 
      window.getSelection().removeAllRanges(); 
      //Make the container Div uneditable again 
      $(this).removeAttr("contenteditable"); 
      //Success!! 
      alert("image copied!"); 
     }); 
</script> 

hai caricato su GitHub così: https://github.com/owaisafaq/copier-js