Gmail 和 Google Chrome 12+ 中的“从剪贴板粘贴图像”功能如何工作？

我注意到一个来自 Google 的博文 http://gmailblog.blogspot.com/2011/06/pasting-images-into-messages-just-got.html其中提到，如果您使用的是最新版本的 Chrome，则可以将剪贴板中的图像直接粘贴到 Gmail 邮件中。我用我的 Chrome 版本（12.0.742.91 beta-m）尝试过这一点，使用控制键或上下文菜单效果很好。

从该行为中，我需要假设 Chrome 中使用的最新版本的 webkit 能够处理 Javascript 粘贴事件中的图像，但我无法找到对此类增强功能的任何引用。我相信零剪贴板 http://code.google.com/p/zeroclipboard/绑定到按键事件以触发其 flash 功能，因此无法通过上下文菜单工作（此外，ZeroClipboard 是跨浏览器的，该帖子说这只适用于 Chrome）。

那么，它是如何工作的以及在何处对 Webkit（或 Chrome）进行了增强以实现该功能？

我花了一些时间对此进行试验。似乎有点遵循新的剪贴板 API 规范 http://dev.w3.org/2006/webapi/clipops/。您可以定义一个“粘贴”事件处理程序并查看 event.clipboardData.items，并对它们调用 getAsFile() 以获取 Blob。一旦你有了 Blob，你就可以使用文件阅读器 https://developer.mozilla.org/en/DOM/FileReader看看里面有什么。您可以通过以下方式获取刚刚粘贴到 Chrome 中的内容的数据 URL：

document.onpaste = function (event) {
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    console.log(JSON.stringify(items)); // might give you mime types
    for (var index in items) {
        var item = items[index];
        if (item.kind === 'file') {
            var blob = item.getAsFile();
            var reader = new FileReader();
            reader.onload = function (event) {
                console.log(event.target.result); // data url!
            }; 
            reader.readAsDataURL(blob);
        }
    }
};

获得数据 URL 后，您就可以在页面上显示图像。如果您想上传它，您可以使用 readAsBinaryString，或者您可以使用将其放入 XHR 中FormData https://developer.mozilla.org/en/XMLHttpRequest/FormData.

编辑：请注意该项目的类型数据传输项 https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem. JSON.stringify可能不适用于项目列表，但当您循环项目时，您应该能够获取 mime 类型。