Access clipboard image data, cross browser (even Safari)

August 2017

Allowing users to paste images from their clipboards directly into a web app is a great way of bringing a desktop-like experience to the web. However browser support for this functionality is a little all over the place (Safari, I'm looking at you).

Happily as is so often the case on the internet, a kindly soul (in this case Michael Yin) has done the hard work for you and wrapped it up in a neat little jQuery plugin. Just drop it in and cross browser image pasting is yours. My only regret is not finding this sooner.

Paste.js on Github

// Capture paste event on the whole document 
$('html').pastableNonInputable();
$('*').on('pasteImage', function (ev, data){
  // Do something with the image (data.dataURL)
}.bind(this)).on('pasteImageError', function(ev, data){
  // Do something with the error
}).on('pasteText', function (ev, data){
  // Do something with text
});

Ever wish you got more email?

Neither do I. You're busy, and so is your inbox. I'll only be in touch when I publish something new. And of course it goes without saying your email will be kept completely private.