Question

背景

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

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

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

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

问题：

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

问题

如何强制粘贴的图像在base64中编码，类似于Firefox中的情况？

备注

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

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

Answer 1

是的，不，我相信。

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

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

如果复制“纯”图像（例如，不在Paint中），则可以按如下方式获取基本64位编码数据：http://jsfiddle.net/pimvdb/zTAuR/。或者将图像作为基础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);
};

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

1 个答案: