Javascript 剪贴板功能中的粘贴图像如何在 Gmail 和 Google Chrome 12+ 中工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6333814/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
提问by Emil Lerch
I noticed a blog post from Googlethat mentions the ability to paste images directly from the clipboard into a Gmail message if you're using the latest version of Chrome. I tried this with my version of Chrome (12.0.742.91 beta-m) and it works great using control keys or the context menu.
我注意到Google的一篇博客文章提到如果您使用最新版本的 Chrome，可以将剪贴板中的图像直接粘贴到 Gmail 邮件中。我用我的 Chrome 版本 (12.0.742.91 beta-m) 尝试了这个，它使用控制键或上下文菜单效果很好。
From that behavior I need to assume that the latest version of webkit used in Chrome is able to deal with images in the Javascript paste event, but I have been unable to locate any references to such an enhancement. I believe ZeroClipboardbinds to keypress events to trigger its flash functionality and as such wouldn't work through the context menu (also, ZeroClipboard is cross-browser and the post says this works only with Chrome).
根据这种行为，我需要假设 Chrome 中使用的最新版本的 webkit 能够处理 Javascript 粘贴事件中的图像，但我一直无法找到对此类增强功能的任何引用。我相信ZeroClipboard绑定到按键事件以触发其 Flash 功能，因此无法通过上下文菜单工作（此外，ZeroClipboard 是跨浏览器的，并且帖子说这仅适用于 Chrome）。
So, how does this work and where the enhancement was made to Webkit (or Chrome) that enables the functionality?
那么，这是如何工作的，以及在哪些地方对启用该功能的 Webkit（或 Chrome）进行了增强？
回答by Nick Retallack
I spent some time experimenting with this. It seems to sort of follow the new Clipboard API spec. You can define a "paste" event handler and look at event.clipboardData.items, and call getAsFile() on them to get a Blob. Once you have a Blob, you can use FileReaderon it to see what's in it. This is how you can get a data url for the stuff you just pasted in Chrome:
我花了一些时间对此进行试验。它似乎有点遵循新的剪贴板 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);
}
}
}
Once you have a data url you can display the image on the page. If you want to upload it instead, you could use readAsBinaryString, or you could put it into an XHR using FormData.
有了数据 url 后，您就可以在页面上显示图像。如果你想上传它，你可以使用 readAsBinaryString，或者你可以使用FormData将它放入 XHR 。
回答by robintibor
The answer by Nick seems to need small changes to still work :)
尼克的答案似乎需要一些小的改动才能继续工作:)
// 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);
}
}
Example running code: http://jsfiddle.net/bt7BU/225/
示例运行代码：http: //jsfiddle.net/bt7BU/225/
So the changes to nicks answer were:
所以尼克斯答案的变化是：
var items = event.clipboardData.items;
to
到
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
Also I had to take the second element from the pasted items (first one seems to be text/html if you copy an image from another web page into the buffer). So I changed
此外，我必须从粘贴的项目中获取第二个元素（如果您将图像从另一个网页复制到缓冲区中，则第一个元素似乎是 text/html）。所以我改变了
var blob = items[0].getAsFile();
to a loop finding the item containing the image (see above)
循环查找包含图像的项目（见上文）
I didn't know how to answer directly to Nick's answer, hope it is fine here :$ :)
我不知道如何直接回答尼克的回答，希望在这里没问题:$ :)
回答by Daniel X Moore
Here's a smooth jQuery plugin wrapping up the whole deal (basically the same principles as Nick's answer): http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/
这是一个流畅的 jQuery 插件，完成了整个交易（与尼克的回答原则基本相同）：http: //strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/
It's got a live demo, annotated source code, and everything.
它有一个现场演示、带注释的源代码，以及一切。
回答by Rich Apodaca
Web browsers keep marching forward. I recently found this:
Web 浏览器不断向前发展。我最近发现了这个：
Code Snippet — Accessing Clipboard Images with Javascript
and this:
和这个：
The Paste Wasteland (or, why the onPaste event is a mess)
Paste 荒地（或者，为什么 onPaste 事件是一团糟）
The first link describes a way to get clipboard images using JavaScript only on Firefox and Chrome. The second link contains a postscript that mentions the same technique was adapted to IE (unknown version).
第一个链接描述了一种仅在 Firefox 和 Chrome 上使用 JavaScript 获取剪贴板图像的方法。第二个链接包含一个后记，其中提到了适用于 IE（未知版本）的相同技术。
回答by saurshaz
As far as I know -
据我所知 -
With HTML 5 features(File Api and the related) - accessing clipboard image data is now possible with plain javascript.
使用 HTML 5 功能（文件 Api 和相关的） - 现在可以使用普通的 javascript 访问剪贴板图像数据。
This however fails to work on IE (anything less than IE 10). Don't know much about IE10 support also.
然而，这在 IE 上不起作用（任何小于 IE 10 的）。对IE10支持也不太了解。
For IE the optiens that I believe are the 'fallback' options are either using Adobe's AIR api or using a signed applet
对于 IE，我认为是“后备”选项的选项要么使用 Adobe 的 AIR api，要么使用签名的小程序
回答by Mark Kahn
Wow, that's cool. I haven't dived into the gmail source to figure it out yet (I did with the drag-out functionality), but I'm guessing that it's an extension of the drag/drop API that chrome has already extended. There's a decent write-up on how the drag-to-desktop feature works: http://www.thecssninja.com/javascript/gmail-dragoutthat may at least point you in the right direction.
哇，这很酷。我还没有深入研究 gmail 源代码来弄清楚它（我使用了拖出功能），但我猜测它是 chrome 已经扩展的拖放 API 的扩展。关于拖到桌面功能的工作原理，有一篇不错的文章：http: //www.thecssninja.com/javascript/gmail-dragout，它至少可以为您指明正确的方向。
回答by Sandeep K Nair
This is from an example with angular2 typescript that works for my project. Hope it helps someone. Logic is same for other cases as-well.
这是来自一个适用于我的项目的 angular2 打字稿示例。希望它可以帮助某人。其他情况的逻辑也是一样的。
https://gist.github.com/sandeepsuvit/a8ba77faebba260455985504be24aef7
https://gist.github.com/sandeepsuvit/a8ba77faebba260455985504be24aef7
Here is a live implementation:
这是一个实时实现：
https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.ts
https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.ts
