如何从Internet Explorer中的剪贴板获取base64编码图像？

Question

我搜索了很多但没有找到从剪贴板获取base64编码数据.我可以捕获粘贴事件,然后将事件分配给变量

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

在铬; 我可以得到已粘贴的打印屏幕,就像这样

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编码数据.

Answer 1

它可能......在任何网站上:)但是,没有跨浏览器的方法.

在Chrome和Opera中(很可能是Safari,但我现在无法测试)你可以按照你在问题中写的那样访问剪贴板.事实上,这种方法只是Chromium bag Issue 31426的解决方法.

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

$(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中,您可以使用不同的方法获得相同的结果.幸运的是,这些浏览器将打印屏幕粘贴到编辑器中没有问题,因此您根本不需要访问剪贴板.您只需听取粘贴事件并使用间隔捕获图像已创建但仍未呈现的时间点.然后,您只需获取图像源并清空编辑器.

以下代码实现了此算法.当您在IE或Firefox中运行它时,结果将与上一个示例在Chrome和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>