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?
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.