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?

I doubt this is possible in IE because, despite supporting the clipboard and drag and drop APIs since IE6, to this date IE does not support the File api. You can get drag and paste events but you can't read the files in them. Sorry bro. — Nick Retallack, Sep 29 '11 at 06:55
Here is a related question and answer. http://stackoverflow.com/questions/6333814/how-does-the-paste-image-from-clipboard-functionality-work-in-gmail-and-google-c Notice the document.onpaste event. — julianm, Jan 06 '12 at 14:59

score 5 · Answer 1 · answered Sep 21 '11 at 08:45

5

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/

answered Sep 21 '11 at 08:45

Daniel X Moore

14,637
17
80
92

Tower · Accepted Answer · 2012-04-22T15:20:32.223

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.

edited Apr 22 '12 at 15:20

answered Nov 28 '10 at 20:32

Tower

98,741
129
357
507

Thanks Kai - appreciate the response. I came across ZeroClipboard - will likely implement it using this :). Cheers! – nicoslepicos Nov 30 '10 at 04:03
@nicoslepicos if my answer satisfied you, I would love to have it chosen as an answer. :) – Tower Dec 06 '10 at 13:55
1

Zero Clipboard doesn't allow pasting of image data. – Daniel X Moore Sep 21 '11 at 08:46

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

2 Answers2