将图像粘贴到网页

Question

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

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

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

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

Answer 1

有两种方法可以解决这个问题,简单方法和困难方法.

简单方法: 利用剪贴板API.这是一个"HTML5"API,但只能在Chrome中正确支持.这将允许您从剪贴板访问粘贴的图像Blob.然后,您可以Blob通过XHR2请求将其发送到您的服务器.

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

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

希望这可以帮助.