Paste image to a web page

Question

I did some research for a wysiwyg editor and found ckeditor that seems to be nice however I need to be able to copy/paste an image to the editor.

I found this web site that do exactly what I need http://pasteboard.co/ so its possible however I cannot find how it's done.

Do you have any ideas or solutions?

I would prefer a solution in pure html5/javascript and avoid any plugin but a silverlight or flash is acceptable too.

Answer 1

There are two ways you can handle this, the easy way, and the hard way.

The Easy Way: Utilize the Clipboard API. This is an "HTML5" API, but it is only properly supported in Chrome. This will allow you to access a pasted image, from your clipboard, as a Blob. You can then send this Blob to your server via an XHR2 request.

The Hard Way: Unfortunately, this is what you must do for all browsers other than Chrome, and it's not pretty. It involves you creating a hidden content-editable DIV inside of a "paste target element". This will receive the pasted image. You will then need to draw the image onto a <canvas> which will then need to be converted to a Blob. But wait, it gets better. You may also need to proxy cross-domain images (server-side) in some cases (possibly many cases). This may be required if the server hosting the image does not permit CORS requests on the images they host. You can read more about this situation in this MDN article.

A javascript-based uploader I maintain, Fine Uploader, already supports uploading images via paste, but in Chrome only at this time. I figured I would go through the hassle of implementing this in non-Clipboard API browsers if I received enough requests. Quite frankly, though, since handling non-CORS-enabled images in browsers that do not implement the Clipboard API requires proxying the image server-side, it hardly seems like its worth the effort (unless, of course, my user base tells me that they want it).

Hope this helps.