Gmail和Google Chrome 12+如何在剪贴板function中使用粘贴图片？
我发现了一篇来自Google的博客文章 ，提到如果您使用的是最新版本的Chrome，则可以直接从剪贴板将图片粘贴到Gmail邮件中。 我试着用我的Chrome版本（12.0.742.91 beta-m），它使用控制键或上下文菜单很好用。
从这种行为中，我需要假设Chrome浏览器中使用的最新版本的webkit能够处理Javascript粘贴事件中的图像，但是我一直无法find任何对这种增强的引用。 我相信ZeroClipboard绑定到按键事件触发其闪光灯function，因此不会通过上下文菜单工作（另外，ZeroClipboard是跨浏览器，并表示这只适用于Chrome浏览器）。
那么，这是如何工作的，以及如何增强Webkit（或Chrome）的function？
我花了一些时间试验这个。 这似乎是遵循新的剪贴板API规范 。 您可以定义一个“粘贴”事件处理程序，并查看event.clipboardData.items，并调用getAsFile（）来获得一个Blob。 一旦你有一个Blob，你可以使用FileReader来看看它里面有什么。 以下是您如何获取刚刚在Chrome中粘贴的内容的数据url：
// 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;
另外，我不得不从粘贴的项目（第一个似乎是文本/ HTML，如果你从另一个网页的图像复制到缓冲区）的第二个元素。 所以我改变了
var blob = items[0].getAsFile();
find包含图像的项目（见上）
我不知道如何直接回答尼克的答案，希望在这里罚款：$ 🙂
下面是一个stream畅的jQuery插件，包括了整个交易（基本上和Nick的答案一样 ）： http : //strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/
它有一个现场演示，注释源代码，和一切。
networking浏览器不断前进。 我最近发现这个：
代码片段 – 使用Javascript访问剪贴板图片
和这个：
粘贴荒地（或者，为什么onPaste事件是一团糟）
第一个链接描述了一种仅在Firefox和Chrome上使用JavaScript获取剪贴板图像的方法。 第二个链接包含一个后记，提到相同的技术是适应IE（未知版本）。
我所知道的 –
随着HTML 5的function（文件Api和相关） – 访问剪贴板图像数据现在可以用普通的JavaScript。
但是，这不能在IE浏览器（IE 10以上的任何东西）上工作。 对IE10的支持也不太了解。
对于IE来说，我认为是“后备”选项的select是使用Adobe的AIR API或使用签名的小程序
哇，这很酷。 我还没有深入到gmail的源代码（但我已经做了拖出function），但我猜测这是Chrome已经扩展的拖放API的扩展。 关于拖动到桌面function的工作方式有一个体面的写法： http ： //www.thecssninja.com/javascript/gmail-dragout至less可以指出你在正确的方向。
