剪贴板功能中的粘贴图像如何在 Gmail 和 Google Chrome 12+ 中工作? [英] How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?

问题描述

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

I noticed a blog post from Google that mentions the ability to paste images directly from the clipboard into a Gmail message if you're using the latest version of Chrome. I tried this with my version of Chrome (12.0.742.91 beta-m) and it works great using control keys or the context menu.

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

From that behavior I need to assume that the latest version of webkit used in Chrome is able to deal with images in the Javascript paste event, but I have been unable to locate any references to such an enhancement. I believe ZeroClipboard binds to keypress events to trigger its flash functionality and as such wouldn't work through the context menu (also, ZeroClipboard is cross-browser and the post says this works only with Chrome).

那么，它是如何工作的，以及在哪些地方对启用该功能的 Webkit(或 Chrome)进行了增强?

So, how does this work and where the enhancement was made to Webkit (or Chrome) that enables the functionality?

推荐答案

我花了一些时间对此进行试验.它似乎有点遵循新的 Clipboard API 规范.您可以定义粘贴"事件处理程序并查看 event.clipboardData.items，并对它们调用 getAsFile() 以获取 Blob.拥有 Blob 后，您可以在其上使用 FileReader 来查看其中的内容.这是您获取刚刚粘贴到 Chrome 中的内容的数据 URL 的方法:

I spent some time experimenting with this. It seems to sort of follow the new Clipboard API spec. You can define a "paste" event handler and look at event.clipboardData.items, and call getAsFile() on them to get a Blob. Once you have a Blob, you can use FileReader on it to see what's in it. This is how you can get a data url for the stuff you just pasted in Chrome:

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.

Once you have a data url you can display the image on the page. If you want to upload it instead, you could use readAsBinaryString, or you could put it into an XHR using FormData.

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

Note that the item is of type DataTransferItem. JSON.stringify might not work on the items list, but you should be able to get mime type when you loop over items.

这篇关于剪贴板功能中的粘贴图像如何在 Gmail 和 Google Chrome 12+ 中工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！