如何使用纯Javascript让用户将剪贴板中的图像数据粘贴到Firefox中的画布元素中？

我已经尽了最大努力找到了一个简单的、相关的、最新的、适用于最新版本Firefox的示例，我真的很挣扎

标题真的说明了一切。我希望用户能够从编辑器（如Windows Paint）复制部分图像，或者使用“打印屏幕”按钮，然后将其粘贴到画布元素中。如果画布调整大小以完全适合粘贴的图像（字面意思），则可获得额外点数

如果合理，希望避免使用基于Flash或Java的解决方案

---

我对Javascript有点在行，但对最新的HTML5功能相对缺乏经验，对画布元素也完全陌生。请帮忙

版本2.0：在Chrome、Firefox、Edge和Opera上使用更小、更干净的代码。不再有黑客了。但如果您需要IE和Safari的支持，请查看v1版本

---

1.0版 Chrome的实现很简单。Firefox（和IE）有一些限制，用户必须发出命令才能进行粘贴，比如键盘事件，可编辑的输入必须集中，所以我们在这里做了一些技巧——在按住ctrl键的同时集中输入字段，在释放时取消集中

浏览器支持（图像数据）：

• 火狐
• 铬
• 边缘
• IE-11
• 歌剧院

var CLIPBOARD=newclipboard\u类（“我的画布”，true）；
/**
*图像粘贴到画布中
* 
*@param{string}canvas_id-canvas id
*@param{boolean}自动调整大小-如果画布将调整大小
*/
函数剪贴板\类（画布\ id，自动调整大小）{
var _self=这个；
var canvas=document.getElementById（canvas\u id）；
var ctx=document.getElementById（canvas_id）.getContext（“2d”）；
var ctrl_pressed=false；
按下var命令=false；
var粘贴事件支持；
var-pasteCatcher；
//处理者
文档.添加的事件列表器（'keydown'，函数（e）{
_键盘上的自我动作（e）；
}，false）；//firefox修复程序
文件。添加的文件列表器（“键控”，功能（e）{
_键盘上的自我启动动作（e）；
}，false）；//firefox修复程序
document.addEventListener（'paste'，函数（e）{
_自动粘贴（e）；
}，false）；//官方粘贴处理程序
//构造函数-我们在这里忽略安全检查
this.init=函数（）{
pasteCatcher=document.createElement（“div”）；
setAttribute（“id”，“粘贴”\u ff”）；
setAttribute（“contenteditable”，”）；
pasteCatcher.style.cssText='不透明度：0；位置：固定；顶部：0px；左侧：0px；宽度：10px；左侧边距：-20px；'；
document.body.appendChild（粘贴捕捉器）；
//创建一个观察者实例
var观察者=新的突变观察者（功能（突变）{
突变。forEach（功能（突变）{
如果（粘贴事件支持==true | |按ctrl |键==false | |突变.type！='childList'）{
//我们已经在paste_auto（）中获得了数据
返回true；
}
//如果粘贴句柄失败-手动捕获粘贴的对象
if（mutation.addedNodes.length==1）{
if（mutation.addedNodes[0].src！=未定义）{
//形象
_self.paste_createImage（mutation.addedNodes[0].src）；
}
//一段时间后注册清理。
setTimeout（函数（）{
pasteCatcher.innerHTML=''；
}, 20);
}
});
});
var target=document.getElementById（'paste_ff'）；
var config={attributes:true，childList:true，characterData:true}；
observer.observe（目标，配置）；
}();
//默认粘贴操作
this.paste_auto=函数（e）{
粘贴事件支持=false；
if（粘贴捕捉器！=未定义）{
pasteCatcher.innerHTML=''；
}
如果（例如剪贴簿数据）{
var items=e.clipboardData.items；
若有（项目）{
粘贴事件支持=true；
//直接存取数据
对于（变量i=0；i

1。将图像数据复制到剪贴板或按“打印屏幕”

2.按Ctrl+V（页面/iframe必须聚焦）：

ViliusL的答案很好，但对于那些寻找简单的跨浏览器方式来捕获粘贴图像的人来说：

window.addEventListener("paste", async function(e) {
  e.preventDefault();
  e.stopPropagation();
  let file = e.clipboardData.items[0].getAsFile();
  let objectUrl = URL.createObjectURL(file);
  // do something with url here
});

---

您可能需要执行一些错误检查（如ViliusL的回答），以防他们粘贴非图像的内容。根据MDN，它可以在所有现代浏览器中工作。我已经在Chrome和Firefox上进行了测试，它们运行良好。

谢谢！真是松了一口气！2014年4月是否有更简单的解决方案？不区分浏览器？应该很简单：-目前仅限chrome。未来