Description : Copy Image to Clipboard

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <img id="surf_image" src="http://aleksforwork.narod.ru/Pics/Pics01.jpg" alt="Picture for copy" style="border: 1px solid rgb(153, 153, 153); cursor: pointer; width: 275px; height: 56px; z-index: 200;">
  <br>
  <br>

  <input id="button" type="button" style="cursor: pointer;" value="Copy picture to clipboard" onclick="CopyImageById('surf_image');">
  <br>
  <br>

  <b id='answer'></b>
  <br>

</body>

</html>

// Code goes here

function CopyImageById(Id) 
{
  var imgs = document.createElement('img');
  imgs.src = document.getElementById(Id).src;
  
  //alert ('Create image') ;

  var bodys = document.body ;
  bodys.appendChild(imgs);
  //alert ('Image on document')
  
  
  if (document.createRange)  
  {
    //alert ('CreateRange work');
    var myrange = document.createRange();
    myrange.setStartBefore(imgs);
    myrange.setEndAfter(imgs);
    myrange.selectNode(imgs);

  }
  else
  {
    alert ('CreateRange NOT work');
  }

  /* 
  if (bodys.createControlRange)  
  {
    alert ('ControlRange work');
    var controlrange = body.createControlRange();
    controlrange.add(img);
    controlrange.execCommand('Copy', false, null);
  }
  else
  {
    alert ('ControlRange NOT work');
  }
  */
  
  var sel = window.getSelection();
  sel.addRange(myrange);

  // alert('Image selection !!!');

  //document.execCommand('copy', false, null);
  var successful = document.execCommand('copy');

  var msg = successful ? 'successful' : 'unsuccessful';
  //alert('Copy image command was ' + msg);
  
  bodys.removeChild(imgs);
  document.getElementById('answer').innerHTML="Copy image command was " + msg ;
}

/* Styles go here */

Readme:Copy Image to Clipboard