Copy image to clipboard

Question

Seemingly, you can\'t (yet) programmatically copy an image to the clipboard from a JavaScript web app?

I have tried to copy a text in clipboard , and it\'s worked.<

Answer 1

Check out this guide to copying and pasting with JavaScript: https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

According to this, Chrome, Safari, and Firefox all support copying images along with plain text, while IE only allows copying text. The page linked above describes how this service uses an extension to add this functionality to a context menu, but it appears that several browsers support programmatic copying of images.

Answer 2

You cannot copy to clip board with Javascript for security reasons, a work around can be found in a discussion here. Involves flash.Click button copy to clipboard using jQuery

Answer 3

I searched the internet and couldn't find a solution to this so I went ahead and experimented. Successfully worked across all browsers:

The HTML I'm using for testing is:

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

The JavaScript/jQuery Code looks like this:

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

Have uploaded on GITHub as well: https://github.com/owaisafaq/copier-js

Answer 4

For those still looking, the ClipboardAPI now works with png images.

try {
    navigator.clipboard.write([
        new ClipboardItem({
            'image/png': pngImageBlob
        })
    ]);
} catch (error) {
    console.error(error);
}

Answer 5

Well, this is my first post in here with an answer i guess :)

Actually i'm currently using cefsharp web browser component one of my project, cefsharp run on chrome based browser and i want to copy img element one of webpage

With cefsharp you can manipulate browser only javascript, so i think we can handle it with using canvas element.

/*
  'cause of lorempixel timeout, i used img onload function.
*/

function copyImage() {
  var imgCap = document.getElementById('imgCap');
  var imgCanvas = document.createElement('canvas');

  imgCanvas.id = 'imgCanvas';
  imgCanvas.height = 40;
  imgCanvas.width = 120;

  document.body.appendChild(imgCanvas);
  var originalContext = imgCanvas.getContext('2d');
  originalContext.drawImage(imgCap, 0, 0);

  //return imgCanvas.toDataURL();
}

//document.onload = copyImage();

<img id="imgCap" src="http://lorempixel.com/120/40" onload="copyImage();"/>

with return imgCanvas.toDataURL(); you can get base64 encoded value and use wherever you want.

this is my cefsharp code, it's working.

        string copyImageOtClipboardScript = "(function(){ try{var imgCap = document.getElementById('imgCap'); var imgCanvas = document.createElement('canvas'); imgCanvas.id = 'imgCanvas'; imgCanvas.height = 40; imgCanvas.width = 120; document.body.appendChild(imgCanvas); var originalContext = imgCanvas.getContext('2d'); originalContext.drawImage(imgCap, 0, 0); return imgCanvas.toDataURL();  }catch(e){ alert(e); } })();";

        var task = chromeBrowser.EvaluateScriptAsync(copyImageOtClipboardScript).ContinueWith(x =>
        {
            var resp = x.Result;

            if (resp.Success)
            {
                this.Invoke((MethodInvoker)delegate
                {
                    Bitmap bmp = null;
                    string captchaResult = "", captchaBase64;

                    var bytes = Convert.FromBase64String(resp.Result.ToString().Replace("data:image/png;base64,", ""));
                    using (var imageFile = new FileStream("temp_captcha.png", FileMode.Create))
                    {
                        imageFile.Write(bytes, 0, bytes.Length);
                        imageFile.Flush();
                    }

                });
            }
        });

Answer 6

You are right. There is no support to copy image data into clipboard in chrome yet. https://bugs.chromium.org/p/chromium/issues/detail?id=150835. Looks like it has been open for about 4 years now.

There is a clipboard API spec that is coming up though https://w3c.github.io/clipboard-apis/