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

Posted 2023-02-23

【中文标题】强制粘贴事件以 base64 编码图像

【英文标题】：Force paste event to encode images in base64

【发布时间】：2011-12-21 11:22:30

【问题描述】：

背景：

我正在为我的公司开发一个 html5 网络应用程序，它基本上是一个将信息存储在数据库中的富文本编辑器（类似于 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 编码）并引发其他问题，例如水平滚动条出现时文本太长，无法放入 textarea。

【参考方案1】：

是的，我相信。

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

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

如果您复制“纯”图像（例如，从 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);
;

【讨论】：

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