2

I want to know if it is possible to copy an image from my website to the clipboard in the same way that you can copy an image from google images making right click in the image and selecting "Copy image", in this case you can paste the image in every places (whatsapp web, gmail, paint, file system...)

I am trying to copy an image through a button to the clipboard but I only can paste this image to some places (gmail, twitter) it does not work in whatsapp web or paint for example.

This is the link to the website:

https://project1-evercam.herokuapp.com/image-editor/example01-basic.html

This is the js code that I am using:

var $clipboard = $('#clipboard');
$clipboard.on('click',function(e){
    var img = document.createElement('img');
    img.src = canvas.toDataURL('image/jpeg', 0.1);

    var div1 = document.createElement('div');
    div1.contentEditable = true;
    div1.appendChild(img);
    document.body.appendChild(div1);

    SelectText(div1);
    try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copying text command was ' + msg);
    } catch (err) {
    console.log('Oops, unable to copy');
    }
    document.body.removeChild(div1);
});
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);
    }
}

I use this solution here, and it is the only solution that I could find in stackoverflow. I would like to know if it is the best way to do this and it does not work correctly or there are a better way.

titoti
  • 19
  • 5
  • @guest271314 How is the a duplicate of the linked question. This asks how to copy an image not how to copy text. There is nothing on the linked page that would help anyone wanting to copy an image/canvas to the clipboard. Please remove the duplicate flag. – Blindman67 Jan 23 '18 at 19:36
  • @Blindman67 The image at the Question is represented as a `data URI`, a `data URI` is text, which can be set at the clipboard using the approach at the linked Answer, specifically, `event.clipboardData.setData("text/plain", canvas.toDataURL('image/jpeg', 0.1))`. – guest271314 Jan 23 '18 at 19:43
  • @guest271314 The question wants an Image. The approch you give and the one in the linked question does not copy an IMAGE.Text as dataURL can not be pasted as an image in applications that accept image data. Again please remove the duplication flag as the the linked answer does not provide a solution to the question ask "How to copy a canvas **IMAGE** to clipboard" not dataURL or Text but an IMAGE – Blindman67 Jan 24 '18 at 01:07
  • @Blindman67 [I did update the list of duplicates](https://stackoverflow.com/posts/48408386/timeline) before you posted this comment, and the linked questions in there **do** ask how to save an **image**. This question is a duplicate. The answers there might be outdated though, so you might want to answer one of these (or a lot of the ones in [this list](https://stackoverflow.com/search?q=%5Bjavascript%5D+image+copy+clipboard)) if you have a better/up-to-date answer to provide. – Kaiido Jan 24 '18 at 07:25
  • @kaiido I have reviewed all the questions related with this topic and this is the only way that I have got something but does not work correctly and I want to know why. Please, remove the duplication flag because the other questions not provide a solution to the question. – titoti Jan 24 '18 at 09:54
  • @titoti, in previous comment I linked to about 230 questions that ask the exact same thing as you are asking. Unfortunately, there doesn't seem to have a solid yes for now on any of these. But your question doesn't add any value to the problem: if someone has a better solution to this problem, they can add it to any of these 230 other questions. That's how SO works. We close valuable question as duplicates of other ones, which may have the solutions for future readers. The recommended way to grab new response to these is the bounty system, which requires to have some rep points though. – Kaiido Jan 24 '18 at 12:37

0 Answers0