javascript - 剪贴板中的粘贴图像功能如何在 Gmail 和 Google Chrome 12+ 中工作？

Question

我注意到 blog post from Google如果您使用的是最新版本的 Chrome，则可以将图像直接从剪贴板粘贴到 Gmail 邮件中。我用我的 Chrome 版本(12.0.742.91 beta-m)尝试了这个，使用控制键或上下文菜单效果很好。

根据这种行为，我需要假设 Chrome 中使用的最新版本的 webkit 能够处理 Javascript 粘贴事件中的图像，但我无法找到对这种增强功能的任何引用。我相信ZeroClipboard绑定(bind)到按键事件以触发其 Flash 功能，因此无法通过上下文菜单工作(此外，ZeroClipboard 是跨浏览器，帖子说这仅适用于 Chrome)。

那么，这是如何工作的，以及启用该功能的 Webkit(或 Chrome)的增强功能在哪里？

Answer 1

我花了一些时间对此进行试验。似乎有点遵循新的 Clipboard API spec .您可以定义“粘贴”事件处理程序并查看 event.clipboardData.items，然后在它们上调用 getAsFile() 以获取 Blob。拥有 Blob 后，您可以使用 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，或者您可以使用 FormData 将其放入 XHR .

编辑:请注意该项目的类型为 DataTransferItem . JSON.stringify 可能不适用于项目列表，但您应该能够在循环项目时获得 mime 类型。