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

Posted 2023-03-05

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

【英文标题】：How can I let user paste image data from the clipboard into a canvas element in Firefox in pure Javascript?

【发布时间】：2013-08-25 00:47:32

【问题描述】：

我已尽我所能找到一个适用于最新版本 Firefox 的简单、相关且最新的示例，但我真的很苦恼。

标题确实说明了一切。我希望用户能够从 Windows Paint 等编辑器中复制图像的一部分，或者使用 Print Screen 按钮，然后将其粘贴到画布元素中。如果画布调整大小以完全适合粘贴的图像（字面意思），则加分。

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

我在 javascript 方面还算不错，但对最新的 html5 功能相对缺乏经验，并且对 Canvas 元素完全陌生。请帮忙！

【问题讨论】：

How to manage image pasting from clipboard in html5?

【参考方案1】：

2.0 版：更小、更简洁的代码可在 Chrome、Firefox、Edge、Opera 上运行。没有更多的黑客。但如果需要支持 IE 和 Safari，请查看 v1 版本。

http://jsfiddle.net/viliusl/xq2aLj4b/5/

---

1.0 版 Chrome 实现很简单。 Firefox（和 IE）有限制，用户必须给出命令才能像键盘事件一样进行粘贴，并且可编辑的输入必须被聚焦，所以我们在这里做一些技巧 - 在 ctrl down 上我们聚焦输入字段，在释放 unfocus 时。

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

火狐 铬 边缘 IE-11 歌剧

var CLIPBOARD = new CLIPBOARD_CLASS("my_canvas", true);

/**
 * image pasting into canvas
 * 
 * @param string canvas_id - canvas id
 * @param boolean autoresize - if canvas will be resized
 */
function CLIPBOARD_CLASS(canvas_id, autoresize) 
	var _self = this;
	var canvas = document.getElementById(canvas_id);
	var ctx = document.getElementById(canvas_id).getContext("2d");
	var ctrl_pressed = false;
	var command_pressed = false;
	var paste_event_support;
	var pasteCatcher;

	//handlers
	document.addEventListener('keydown', function (e) 
		_self.on_keyboard_action(e);
	, false); //firefox fix
	document.addEventListener('keyup', function (e) 
		_self.on_keyboardup_action(e);
	, false); //firefox fix
	document.addEventListener('paste', function (e) 
		_self.paste_auto(e);
	, false); //official paste handler

	//constructor - we ignore security checks here
	this.init = function () 
		pasteCatcher = document.createElement("div");
		pasteCatcher.setAttribute("id", "paste_ff");
		pasteCatcher.setAttribute("contenteditable", "");
		pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;width:10px;margin-left:-20px;';
		document.body.appendChild(pasteCatcher);

		// create an observer instance
		var observer = new MutationObserver(function(mutations) 
			mutations.forEach(function(mutation) 
				if (paste_event_support === true || ctrl_pressed == false || mutation.type != 'childList')
					//we already got data in paste_auto()
					return true;
				

				//if paste handle failed - capture pasted object manually
				if(mutation.addedNodes.length == 1) 
					if (mutation.addedNodes[0].src != undefined) 
						//image
						_self.paste_createImage(mutation.addedNodes[0].src);
					
					//register cleanup after some time.
					setTimeout(function () 
						pasteCatcher.innerHTML = '';
					, 20);
				
			);
		);
		var target = document.getElementById('paste_ff');
		var config =  attributes: true, childList: true, characterData: true ;
		observer.observe(target, config);
	();
	//default paste action
	this.paste_auto = function (e) 
		paste_event_support = false;
		if(pasteCatcher != undefined)
			pasteCatcher.innerHTML = '';
		
		if (e.clipboardData) 
			var items = e.clipboardData.items;
			if (items) 
				paste_event_support = true;
				//access data directly
				for (var i = 0; i < items.length; i++) 
					if (items[i].type.indexOf("image") !== -1) 
						//image
						var blob = items[i].getAsFile();
						var URLObj = window.URL || window.webkitURL;
						var source = URLObj.createObjectURL(blob);
						this.paste_createImage(source);
					
				
				e.preventDefault();
			
			else 
				//wait for DOMSubtreeModified event
				//https://bugzilla.mozilla.org/show_bug.cgi?id=891247
			
		
	;
	//on keyboard press
	this.on_keyboard_action = function (event) 
		k = event.keyCode;
		//ctrl
		if (k == 17 || event.metaKey || event.ctrlKey) 
			if (ctrl_pressed == false)
				ctrl_pressed = true;
		
		//v
		if (k == 86) 
			if (document.activeElement != undefined && document.activeElement.type == 'text') 
				//let user paste into some input
				return false;
			

			if (ctrl_pressed == true && pasteCatcher != undefined)
				pasteCatcher.focus();
			
		
	;
	//on kaybord release
	this.on_keyboardup_action = function (event) 
		//ctrl
		if (event.ctrlKey == false && ctrl_pressed == true) 
			ctrl_pressed = false;
		
		//command
		else if(event.metaKey == false && command_pressed == true)
			command_pressed = false;
			ctrl_pressed = false;
		
	;
	//draw pasted image to canvas
	this.paste_createImage = function (source) 
		var pastedImage = new Image();
		pastedImage.onload = function () 
			if(autoresize == true)
				//resize
				canvas.width = pastedImage.width;
				canvas.height = pastedImage.height;
			
			else
				//clear canvas
				ctx.clearRect(0, 0, canvas.width, canvas.height);
			
			ctx.drawImage(pastedImage, 0, 0);
		;
		pastedImage.src = source;
	;

1. Copy image data into clipboard or press Print Screen <br>
2. Press Ctrl+V (page/iframe must be focused):
<br /><br />
<canvas style="border:1px solid grey;" id="my_canvas"  ></canvas>

【讨论】：

谢谢！真是一种解脱！

2014年4月有没有更简单的解决方案？不区分浏览器？

它应该很简单：jsfiddle.net/KJW4E/222 - 现在仅限 chrome。将来，此示例有可能适用于所有浏览器。遗憾的是，其他浏览器有一些限制，需要绕过。

Ctrl + v 有时在 firefox v-29 浏览器中不起作用。如果我调整浏览器窗口的大小，那么我可以粘贴。 （粘贴事件正在触发）。 firefox 29 浏览器是否有 contenteditable 或 paste 事件与键盘快捷键的问题？

@Jak，我无法在 firefox v29 上重现您的情况。插件，大量的 html 元素，或者无效的代码？

【参考方案2】：

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，clipboardData 适用于所有现代浏览器。我已经在 Chrome 和 Firefox 上进行了测试，它们运行良好。