使用 Javascript onpaste 粘贴图像不适用于 IE，使用 chrome答案

【问题标题】：Paste Image using Javascript onpaste is not working for IE, working with chrome使用 Javascript onpaste 粘贴图像不适用于 IE，使用 chrome
【发布时间】：2016-10-19 12:43:13
【问题描述】：

我正在尝试通过用户将 Ctrl+V 粘贴到 div #pasteImageDiv 来保存图像/屏幕截图。它可以在 Chrome 上正常工作，但不能在 IE 上工作。

我正在使用 IE10。

到目前为止，我发现如果我将任何文本粘贴到 div #pasteImageDiv，它会正确捕获 onpaste 事件，即使在 IE 中也是如此。但是如果我粘贴图像而不是文本，它甚至不会捕获onpaste（IE 甚至不会进入处理onpaste 事件的函数）。

document.getElementById('pasteImageDiv').onpaste = function (event) {

无论我粘贴文本字符串还是图像，Chrome 都运行良好。我希望你明白我面临什么样的问题。不过，如果需要任何其他信息，请告诉我。

	$('#pasteImageHere, #pasteImageDiv').click(function(e){ //on paste image button click
			e.preventDefault();
			$('#hideOnPaste').hide();
			//document.getElementById('pasteImageDiv').click();
		document.getElementById('pasteImageDiv').style.backgroundColor = "#F1F1F1";
		document.getElementById('pasteImageDiv').onpaste = function (event) {
				$('#hideOnPaste').hide();
				//console.log(event.clipboardData.getData('image/png'));
			  // 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!
				  var elem = document.createElement("img");
				  elem.setAttribute("id", "pastedImage");
				  elem.setAttribute("height", "200");
				  elem.setAttribute("width", "300");
				  document.getElementById("pasteImageDiv").appendChild(elem);
				  document.getElementById("pastedImage").src = event.target.result;
				  document.getElementById('inputImageData').value = event.target.result;
				  console.log($('#inputImageData').val());
				  $('#pastedImage').css('width', '300px');
				  $('#pastedImage').css('height', '200px');
				  document.getElementById("pastedImage").style.height = '200px';
				};
				reader.readAsDataURL(blob);
				$('#removePastedImage').show();
			  }
			  
			}
	
		});

【问题讨论】：

IE10 不支持 AFAIK
在我看来这还不够基本，无法提供给 IE 并希望它有效。
我假设你在这里谈论 contenteditable - 如果不是忽略我。我刚刚尝试过，Ctrl-V 适用于 IE7-11。 Edge 和 Chrome 等仅接受 Ctrl-V 用于在文档内粘贴 - 要粘贴外部副本，您需要右键单击并从上下文菜单中选择粘贴（如果可用）。
我让它在 Edge 上工作，在 IE 11 上用了一点小技巧。在 IE 10 上仍然不能工作。

标签： javascript jquery cross-browser internet-explorer-10 onpaste

【解决方案1】：

IE11 新增图片粘贴支持：

从 IE11 开始，从剪贴板粘贴的图像默认采用 base64 编码。用户现在可以轻松安全地将图像从本地文件系统复制并粘贴到网站的内容可编辑区域。 在 IE11 之前，将本地图像粘贴到实时网站上（跨安全区域）会导致图像图标损坏，这是一种防止本地文件访问的安全措施。

IE11 是第一个支持直接从剪贴板粘贴图像（例如，从照片编辑软件或 PrintScreen）和粘贴包含本地图像的 HTML（例如，从 Microsoft Office 等将图像临时存储在本地路径）。 DataURI 或 Blob 均可用于对这些图像进行编码。

参考文献

【讨论】：