javascript - 将图像粘贴到网页

Question

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

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

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

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

Answer 1

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

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

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

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

希望这可以帮助。