首页  >  文章  >  web前端  >  在 Gmail 的 Chrome 12 更新中如何从剪贴板粘贴图像?

在 Gmail 的 Chrome 12 更新中如何从剪贴板粘贴图像?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-10-28 06:25:30348浏览

How Does Pasting Images from Clipboard Work in Gmail's Chrome 12  Update?

将剪贴板中的图像粘贴到 Gmail:Chrome 12 中的操作方法

Google 宣布能够将剪贴板中的图像直接粘贴到 Gmail使用 Chrome 12 的 Gmail 引发了人们对其底层机制的好奇。尽管使用了最新的 Chrome 版本,一些用户仍然无法找到有关如何在 Webkit 中实现此增强功能的信息。

经过实验,Chrome 似乎已经采用了新兴的剪贴板 API 规范。此规范允许定义可以访问 event.clipboardData.items 属性的“粘贴”事件处理程序。通过对每个项目调用 getAsFile(),可以获得一个 Blob 对象。然后可以在此 Blob 上使用 FileReader 来确定其内容。

下面是演示如何获取粘贴图像的数据 URL 的代码片段:

document.onpaste = function (event) {
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    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可用时,可以显示图像。或者,可以使用 FormData 或 readAsBinaryString 上传。

需要注意的是,虽然 JSON.stringify 可能无法直接在项目列表上工作,但可以通过使用 DataTransferItem 数据结构迭代每个项目来获取 MIME 类型.

以上是在 Gmail 的 Chrome 12 更新中如何从剪贴板粘贴图像?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn