Sao chép hình ảnh vào clipboard

Question

Dường như, bạn không thể sao chép một hình ảnh vào clipboard từ một ứng dụng web JavaScript?

Tôi đã cố gắng sao chép văn bản trong clipboard và nó đã hoạt động.

Bây giờ tôi muốn sao chép một hình ảnh và sau khi tôi nhấn ctrl +v để dán vào Word hoặc Excel hoặc Paint.

Answer 1

Bạn không thể sao chép vào bảng clip bằng Javascript vì lý do bảo mật, bạn có thể tìm thấy công việc trong thảo luận tại đây. Liên kết flash. Click button copy to clipboard using jQuery

Answer 2

Kiểm tra hướng dẫn này để sao chép và dán với JavaScript: https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

Theo đó, Chrome, Safari, và Firefox tất cả hình ảnh hỗ trợ sao chép với văn bản đơn giản, trong khi IE chỉ cho phép sao chép văn bản. Trang được liên kết ở trên mô tả cách dịch vụ này sử dụng phần mở rộng để thêm chức năng này vào menu ngữ cảnh, nhưng có vẻ như một số trình duyệt hỗ trợ sao chép hình ảnh có lập trình.

Answer 3

Bạn nói đúng. Không có hỗ trợ để sao chép dữ liệu hình ảnh vào clipboard trong chrome được nêu ra. https://bugs.chromium.org/p/chromium/issues/detail?id=150835. Có vẻ như nó đã được mở trong khoảng 4 năm nay.

Có một spec API vào clipboard mà là sắp lên mặc dù https://w3c.github.io/clipboard-apis/

Answer 4

Tôi tìm kiếm trên internet và không thể tìm thấy một giải pháp này vì vậy tôi đã đi trước và thử nghiệm. làm việc thành công trên tất cả các trình duyệt:

HTML Tôi đang sử dụng để thử nghiệm là:

<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 Mã trông như thế này:

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

đã tải lên trên GitHub cũng như: https://github.com/owaisafaq/copier-js