JSFiddle - React, Tailwind, and code Playground

by SaschaKluth

HTML

Copy image from clipboard in Firefox & Chrome.
<br /> Select the box below and paste a image from clipboard via ctrl+v
<br /> Data printed at console
<br /> Tested with clipboard content created via screendump via ctrl+print and copy from gimp
<br />
<div id="one" contenteditable="true"></div>

CSS

#one {
  border: 1px solid black;
  min-height: 100px;
  min-width: 100px;
}

JavaScript

if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
  console.log("Firefox");
  $("#one").bind("input paste", function(ev) {
    window.setTimeout(function(ev) {
      var input = $("#one").children()[0].src;
      var s = input.split(',');
      var mime = s[0];
      var data = s[1];
      console.log(mime);
      console.log(data);
    }, 300);
  });
} else if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
  console.log("Chrome");
  $("#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);
      }
    }

  })
}

$(function() {

});