在 Gmail 和 GoogleChrome12 + 中，剪贴板的粘贴图片功能是如何工作的？

我注意到一个 来自 Google 的博客文章提到，如果你正在使用最新版本的 Chrome 浏览器，可以直接从剪贴板粘贴图片到 Gmail 邮件中。我在自己的版本 Chrome (12.0.742.91 beta-m)中尝试过这种方法，使用控制键或上下文菜单效果很好。

根据这种行为，我需要假设 Chrome 中使用的最新版本的 webkit 能够处理 Javascript 粘贴事件中的图像，但是我无法找到任何关于这种增强的引用。我相信 零剪贴板绑定到按键事件来触发它的 flash 功能，因此不能通过上下文菜单工作(同样，ZeroClipboard 是跨浏览器的，并且文章说这只能在 Chrome 中工作)。

那么，这是如何工作的呢? Webkit (或 Chrome)的增强是在哪里实现的呢？

100396 次浏览
小开
最佳答案

我花了一些时间试验这个。它似乎有点遵循新的 剪贴板 API 规范。您可以定义一个“粘贴”事件处理程序并查看 event.clipboardData.item，然后对它们调用 getAsFile ()来获取一个 Blob。一旦有了一个 Blob，就可以使用 文件阅读器查看其中的内容。这就是你如何获得你刚刚在 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，或者使用 表格数据将其放入 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();

到查找包含图像的项目的循环(见上文)

我不知道如何直接回答尼克的问题，希望这里没问题: $:)

小开

据我所知

通过 HTML5的特性(FileApi 和相关的) ，现在可以使用普通的 javascript 访问剪贴板图像数据。

然而这在 IE 上无效(任何低于 IE10的东西)。对于 IE10的支持也知之甚少。

对于 IE 来说，我认为可以选择的“后备”选项是 或者使用 Adobe 的 AIR API 或者 使用有符号的小程序


提交答案