Copy and Paste screenshot to div using javascript

 

 

<html>
<head>
<script language="javascript" src="scripts/jquery-3.0.0.min.js"></script>

<script>

$(document).ready(function(e) {

   $("#textareaid").bind("paste", function(e){

       var items = (e.clipboardData || e.originalEvent.clipboardData).items;
       console.log(JSON.stringify(items)); // will give you the mime types

       for (index in items) 
       {
          var item = items[index];
          if (item.kind === 'file') 
          {
             var blob = item.getAsFile();
             var reader = new FileReader();

             reader.onload = function(event){

                 // show image in string 
                 console.log(event.target.result);

                 // make a clone in textareaid2 
                 $("#textareaid2").append("<img src='" + event.target.result + "'>");
             }; // data url!
             reader.readAsDataURL(blob);
          } 
          else
         {
            return true;
         }
      }
   });   // end bind
});  // end ready

</script>
</head>
<body>

<div id="textareaid" style="margin:10px 0px;min-width:200px;min-height:200px;border:1px solid #ccc;" contenteditable="true" placeholder="test paste">
</div>

<div id="textareaid2"></div>

</body>
</html>