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

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

经过实验，Chrome 似乎已经采用了新兴的 Clipboard 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 类型.