我注意到一个blog post from Google提到能够直接从剪贴板粘贴图像到Gmail消息，如果你使用的是最新版本的Chrome。我尝试使用我的Chrome版本（12.0.742.91 beta-m），使用控制键或上下文菜单效果很好。
从这种行为我需要假设Chrome中使用的最新版本的webkit能够处理Javascript粘贴事件中的图像，但我无法找到任何对此类增强的引用。我相信ZeroClipboard绑定到按键事件以触发其闪存功能，因此无法通过上下文菜单工作（同样，ZeroClipboard是跨浏览器，帖子说这只适用于Chrome）。
那么，这是如何工作的以及对启用该功能的Webkit（或Chrome）进行增强的地方？
我花了一些时间试验这个。它似乎跟随新的Clipboard API spec。您可以定义“粘贴”事件处理程序并查看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);
}
}
}
获得数据网址后，您可以在页面上显示图像。如果你想上传它，你可以使用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's answer相同的原则）：http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/
它有一个现场演示，带注释的源代码，以及一切。
Web浏览器不断前进。我最近发现了这个：
Code Snippet — Accessing Clipboard Images with Javascript
还有这个：
The Paste Wasteland (or, why the onPaste event is a mess)
第一个链接描述了仅在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 typescript的示例，适用于我的项目。希望它可以帮助某人。对于其他情况，逻辑也是如此。
https://gist.github.com/sandeepsuvit/a8ba77faebba260455985504be24aef7
这是一个实时实现：
https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.ts