Paste the Image from System in Html page using javascript

Question

Hi i am creating an web chat application in that i want user can copy paste the image from desktop or can paste directly the screen shot but i am unable to achieve it. I used fo

Answer 1

Chrome

Add your code to he code from codepen and give an id to the div (line 50)

Include your script as posted above with the divs id

$("#one").on("paste", function (event) {

  var items = (event.clipboardData || event.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) {
        console.log(event.target.result)
      }; // data url!
      reader.readAsDataURL(blob);
    }
  }

})

Make a screenshot, select the first div (that one with the id one), hit ctrl+v, the screenshot appears in the div and the imagedata is loged to console.

Firefox Use the code I prepeared you within this fiddle

  
  
  



  Copy image from clipboard in Firefox.
  
 Select the box below and paste a image from clipboard via ctrl+v
  
 Data printed at console
  

  


  

Chrome & Firefox combined

A combined version, using the code from @pareshm for Chrome and my code for Firefox may be found in this updated fiddle (Tested with clipboard content created via system screendump by ctrl+print and copy image part from gimp)