javascript - Paste image to a web page - Stack Overflow

admin管理员组

文章数量:1277896

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

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.

• javascript
• html
• image
• copy-paste

Share Improve this question Follow asked Apr 11, 2013 at 23:16 Yann LebelYann Lebel 68511 gold badge77 silver badges1717 bronze badges 3

• Didn't vote down, but I would say its because you're asking for a solution without trying something first. – Daedalus Commented Apr 12, 2013 at 0: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 Commented Apr 12, 2013 at 13:58
• 3 It's always worth posting. – Daedalus Commented Apr 12, 2013 at 20:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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.

本文标签： javascriptPaste image to a web pageStack Overflow