在Gmail和GoogleChrome 12+中，剪贴板功能中的粘贴图像是如何工作的？

Question

我注意到来自Google的博客文章如果你使用的是Chrome的最新版本，那就可以直接将剪贴板上的图片粘贴到Gmail消息中。我尝试了我的Chrome版本(12.0.742.91 beta-m)，它使用控制键或上下文菜单工作得很好。从这种行为中，我需要假设Chrome中使用的最新版本的webkit能够处理Javascript粘贴事件中的图像，但我无法找到对这种增强的任何引用。我相信ZeroClipboard绑定到按键事件以触发其闪存功能，因此无法通过上下文菜单工作(另外，ZeroClipboard是跨浏览器的，文章说这只适用于Chrome)。那么，这是如何工作的，以及如何增强Webkit(或Chrome)的功能呢？

Answer 1

我花了一些时间做这个实验。它似乎在某种程度上跟随着新的剪贴板API规范..您可以定义一个“粘贴”事件处理程序并查看Ev.clipboardData.Item，并对其调用getAsFile()以获得Blob。一旦你有了一个小块，你就可以用文件阅读器看看里面有什么。这就是你如何为你刚粘贴到Chrome中的东西获取一个数据url的方法：

// window.addEventListener('paste', ... ordocument.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.

Answer 2

Web浏览器继续前进。我最近发现了这个：

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

这是：

浆糊荒原(或者说，为什么onPest事件是一团糟)

第一个链接描述了一种仅在Firefox和Chrome上使用JavaScript获取剪贴板图像的方法。第二个链接包含一个PostScript，其中提到了适用于IE(未知版本)的相同技术。