javascript - চিত্রটি ক্লিপবোর্ডে অনুলিপি করুন



jquery clipboard (4)

আপাতদৃষ্টিতে, আপনি কোনও জাভাস্ক্রিপ্ট ওয়েব অ্যাপ্লিকেশন থেকে ক্লিপবোর্ডে (এখনও) প্রোগ্রামালিমে কোনও চিত্র অনুলিপি করতে পারবেন না?

আমি ক্লিপবোর্ডে একটি পাঠ্য অনুলিপি করার চেষ্টা করেছি এবং এটি কার্যকর হয়েছে।

এখন আমি একটি চিত্র অনুলিপি করতে চাই এবং আমি ওয়ার্ড বা এক্সেল বা পেইন্টে পেস্ট করতে সিটিআরএল + ভি টিপুন।

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

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

https://src-bin.com


Answer #1

আমি ইন্টারনেট অনুসন্ধান করেছিলাম এবং এর কোনও সমাধান খুঁজে পাইনি তাই আমি এগিয়ে গিয়ে পরীক্ষা-নিরীক্ষা করেছি। সফলভাবে সমস্ত ব্রাউজার জুড়ে কাজ করেছে:

আমি পরীক্ষার জন্য যে এইচটিএমএল ব্যবহার করছি তা হ'ল:

<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 কোড এর মত দেখাচ্ছে:

<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


Answer #2

জাভাস্ক্রিপ্টটি অনুলিপি করা ও আটকানোর জন্য এই গাইডটি দেখুন: https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

এটি অনুসারে, ক্রোম, সাফারি এবং ফায়ারফক্স সবগুলি সরল পাঠ্য সহ চিত্রগুলি অনুলিপি করে সমর্থন করে, যখন আইই কেবল পাঠ্য অনুলিপি করার অনুমতি দেয়। উপরের লিঙ্কযুক্ত পৃষ্ঠাটিতে বর্ণনা করা হয়েছে যে কীভাবে এই পরিষেবাটি কোনও প্রসঙ্গ মেনুতে এই কার্যকারিতা যুক্ত করতে একটি এক্সটেনশন ব্যবহার করে, তবে এটি প্রদর্শিত হয় যে বেশ কয়েকটি ব্রাউজার চিত্রের অনুলিপি প্রতিযোগিতামূলক সমর্থন করে।


Answer #3

তুমি ঠিক. ক্রোমে ক্লিপবোর্ডে চিত্রের ডেটা অনুলিপি করার কোনও সমর্থন নেই। https://bugs.chromium.org/p/chromium/issues/detail?id=150835 । দেখে মনে হচ্ছে এটি প্রায় 4 বছর ধরে খোলা আছে।

একটি ক্লিপবোর্ডের এপিআই স্পেস রয়েছে যা https://w3c.github.io/clipboard-apis/ আসছে


Answer #4

সুরক্ষা কারণে আপনি জাভাস্ক্রিপ্ট সহ ক্লিপ বোর্ডে অনুলিপি করতে পারবেন না, প্রায় একটি কাজ এখানে একটি আলোচনায় পাওয়া যাবে। ফ্ল্যাশ জড়িত। JQuery ব্যবহার করে ক্লিপবোর্ডে বোতামের অনুলিপি ক্লিক করুন





clipboard