Pasting anything other than simple text into the browser has historically been stupendously impossible. Until now… It’s a miracle, image data pasted into the browser can be retrieved with JavaScript (at least since Chrome 13.0.782.220)! Just use this jQuery plugin and start receiving paste events with images all their sweet gooey image data. This picks up paste events initiated with Ctrl+V, it does not provide arbitrary clipboard access (which is probably sane from a security standpoint). What’s insane is that it used to be so hard to get pasted image data, but that is all behind us now.

A magical wizard

Copy and paste me in this webpage!

Give it a try now, right click this wizard and choose “Copy Image”, then jam Ctrl+V or Command+V. Be amazed (unless you’re not using Chrome, and in that case, get off my lawn). It also works in the pixel editor on PixieEngine. Use the wizard there too, the editor currently only handles small images. Generally there is no size restriction, you can even paste image data from your favorite image editing programs, boot one up and try it out on this page.

# Created by STRd6
# MIT License
# jquery.paste_image_reader.js.coffee
(($) ->
  # Make sure paste events get clipboard data
  $.event.fix = ((originalFix) ->
    (event) ->
      event = originalFix.apply(this, arguments)
 
      if event.type.indexOf('copy') == 0 || event.type.indexOf('paste') == 0
        event.clipboardData = event.originalEvent.clipboardData
 
      return event
  )($.event.fix)
 
  defaults =
    callback: $.noop
    matchType: /image.*/
 
  # Create the plugin
  # To use it: $("html").pasteImageReader callback
  $.fn.pasteImageReader = (options) ->
    if typeof options == "function"
      options =
        callback: options
 
    options = $.extend({}, defaults, options)
 
    # Listen to paste events on each element in the selector
    this.each () ->
      element = this
      $this = $(this)
 
      $this.bind 'paste', (event) ->
        found = false
        clipboardData = event.clipboardData
 
        # Loop through all types the data can be pasted as until 
        # we hit an image type
        Array::forEach.call clipboardData.types, (type, i) ->
          return if found
          return unless type.match(options.matchType)
 
          # Get the corresponding file data
          file = clipboardData.items[i].getAsFile()
 
          # Read the file data and fire off the callback with
          # the useful stuff when it's been read
          reader = new FileReader()
          reader.onload = (evt) ->
            options.callback.call element,
              filename: file.name
              dataURL: evt.target.result
 
          reader.readAsDataURL(file)
 
          # We found an image, we're done
          found = true
 
)(jQuery)

Pretty simple plugin, eh? The first part is extending the copy and paste events in jQuery with the clipboardData object. Once the paste events have been extended with all the clipboard data that Chrome provides we can use that data to extract the image contents.

The meat of the plugin is binding a paste event to all the elements in the selector. When a paste event is triggered we loop through each MIME type until we hit one that claims to be an image. Once we find it we get the corresponding file data and load it as a dataURL. This can be used directly in CSS or passed on to the server and chopped up, base64 decoded, and stored as a regular png.

To use it you choose what element to listen to paste events on (html should get all of them). I haven’t messed around much with scoping it to other elements, but I don’t see why it wouldn’t work.

$("html").pasteImageReader (results) ->
  {filename, dataURL} = results
 
  $("body").css
    backgroundImage: "url(#{dataURL})"

Now when someone pastes a copied image to the page it sets the background to the pasted image. This is just scratching the surface, but the great thing is that you can now capture paste events containing images in pure JS/HTML.

What’s that? CoffeeScript is hot for you to handle? Well here’s the JS version:

// Created by STRd6
// MIT License
// jquery.paste_image_reader.js
(function($) {
  var defaults;
 
  $.event.fix = (function(originalFix) {
    return function(event) {
      event = originalFix.apply(this, arguments);
      if (event.type.indexOf('copy') === 0 || event.type.indexOf('paste') === 0) {
        event.clipboardData = event.originalEvent.clipboardData;
      }
      return event;
    };
  })($.event.fix);
 
  defaults = {
    callback: $.noop,
    matchType: /image.*/
  };
 
  $.fn.pasteImageReader = function(options) {
    if (typeof options === "function") {
      options = {
        callback: options
      };
    }
 
    options = $.extend({}, defaults, options);
 
    return this.each(function() {
      var $this, element;
      element = this;
      $this = $(this);
 
      $this.bind('paste', function(event) {
        var clipboardData, found;
        found = false;
        clipboardData = event.clipboardData;
 
        Array.prototype.forEach.call(clipboardData.types, function(type, i) {
          var file, reader;
          if (found) {
            return;
          }
 
          if (!type.match(options.matchType)) {
            return;
          }
 
          file = clipboardData.items[i].getAsFile();
          reader = new FileReader();
 
          reader.onload = function(evt) {
            options.callback.call(element, {
              filename: file.name,
              dataURL: evt.target.result
            });
          };
          reader.readAsDataURL(file);
          found = true;
        });
      });
    });
  };
})(jQuery);