17

I have an image as a DataURL string.
And I want to copy this image programmatically to ClipBoard.

I found two functions, but neither of them works. Though, first function works well when you copy text - copy("Hello!","text");

PS I have a "clipboardWrite" permission.

First:

function copy(str, mimetype) {
    document.oncopy = function(event) {
        event.clipboardData.setData(mimetype, str);
        event.preventDefault();
    };
    document.execCommand("Copy", false, null);
}

Second:

function copyImage(url){
    var img=document.createElement('img');
    img.src=url;
    document.body.appendChild(img);
    var r = document.createRange();
    r.setStartBefore(img);
    r.setEndAfter(img);
    r.selectNode(img);
    var sel = window.getSelection();
    sel.addRange(r);
    document.execCommand('Copy');
}
holden321
  • 939
  • 1
  • 11
  • 29

4 Answers4

3

Seems this isn't possible. There has been a bug preventing it in Chrome since 2012! https://bugs.chromium.org/p/chromium/issues/detail?id=150835

Peter Behr
  • 607
  • 1
  • 5
  • 16
ngstschr
  • 1,667
  • 1
  • 16
  • 31
0

You can convert images to string using this:

function getImageData(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var imgd = canvas.toDataURL("image/png");
    return imgd;
}

and for copying to clipboard try a solution on this page.

Community
  • 1
  • 1
OnlyMAJ
  • 818
  • 7
  • 20
  • 2
    Please read tmy qustion more carefully. I know how to encode image to DataURL, and I know how to copy text. The qustion is about copying images and not strings. – holden321 Nov 18 '14 at 14:59
  • i know , thats why i told you that. you can convert images to text with that function then copy text.thats not your question ? – OnlyMAJ Nov 18 '14 at 18:04
  • 6
    No, I don't whant to copy text, I want to copy image. Real image which you could paste into any graphics editor. As I have said in the question, copying text is not a problem. – holden321 Nov 19 '14 at 12:21
0

If it happens to use html2canvas this can be done like that:
This converts something with html2canvas to a canvas and then produce the image of it and then saves it to clipboard as png. For example,

HTML:
<div id="copyToImage">Hello World!</div>

JavaScript: 

$("#copyToImage").click(function() {
    html2canvas(document.querySelector("#copyToImage")).then(canvas => canvas.toBlob(blob => navigator.clipboard.write([new ClipboardItem({'image/png': blob})])));
});
Konstantinos
  • 825
  • 1
  • 8
  • 19
-3

//copy image to ClipBoard Using Java Robot

 Runtime.getRuntime().exec("mspaint.exe");
Thread.sleep(5000);
StringSelection x=new StringSelection("Location of Photo with format");
Toolkit.getDefaultToolkit().getSystemClipboard().setContents(x,null);
Robot r=new Robot();
r.keyPress(KeyEvent.VK_CONTROL);
r.keyPress(KeyEvent.VK_O);
r.keyRelease(KeyEvent.VK_O);
r.keyRelease(KeyEvent.VK_CONTROL);
Thread.sleep(4000);
r.keyPress(KeyEvent.VK_CONTROL);
r.keyPress(KeyEvent.VK_V);
r.keyRelease(KeyEvent.VK_V);
r.keyRelease(KeyEvent.VK_CONTROL);
Thread.sleep(1000);
r.keyPress(KeyEvent.VK_ENTER);
r.keyRelease(KeyEvent.VK_ENTER);
Thread.sleep(5000);
r.keyPress(KeyEvent.VK_CONTROL);
r.keyPress(KeyEvent.VK_A);
r.keyRelease(KeyEvent.VK_A);
r.keyRelease(KeyEvent.VK_CONTROL);
Thread.sleep(5000);
r.keyPress(KeyEvent.VK_CONTEXT_MENU);
r.keyRelease(KeyEvent.VK_CONTEXT_MENU);
Thread.sleep(1000);
r.keyPress(KeyEvent.VK_DOWN);
r.keyRelease(KeyEvent.VK_DOWN);
r.keyPress(KeyEvent.VK_DOWN);
r.keyRelease(KeyEvent.VK_DOWN);
Thread.sleep(2000);
r.keyPress(KeyEvent.VK_ENTER);
r.keyRelease(KeyEvent.VK_ENTER);
Thread.sleep(2000);
r.keyPress(KeyEvent.VK_ALT);
r.keyPress(KeyEvent.VK_F4);
r.keyRelease(KeyEvent.VK_F4);
r.keyRelease(KeyEvent.VK_ALT);
J S K
  • 21
  • 1
  • 5