将图像粘贴到网页 [英] Paste image to a web page

问题描述

我为一个所见即所得的编辑做了一些研究，发现ckeditor看起来不错，但我需要能够将图像复制/粘贴到编辑器中。

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.

我发现这个网站完全符合我所需要的 http://pasteboard.co/ ，所以我可能无法找到它是如何完成的。

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?

我更喜欢纯html5 / javascript的解决方案，避免任何问题插件，但银光或闪光灯也是可以接受的。

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

推荐答案

有两种方法可以解决这个问题，简单方法，以及很难。

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

简单方法：
利用剪贴板API 。这是一个HTML5API，但只能在Chrome中正确支持。这样您就可以从剪贴板中以 Blob 的形式访问粘贴的图像。然后，您可以通过XHR2请求将此 Blob 发送到您的服务器。

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.

艰难的方式：
不幸的是，这是你必须为Chrome以外的所有浏览器做的事情，而且它并不漂亮。它涉及您在粘贴目标元素内创建隐藏内容可编辑的DIV。这将收到粘贴的图像。然后，您需要将图像绘制到< canvas> ，然后需要将其转换为 Blob 。但等等，它变得更好。在某些情况下（可能很多情况下），您可能还需要代理跨域映像（服务器端）。如果托管映像的服务器不允许对其托管的映像发出CORS请求，则可能需要这样做。您可以在此MDN文章中了解有关此情况的更多信息。

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.

我维护的基于javascript的上传器， Fine Uploader ，已经支持上传图片通过粘贴，但仅在Chrome中。我想如果收到足够的请求，我会在非剪贴板API浏览器中解决这个问题。坦率地说，因为在没有实现Clipboard API的浏览器中处理非CORS启用的图像需要代理服务器端图像，所以看起来不值得付出努力（当然，除非我的用户群告诉我他们想要它。）

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

希望这有帮助。

这篇关于将图像粘贴到网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！