Javascript 强制粘贴事件在base64中编码图像

背景：

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

我们使用CKEditor 3作为richtext编辑器，并使用Jquery来完成这项工作

我们选择谷歌的Chrome浏览器作为首选浏览器

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

问题：

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

问题

我怎样才能强制粘贴的图像在base64中编码，类似于Firefox中的情况

注释

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

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

我相信是和否

可以截获粘贴事件并获取粘贴的图像作为文件，然后使用

FileReader

将文件作为数据URI（base 64编码PNG）读取

然而，Word似乎发送了对本地文件的引用，由于跨域请求（

http://...

和

file:///...

）。就我而言，没有办法获得此类本地文件的实际内容，而且这些内容本身也不会作为剪贴板数据发送

如果复制“纯”图像（例如，从油漆中），则可以按如下方式获取base 64编码数据：。或者在div:中将图像作为base64编码的PNG追加

是的，我相信不是

可以截获粘贴事件并获取粘贴的图像作为文件，然后使用

FileReader

将文件作为数据URI（base 64编码PNG）读取

然而，Word似乎发送了对本地文件的引用，由于跨域请求（

http://...

和

file:///...

）。就我而言，没有办法获得此类本地文件的实际内容，而且这些内容本身也不会作为剪贴板数据发送

如果复制“纯”图像（例如，从油漆中），则可以按如下方式获取base 64编码数据：。或者在div:中将图像作为base64编码的PNG追加

---

谢谢正如你所说，问题似乎在于MSWord如何处理剪贴板图像。使用你的建议，我设法解决了这个问题，通过在粘贴的内容中循环搜索图像，并强制用户在对话框中选择正确的图像。谢谢。正如你所说，问题似乎在于MSWord如何处理剪贴板图像。使用您的建议，我通过在粘贴的内容中循环搜索图像并强制用户在对话框中选择正确的图像来解决这个问题。

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