如何在Gmail和Google Chrome 12+中使用剪贴板粘贴图像功能

How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?

本文关键字：剪贴板 功能 图像 Gmail Chrome Google      更新时间：2023-09-26

我注意到谷歌的一篇博客文章提到，如果你使用最新版本的Chrome，可以将图像直接从剪贴板粘贴到Gmail消息中。我在我的Chrome版本（12.0.742.91 beta-m）中尝试过这一点，使用控制键或上下文菜单效果很好。

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

那么，这是如何工作的，在哪里对启用该功能的Webkit（或Chrome）进行了增强？

我花了一些时间对此进行实验。它似乎有点遵循新的剪贴板API规范；粘贴"；事件处理程序，查看event.clipboardData.items，并对其调用getAsFile（）以获取Blob。一旦你有了Blob，你就可以在上面使用FileReader来查看其中的内容

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类型。

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

循环找到包含图像的项目（见上文）

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

据我所知-

有了HTML5功能（文件Api和相关功能），现在可以使用简单的javascript访问剪贴板图像数据。

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

对于IE，我认为是"后备"选项的眼镜是使用Adobe的AIR-api或使用已签名的小程序

<html><body>
<p> Right click on any image in chrome and press copy image.<br>
Press Ctrl + V to pase your image. Works on chrome </p>
<div id='MyDiv1'></div>
<script>
document.onpaste = function (event) {
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  var blob = items[items.length - 1].getAsFile();
  var reader = new FileReader();
  reader.readAsDataURL(blob);
  reader.onload = function (event) {
    const img1 = document.createElement("img");
    img1.src = event.target.result; // Appending image data to img tag
    document.getElementById('MyDiv1').appendChild(img1);
  } 
}
</script>
</body></html>

粘贴这个并保存为.html，你就可以进入

了
相关文章：