Вставить изображение с помощью Javascript onpaste не работает для IE, работая с хромом

2 sssuri [2016-06-17 18:47:00]

Я пытаюсь сохранить изображение/скриншот через пасту Ctrl + V в div #pasteImageDiv пользователем. Он отлично работает с Chrome, но не работает с IE.

Я использую IE10.

До сих пор то, что я смог найти, заключается в том, что если я вставляю какой-либо текст в div #pasteImageDiv, он поймает событие onpaste должным образом, даже в IE. Но если я onpaste образ вместо текста, он даже не поймает 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();
			  }
			  
			}
	
		});

javascript jquery cross-browser internet-explorer-10


1 ответ


1 Paul Sweatte [2016-09-14 00:36:00]

Поддержка изображений в IE11 была добавлена:

Начиная с IE11, изображения, вставленные из буфера обмена, по умолчанию основаны на base64. Теперь пользователи могут легко и безопасно копировать и вставлять изображения из своей локальной файловой системы в контентные регионы веб-сайта. До IE11 вставка локального изображения на веб-сайте в реальном времени (в зонах безопасности) приводила к сломанному значку изображения в качестве меры безопасности для предотвращения доступа к локальному файлу.

IE11 - это первый браузер, который поддерживает как вставку изображений непосредственно из буфера обмена (например, из программного обеспечения для редактирования фотографий, так и из PrintScreen) и вставки HTML, который включает в себя локальные изображения (например, из таких приложений, как Microsoft Office, которые временно хранят изображения на локальных путях), Для кодирования этих изображений можно использовать DataURI или Blob.

Рекомендации