How can one paste images into a Web App? What solutions are available? HTML 5 Canvas?

Question

I'm currently building a very bare bones web app, that had the requirement of being able to copy an image while broswing the web, and then pasting it onto my page.

I know that this type of functionality IS possible - as I've pasted images into gmail while writing messages, and into Tumblr (I believe they use TinyMCE as their editor).

After long searching - I've been saddened by the poor quality of explanation for the available solutions out there.

This is what I've gathered:

$(document).bind('paste', function(e){
console.log(e);
})

Inspecting the event object, it seems that data is only included when there is text (in Chrome anyways).

I am aware that IE has a clipboardData object which gives you access to the clipboard contents.

I've also heard of possible solutions using Flash, Java Applets, and HTML 5 Canvas - but I haven't yet been able to find good write ups explaining those solutions.

Anyone done this successfully, and can suggest best practices?

Answer 1

You could use the Clipboard API: http://dev.w3.org/2006/webapi/clipops/clipops.html

Or you can do is to use Zero ClipBoard. It uses an invisible Flash movie and provides a JavaScript interface to access the clipboard.

Answer 2

This works fine in Chrome. Here's a live example supporting getting image data in pure JavaScript with no servers involved: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/