如何从Internet Explorer的剪贴板中获取base64编码的图像？ [英] How do i get base64 encoded image from clipboard in internet explorer?

问题描述

我进行了很多搜索，但没有发现从剪贴板获取base64编码的数据。我可以捕获粘贴事件，然后将事件分配给变量

I searched a lot but didnt find getting base64 encoded data from clipboard. I can catch paste event and then assign event to variable with this

clipBoard = e.clipboardData ? e.clipboardData : window.clipboardData;

在Chrome中；我可以得到粘贴的打印屏幕，例如

in chrome; i can get print screen which has been paste, like this

if (clipBoard.types[0] == "Files") {
    var blob = clipBoard.items[0].getAsFile();

    var reader = new FileReader();
    reader.onload = function(event){
    console.log(event.target.result);
    }; // data url!
    reader.readAsDataURL(blob);
}

但在11 clipBoard变量中没有 items或 types。我将上载该图像服务器，但没有得到base64编码的数据。

but in ie 11 clipBoard variable has no "items" or "types". i will upload that image server but i didnt get base64 encoded data.

推荐答案

在任何站点上都可能... :) ，没有跨浏览器的方法。

It's possible... on any site :) However, there is no cross-browser method.

在 Chrome和Opera （很可能是 Safari ）中，但我现在无法测试），您可以按照问题中的说明访问剪贴板。实际上，此方法仅适用于Chromium袋问题31426 。

In Chrome and Opera (and most probably Safari, but I cannot test it now) you can access the clipboard as you wrote in your question. In fact, this method is just workaround for the Chromium bag Issue 31426.

以下代码实现了此功能。按Alt-PrtScr，在编辑器字段中单击并粘贴。我只打印图像数据。例如，在真实程序中，我可以将其发送到服务器进行进一步处理。

The following code implements this functionality. Press Alt-PrtScr, click in the editor field and paste. I simply print the image data; in the real program I could send it to my server for the further processing, for example.

$(document).ready(function() {
  $('#editor').on('paste', function(e) {
    var orgEvent = e.originalEvent;
    for (var i = 0; i < orgEvent.clipboardData.items.length; i++) {
      if (orgEvent.clipboardData.items[i].kind == "file" && orgEvent.clipboardData.items[i].type == "image/png") {
        var imageFile = orgEvent.clipboardData.items[i].getAsFile();
        var fileReader = new FileReader();
        fileReader.onloadend = function() {
          $('#result').html(fileReader.result);
        }
        fileReader.readAsDataURL(imageFile);
        break;
      }
    }
  });
});

#editor {
  width: 500px;
  min-height: 40px;
  border: solid 1px gray;
  padding: 4px;
}

#resultcnt {
  width: 100%;
  margin-top: 16px;
}

#result {
  display: block;
  max-width: 90%;
  margin: 16px 0 32px 0;
  font-size: 12px;
  color: blue;
  overflow: visible;
  word-break: break-all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='editor' contenteditable=true></div>
<div id='resultcnt'>Copyed image src:<br />
  <div id='result'></div>
</div>

在 IE 和 Firefox 中，您可以使用不同的方法获得相同的结果。幸运的是，这些浏览器可以将打印屏幕粘贴到编辑器中没有问题，因此您根本不需要访问剪贴板。您只需要监听粘贴事件，并使用时间间隔捕获已创建但仍未渲染图像的时间点。然后，您只需获取图像源并清空编辑器。

In IE and Firefox you can achieve the same result using a different approach. Lucky, these browsers have no problem to paste print screen into editor, so you don't need to access clipboard at all. You just listen to the paste event and using the interval catch the point of time when the image is already created but still not rendered. Then you simply get the image source and empty the editor.

以下代码实现了该算法。当您在IE或Firefox中运行它时，结果将与先前示例在Chrome和Opera中的结果相同：

The following code implements this algorithm. When you run it in IE or Firefox the result will be the same as the previous sample's results in Chrome and Opera:

<script type="text/javascript">
$(document).ready(function() {
  
  $('#editor').on('paste', function (e) {
    $('#editor').empty();
		var waitToPastInterval = setInterval(function () {
			if ($('#editor').children().length > 0) {
				clearInterval(waitToPastInterval);
        $('#result').html($('#editor').find('img')[0].src);
        $('#editor').empty();
			}
		}, 1);  
  });
    
});
</script>

<style  type="text/css">
#editor{
  width: 500px;
  min-height: 40px;
  border: solid 1px gray;
  padding: 4px;
}
#resultcnt{
  width: 100%;
  margin-top: 16px;
}
#result{
  display: block;
  max-width: 90%;
  margin: 16px 0 32px 0;
  font-size: 12px;
  color: blue;
  overflow: visible;
  word-break: break-all;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='editor' contenteditable=true></div>
<div id='resultcnt'>Copyed image src:<br />
  <div id='result'></div>
</div>

这篇关于如何从Internet Explorer的剪贴板中获取base64编码的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！