剪贴板粘贴图片功能如何在 Gmail 和 Google Chrome 12+ 中工作?

2022-08-30 02:10:19

我注意到Google的一篇博客文章提到,如果您使用的是最新版本的Chrome,则可以直接从剪贴板将图像粘贴到Gmail邮件中。我用我的Chrome版本(12.0.742.91 beta-m)尝试了这个,它使用控制键或上下文菜单效果很好。

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

那么,这是如何工作的,以及在哪里对启用该功能的Webkit(或Chrome)进行了增强?


答案 1

我花了一些时间尝试这个。它似乎有点遵循新的剪贴板API规范。可以定义“粘贴”事件处理程序并查看 event.clipboardData.items,并在其上调用 getAsFile() 以获取 Blob。拥有 Blob 后,可以使用 FileReader 查看其中的内容。以下是获取刚刚在 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,或者你可以使用FormData把它放到XHR中。

编辑:请注意,该项目的类型为 DataTransferItem。 可能不适用于项目列表,但当您循环访问项目时,您应该能够获得哑剧类型。JSON.stringify


答案 2

Nick的答案似乎需要小的改变才能仍然工作:)

// 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();

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

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