一尘不染

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

javascript

如果您使用的是最新版的Chrome,可以将剪贴板中的图像直接粘贴到Gmail邮件中。我在我的Chrome版本(12.0.742.91
beta-m)中进行了尝试,使用控制键或上下文菜单效果很好。

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

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


阅读 300

收藏
2020-04-25

共1个答案

一尘不染

我花了一些时间对此进行试验。似乎遵循了新的ClipboardAPI规范。您可以定义一个“粘贴”事件处理程序,并查看event.clipboardData.items,然后在它们上调用getAsFile()以获取一个Blob。一旦有了Blob,就可以在其上使用FileReader来查看其中的内容。您可以通过以下方法获取刚刚粘贴到Chrome中的内容的数据网址:

// window.addEventListener('paste', ... or
document.onpaste = function(event){
  var items = (event.clipboardData || event.originalEvent.clipboardData).items;
  console.log(JSON.stringify(items)); // will give you the mime types
  for (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

2020-04-25