我注意到Google的一篇博客文章提到如果您使用最新版本的 Chrome，可以将剪贴板中的图像直接粘贴到 Gmail 邮件中。我用我的 Chrome 版本（12.0.742.91 beta-m）尝试了这个，它使用控制键或上下文菜单效果很好。
根据这种行为，我需要假设 Chrome 中使用的最新版本的 webkit 能够处理 Javascript 粘贴事件中的图像，但我一直无法找到对此类增强功能的任何引用。我相信ZeroClipboard绑定到按键事件以触发其 Flash 功能，因此无法通过上下文菜单工作（此外，ZeroClipboard 是跨浏览器的，并且帖子说这仅适用于 Chrome）。
那么，这是如何工作的，以及在哪些地方对启用该功能的 Webkit（或 Chrome）进行了增强？
我花了一些时间对此进行试验。它似乎有点遵循新的剪贴板 API 规范。您可以定义“粘贴”事件处理程序并查看 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 类型。
尼克的答案似乎需要一些小的改动才能继续工作:)
// window.addEventListener('paste', ... or
document.onpaste = function (event) {
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
// find pasted image among pasted items
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
console.log(event.target.result); // data url!
};
reader.readAsDataURL(blob);
}
}
示例运行代码：http : //jsfiddle.net/bt7BU/225/
所以尼克斯答案的变化是：
var items = event.clipboardData.items;
到
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
此外，我必须从粘贴的项目中获取第二个元素（如果您将图像从另一个网页复制到缓冲区中，则第一个元素似乎是 text/html）。所以我改变了
var blob = items[0].getAsFile();
循环查找包含图像的项目（见上文）
我不知道如何直接回答尼克的回答，希望在这里没问题:$ :)
我所知道的 -
使用 HTML 5 功能（文件 Api 和相关的） - 现在可以使用普通的 javascript 访问剪贴板图像数据。
然而，这在 IE 上不起作用（任何小于 IE 10）。对IE10的支持也不太了解。
对于 IE，我认为是“后备”选项的选项要么使用 Adobe 的 AIR api，要么使用签名的小程序