将图像粘贴到网页上

Question

将图像粘贴到网页上

javascripthtmlimagecopy-paste

9

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

我发现了这个网站http://pasteboard.co/完全符合我的要求，所以这是可能的，但我找不到它是如何实现的。

你有任何想法或解决方案吗？

我更喜欢用纯HTML5 / JavaScript解决方案，并避免使用任何插件，但Silverlight或Flash也可以接受。

- Yann Lebel

没有投反对票，但我想这是因为你在没有尝试过任何方法的情况下就要求解决方案。 - Daedalus

我在发布这个问题之前尝试过，就像我一直做的那样，但是我发现它不起作用，或者只在Chrome上起作用，所以我认为没有必要发布。 - Yann Lebel

3

发帖总是值得的。 - Daedalus

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ray Nicholus · Accepted Answer

有两种方法可以处理这个问题，一种是简单的方法，另一种是困难的方法。

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

困难的方法： 不幸的是，这是除Chrome之外所有浏览器都必须做的事情，而且并不美观。它涉及您在“粘贴目标元素”内创建一个隐藏的可编辑DIV。这将接收粘贴的图像。然后，您需要将图像绘制到一个<canvas>上，然后将其转换为Blob。但是，请等一下，它变得更好了。在某些情况下（可能是很多情况），您还需要代理跨域图像（服务器端）。如果托管图像的服务器不允许对其托管的图像进行CORS请求，则可能需要执行此操作。您可以在此MDN文章中了解有关此情况的更多信息。

我维护的基于JavaScript的上传程序Fine Uploader已经支持通过粘贴上传图像，但目前仅限于Chrome。如果我收到足够的请求，我会很高兴在不使用Clipboard API浏览器中实现此功能。但是，说实话，在处理不支持CORS的图像并且浏览器不实现Clipboard API的情况下代理图像服务器方面需要花费很多努力，这似乎并不值得（当然，除非我的用户告诉我他们需要它）。

希望这可以帮到您。