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

kyxcudwk 于 2023-08-01 发布在 Go

关注(0)|答案(4)|浏览(137)

我注意到一个blog post from Google，它提到如果你使用的是最新版本的Chrome，可以直接从剪贴板粘贴图像到Gmail邮件中。我用我的Chrome版本（12.0.742.91 beta-m）尝试了这个方法，使用控制键或上下文菜单效果很好。
从这种行为中，我需要假设Chrome中使用的最新版本的webkit能够处理JavaScript粘贴事件中的图像，但我无法找到任何对这种增强的引用。我相信ZeroClipboard绑定到按键事件来触发其flash功能，因此不会通过上下文菜单工作（此外，ZeroClipboard是跨浏览器的，帖子说这只适用于Chrome）。
那么，这是如何工作的，以及在哪里对Webkit（或Chrome）进行了增强以实现该功能？

google-chrome

来源：https://stackoverflow.com/questions/6333814/how-does-the-paste-image-from-clipboard-functionality-work-in-gmail-and-google-c

4条答案

按热度按时间

pokxtpni1#

我花了一些时间来做这个实验。它似乎遵循了新的Clipboard API spec。您可以定义一个“paste”事件处理程序，查看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可能不能在items列表上工作，但是当你在items上循环时，你应该能够得到mime类型。

赞(0）回复(0）举报 2023-08-01

hujrc8aj2#

尼克的答案似乎需要小的改变才能仍然起作用：）

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

型
循环查找包含图像的项（见上文）
我不知道如何直接回答尼克的答案，希望在这里很好：$：）

赞(0）回复(0）举报 2023-08-01

xmd2e60i3#

据我所知-
有了HTML5的特性（文件API和相关的）-现在可以用普通的JavaScript访问剪贴板图像数据。
但是，这在IE上不起作用（低于IE 10的任何内容）。我也不太了解IE10的支持。
对于IE，我认为最好的选择是使用Adobe的AIR API或者使用一个签名的applet

赞(0）回复(0）举报 2023-08-01

fnatzsnv4#

<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，你就可以开始了

赞(0）回复(0）举报 2023-08-01

我来回答

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

4条答案

相关问题

热门标签

最新问答