Скопировать изображение в буфер обмена

Question

Видимо, вы не можете (пока) программно скопировать изображение в буфер обмена из веб-приложения JavaScript?

Я попытался скопировать текст в буфер обмена, и он сработал.

Теперь я хотел бы, чтобы скопировать изображение и после того, как я нажимаю Ctrl + v вставить в слово или Excel или 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

Вы не можете скопировать на клип с Javascript из соображений безопасности, здесь можно найти работу. Включает вспышку. Click button copy to clipboard using jQuery

Answer 2

Проверьте это руководство для копирования и вставки с JavaScript: https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

В соответствии с этим, Chrome, Safari и Firefox все поддерживает копирование изображений вместе с простым текстом, в то время как IE позволяет только копирование текста. Связанная выше страница описывает, как эта служба использует расширение для добавления этой функции в контекстное меню, но, похоже, несколько браузеров поддерживают программное копирование изображений.

Answer 3

Вы правы. Нет никакой поддержки для копирования данных изображения в буфер обмена в хроме. https://bugs.chromium.org/p/chromium/issues/detail?id=150835. Похоже, он был открыт около 4 лет.

Существует буфер API спецификации, которая идет вверх, хотя https://w3c.github.io/clipboard-apis/

Answer 4

Я искал в интернете и не смогли найти решение этой проблемы, поэтому я пошел вперед и экспериментировал. Успешно работал во всех браузерах:

HTML, я использую для тестирования является:

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

JavaScript/JQuery код выглядит следующим образом:

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

выложили на GitHub, а также: https://github.com/owaisafaq/copier-js