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.

Didn't vote down, but I would say its because you're asking for a solution without trying something first. — Daedalus, Apr 12 '13 at 00:22
I did try before I post this question like I always do but what i found didn't work or only on Chrome so I didn't think it was worth posting — Yann Lebel, Apr 12 '13 at 13:58

score 9 · Accepted Answer · answered Apr 12 '13 at 02:20

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.

The hard way is fine by me. I saw that in firefox the copy paste works but the image is paste as data url is there a way to use this behavior and implement the content editable div only for IE? I have no problem if it works only in IE10 — Yann Lebel, Apr 12 '13 at 14:10
Just for information i used the Github repository of pasteboard.co and your links to implement a solution https://github.com/JoelBesada/pasteboard — Yann Lebel, May 23 '13 at 22:22

Paste image to a web page

1 Answers1

Linked