Embed image on web page

I did some research for the wysiwyg editor and found ckeditor that seems nice, but I need to be able to copy / paste the image into the editor.

I found this website that does exactly what I need http://pasteboard.co/ , so it is possible, however I can not find how to do it.

Do you have any ideas or solutions?

I would prefer a solution in pure html5 / javascript and avoid any plugin, but silverlight or flash can also be used.

+6
source share
1 answer

There are two ways to deal with this, in a simple way and in a complicated way.

Easy way: Use the clipboard API . This is the HTML5 API, but it is only supported in Chrome. This will allow you to access the pasted image from your clipboard as a Blob . You can then send this Blob to your server using an XHR2 request.

The hard way: Unfortunately, this is what you have to do for all browsers except Chrome, and this is not very. This assumes that you are creating a hidden content-editable DIV inside the "paste target". This will get the inserted image. Then you will need to draw an image on <canvas> , which will then need to be converted to Blob . But wait, everything will work out. In some cases, you may need a proxy cross-domain image (server-side) (possibly many cases). This may be necessary if the server hosting the image does not allow CORS requests on the images that they host. You can learn more about this situation in this MDN article .

A javascript-based bootloader, I support Fine Uploader , already supports loading images using paste, but only in Chrome. I thought that I had difficulty implementing this in API browsers without a clipboard if I received a sufficient number of requests. Quite frankly, however, since processing images that do not support CORS in browsers that do not implement the clipboard API requires proxying on the image server side, it hardly seems worth the effort (unless, of course, my user base tells me that they want it).

Hope this helps.

+9
source

All Articles