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

2020/11/12 02:22 · javascript ·  · 0评论

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

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

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

我花了一些时间对此进行试验。似乎遵循了新的Clipboard API规范您可以定义一个“粘贴”事件处理程序,并查看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

尼克的答案似乎需要进行一些小的更改才能继续工作:)

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

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

我不知道如何直接回答尼克的答案,希望在这里是可以的:$ :)

这是一个平滑的jQuery插件,涵盖了所有内容(基本上与Nick的答案相同):http : //strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

它有一个实时演示,带注释的源代码以及所有内容。

Web浏览器不断前进。我最近发现了这一点:

代码段—使用Javascript访问剪贴板图像

还有这个:

粘贴荒原(或为什么onPaste事件是一团糟)

第一个链接描述了仅在Firefox和Chrome上使用JavaScript获取剪贴板图像的方法。第二个链接包含一个后记,其中提到了针对IE(未知版本)改编的相同技术。

我所知道的 -

借助HTML 5功能(文件Api和相关功能),现在可以使用普通javascript访问剪贴板图像数据。

但是,这无法在IE(小于IE 10的任何版本)上运行。对IE10支持也不太了解。

对于IE,我认为是“后备”选项的优化程序是使用Adobe的AIR api或使用签名的applet

哇,太酷了。我还没有深入研究gmail源(我已经完成了拖放功能),但是我猜测它是chrome已经扩展的拖放API的扩展。关于拖动到桌面功能的工作方式,有不错的文章:http : //www.thecssninja.com/javascript/gmail-dragout,它至少可以为您指明正确的方向。

这来自适用于我的项目的angular2打字稿示例。希望它能帮助某人。其他情况的逻辑也一样。

https://gist.github.com/sandeepsuvit/a8ba77faebba260455985504be24aef7

这是一个实时实现:

https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.ts

本文地址:http://javascript.askforanswer.com/congjiantiebangongnengzhantietuxiangzaigmailhegoogle-chrome-12zhongruhegongzuo.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!