Paste an Image from Clipboard in Chrome

Question

I am working on editor where I would like to provide a button by clicking which I want to paste an image which is already copied to the clip board. I couldn't do this as the browsers doesn't allow to access clipboard due to security reasons.

I checked out Google Drive to find how it is done by Google. In chrome, they are asking to install Google Drive webapp from Chrome webstore which is requesting clipboardRead and clipboardWrite permissions and once the app is installed. Everything works like charm in Google Drive. The documentation says use document.execCommand('paste'). But I couldn't find any samples implementing this and couldn't implement the same in my application. Can someone here provide me a sample on how to make this work when images are in the clipboard.

Answer 1

We need to add permissions(clipboardRead and clipboardWrite) in the manifest file of your application and then if you want to paste a text/image from clipboard, we need to give focus to a dummy textbox/image element in html and then run document.execCommand('paste') and now this element has access to the clipboard copied item and get the text or image to use it.

Answer 2

Credit goes to https://stackoverflow.com/a/6338207/85597

// window.addEventListener('paste', ... or
document.onpaste = function(event){
  var items = event.clipboardData.items;
  console.log(JSON.stringify(items)); // will give you the mime types
  var blob = items[0].getAsFile();
  var reader = new FileReader();
  reader.onload = function(event){
    console.log(event.target.result)}; // data url!
  reader.readAsDataURL(blob);
}

Answer 3

No API from chrome so far

https://groups.google.com/forum/?fromgroups=#!topic/chromium-extensions/BJAn5_OwT2g, since paste is believed a Security Risk