Javascript 在Gmail和Google Chrome 12+；中，从剪贴板粘贴图像功能是如何工作的；？

我注意到一个例子，其中提到如果你使用的是最新版本的Chrome，可以将剪贴板上的图像直接粘贴到Gmail邮件中。我用我的Chrome版本（12.0.742.91 beta-m）试过这个，它使用控制键或上下文菜单效果很好

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

---

那么，这是如何工作的，以及在哪里对Webkit（或Chrome）进行了增强，从而实现了这一功能？

我花了一些时间进行了试验。它似乎在某种程度上遵循新的趋势。您可以定义一个“粘贴”事件处理程序，查看event.clipboardData.items，并对其调用getAsFile（）以获取Blob。一旦你有一个斑点，你可以用它来看看里面有什么。这是您如何为刚刚粘贴到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

---

编辑：请注意，该项的类型为<代码>JSON.stringify在项目列表上可能不起作用，但是当您循环项目时，应该能够获得mime类型。

Nick的答案似乎需要一些小的更改才能继续工作：）

到

此外，我还必须从粘贴的项目中获取第二个元素（如果将另一个网页中的图像复制到缓冲区中，第一个元素似乎是text/html）。所以我改变了

  var blob = items[0].getAsFile();

指向查找包含图像的项的循环（参见上文）

我不知道如何直接回答Nick的答案，希望这里没问题：$：）

据我所知-

有了HTML5特性（文件Api和相关特性），现在可以使用纯javascript访问剪贴板图像数据

然而，这无法在IE上工作（任何低于IE 10的东西）。我也不太了解IE10的支持

对于IE，我认为是“后备”选项的选项是 或者使用Adobe的AIR api 或

---

使用已签名的小程序

在这里抓住救命稻草，但您知道为什么event.clipboardData.items在Safari 5.1中似乎是“未定义”的吗？甚至如何在Safari中获取文件/blob的剪贴板内容？在Chrome中效果非常好。你会认为webkit就是webkit：（@SenicaGonzalez）这是因为数据只在事件期间存在。事件发生后，它就消失了，因此当您尝试在inspector中翻转打开对象时，您将什么也看不到。您介意举个例子说明如何使用该图像数据提交XMLHttpRequest吗？这将非常好：下面是使用XMLHttp提交该请求的方法请求，我在实现后在博客中写道：现在列表中的第一项并不总是您粘贴的文件，我已经更新了它，以便在这些项中循环查找任何粘贴的文件。我们应该如何以XMLHttpRequest的形式提交图像数据？对于阅读此内容的其他人，现在可能会在其中包含此问题的答案：）我不明白。当我在浏览器中粘贴文件时，google chrome中的

clipboardData.items

总是空的（Firefox可以工作）。chrome现在几乎需要和IE一样多的优化。小编辑：if（blob！=null）{（或在初始化时设置blob=null）

event.clipboardData.items

在最新的Chrome上运行良好，不确定什么时候

event.originalEvent…

有用？它似乎也可以在Firefox上随机运行。有人知道Firefox是否支持这一功能吗？

var items = event.clipboardData.items;

var items = (event.clipboardData  || event.originalEvent.clipboardData).items;

  var blob = items[0].getAsFile();