强制粘贴事件在Base64编码，图像

Question

背景：

我发展我公司的HTML5网页应用，它基本上是在数据库中存储信息的富文本编辑器（类似于谷歌文档）。

我们使用CKEditor 3作为richtext编辑器和jquery来实现这一点。

我们选择Google的Chrome作为首选浏览器。

我们的应用程序目前处于alpha测试阶段，拥有一组18位测试人员（与使用该应用程序的测试人员相同）。这些人是异构的，但他们几乎所有人都具备基本的计算机技能，主要限于MS Word和MS Excel。

。

问题：

我们的大多数用户仍然使用这个词来阐述文件，主要是由于其产生丰富的流程图的能力。当他们将生成的内容复制/粘贴到Chrome时，图像将粘贴为本地文件的链接（由操作系统自动生成，位于用户/ */temp文件夹中）。这意味着服务器无法访问这些文件，并且生成的文档（生成的PDF）不包含图像。

。

问题

我如何可以强制用base64进行编码粘贴图片，类同在Firefox中会发生什么？

。

注意

如果这是可能的“上传”至服务器SRC =引用的图片“文件：// C：\东西”，因为我的base64后来编码图像，将解决我的问题。

我们无法切换到Firefox，因为它没有完全解决我们的问题（如果图像与文本一起“粘贴”，firefox不会对其进行base64编码）并引发其他问题，例如出现水平滚动条当文本太长以至于无法放入textarea时。

Answer 1

是的，不，我相信。

可以拦截粘贴事件并将粘贴的图像作为文件获取，然后使用FileReader将文件读取为数据URI（基本64编码的PNG）。

但是，Word似乎向本地文件发送引用，由于跨域请求（http://...和file:///...），该文件会生成安全性异常（至少在Chrome上）。就我而言，没有办法获得这些本地文件的实际内容，并且其内容是而不是本身作为剪贴板数据发送。

如果你复制一个“纯”图像（例如：Paint），你可以得到如下的base64编码数据：http://jsfiddle.net/pimvdb/zTAuR/。或者在div：http://jsfiddle.net/pimvdb/zTAuR/2/中将图像作为基本64编码PNG追加。

div.onpaste = function(e) { 
    var data = e.clipboardData.items[0].getAsFile(); 

    var fr = new FileReader; 

    fr.onloadend = function() { 
     alert(fr.result.substring(0, 100)); // fr.result is all data 
    }; 

    fr.readAsDataURL(data); 
};