क्लिपबोर्ड पर छवि कॉपी करें

Question

मान लीजिए, आप जावास्क्रिप्ट वेब ऐप से क्लिपबोर्ड पर प्रोग्रामेटिक रूप से एक छवि कॉपी नहीं कर सकते हैं?

मैंने क्लिपबोर्ड में एक टेक्स्ट कॉपी करने की कोशिश की है, और यह काम किया है।

अब मैं एक छवि कॉपी करना चाहते हैं और + वी वर्ड या एक्सेल या पेंट में पेस्ट करने के बाद मैं ctrl दबाएं।

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

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

Answer 1

सुरक्षा कारणों से आप जावास्क्रिप्ट के साथ क्लिप बोर्ड पर प्रतिलिपि नहीं बना सकते हैं, यहां एक कार्य यहां चर्चा में पाया जा सकता है। फ्लैश शामिल है। Click button copy to clipboard using jQuery

Answer 2

जावास्क्रिप्ट के साथ कॉपी करने और चिपकाने के लिए इस गाइड चेक आउट: https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

इस के अनुसार

, क्रोम, सफारी, और Firefox सादा पाठ के साथ-साथ सभी का समर्थन नकल छवियों, केवल आईई नकल पाठ की अनुमति देता है। ऊपर लिंक किया गया पृष्ठ वर्णन करता है कि यह सेवा किसी संदर्भ मेनू में इस कार्यक्षमता को जोड़ने के लिए एक्सटेंशन का उपयोग कैसे करती है, लेकिन ऐसा लगता है कि कई ब्राउज़र छवियों की प्रोग्रामेटिक प्रतिलिपि का समर्थन करते हैं।

Answer 3

आप सही हैं। अभी तक क्रोम में क्लिपबोर्ड में छवि डेटा कॉपी करने के लिए कोई समर्थन नहीं है। https://bugs.chromium.org/p/chromium/issues/detail?id=150835। ऐसा लगता है कि यह लगभग 4 वर्षों के लिए खुला है।

एक क्लिपबोर्ड एपीआई युक्ति है कि हालांकि https://w3c.github.io/clipboard-apis/

Answer 4

आ रहा है मैं इंटरनेट खोज की है और इस तो मैं आगे चला गया और प्रयोग के लिए एक समाधान नहीं मिल सका है।

एचटीएमएल मैं परीक्षण के लिए उपयोग कर रहा हूँ है:

<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 पर अपलोड कर दिया है और साथ ही:

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

जावास्क्रिप्ट/jQuery कोड इस तरह दिखता है सफलतापूर्वक सभी ब्राउज़र में काम किया: https://github.com/owaisafaq/copier-js