强制粘贴事件以 Base64 编码图像

背景：

我正在为我的公司开发一个 HTML5 Web 应用程序，它基本上是一个将信息存储在数据库中的富文本编辑器（类似于 Google 文档）。

我们使用 CKEditor 3 作为富文本编辑器和 Jquery 来完成此任务。

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

我们的应用程序目前处于 alpha 测试阶段，有 18 名测试人员（与将使用该应用程序的测试人员相同）。这些人虽然五花八门，但几乎都具备基本的计算机技能，大多仅限于MS Word和MS Excel。

.

Problem:

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

.

Question

如何强制粘贴的图像以 base64 进行编码，类似于 Firefox 中发生的情况？

.

Notes

如果可以将引用为 src="file://c:\something" 的图像“上传”到服务器，这将解决我的问题，因为我可以稍后对该图像进行 Base64 编码。

我们无法切换到 Firefox，因为它不能完全解决我们的问题（如果图像与文本一起“粘贴”，Firefox 不会对其进行 Base64 编码），并且会引发其他问题，例如文本显示时出现水平滚动条。太长，无法放入文本区域。

是的，也不是，我相信。

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

但是，Word 似乎发送了对本地文件的引用，这会由于跨域请求而生成安全异常（至少在 Chrome 上）（http://... and file:///...）。就我而言，无法获取此类本地文件的实际内容，并且内容是not作为剪贴板数据本身发送。

如果您复制“纯”图像（例如，从 Paint 中复制），您可以获得 Base 64 编码数据，如下所示：http://jsfiddle.net/pimvdb/zTAuR/。或者将图像作为 Base 64 编码的 PNG 附加到 div 中：http://jsfiddle.net/pimvdb/zTAuR/2/.

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);
};