将图像粘贴到网页

Question

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

我发现这个网站完全可以满足我的需求http://pasteboard.co/，所以它是可能的，但是我找不到它是如何完成的。

您有什么想法或解决方案吗？

我更喜欢纯 html5/javascript 的解决方案，避免使用任何插件，但也可以使用 silverlight 或 flash。

Answer 1

有两种方法可以解决这个问题，简单的方法和困难的方法。

简单的方法： 使用Clipboard API。这是一个“HTML5”API，但它只在 Chrome 中得到适当支持。这将允许您从剪贴板以Blob 的形式访问粘贴的图像。然后，您可以通过 XHR2 请求将此 Blob 发送到您的服务器。

艰难之路： 不幸的是，这是您必须对除 Chrome 以外的所有浏览器执行的操作，而且它并不漂亮。它涉及您在“粘贴目标元素”内创建隐藏的内容可编辑 DIV。这将收到粘贴的图像。然后您需要将图像绘制到<canvas> 上，然后需要将其转换为Blob。但是等等，它会变得更好。在某些情况下（可能很多情况），您可能还需要代理跨域图像（服务器端）。如果托管映像的服务器不允许对它们托管的映像进行 CORS 请求，则可能需要这样做。你可以在this MDN article阅读更多关于这种情况的信息。

我维护的基于 javascript 的上传器 Fine Uploader 已经支持通过粘贴上传图像，但目前仅在 Chrome 中。我想如果我收到足够多的请求，我会经历在非剪贴板 API 浏览器中实现这一点的麻烦。不过，坦率地说，由于在未实现剪贴板 API 的浏览器中处理未启用 CORS 的图像需要代理图像服务器端，所以这似乎不值得付出努力（当然，除非我的用户群告诉我他们想要）。

希望这会有所帮助。