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

【问题标题】：How do i get base64 encoded image from clipboard in internet explorer?如何从 Internet Explorer 的剪贴板中获取 base64 编码的图像？
【发布时间】：2019-09-24 16:39:12
【问题描述】：

我搜索了很多，但没有找到从剪贴板获取 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);
}

但在 ie 11 中，clipBoard 变量没有“项目”或“类型”。我将上传该图像服务器，但我没有得到 base64 编码数据。

【问题讨论】：

顺便说一句，如果您需要 url 最终结果，您应该更喜欢 URL.createObject() 而不是 FileReader()；它比 FileReader() 更快、更简单（没有回调），并且可以处理更大的文件。
我不太懂js。你能提供一些示例代码吗？

标签： javascript clipboard internet-explorer-11

【解决方案1】：

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

在 Chrome 和 Opera（很可能是 Safari，但我现在无法测试）中，您可以按照您在问题中所写的方式访问剪贴板。其实这个方法只是Chromium包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>

【讨论】：

是的，我已经以非常相似的方式解决了这个问题。在 chrome 中获取图像不是问题。但是在ie中我做了一些技巧。首先定义 css 规则来隐藏 contenteditable div 中的图像。然后用 jquery 查找图片并获取 src 参数值，然后发送服务器。
我不时使用这个交互式示例来快速获取 base64 编码文件。

【解决方案2】：

有可能……在受信任的网站上。

你看，IE 的剪贴板数据is pretty well defined。它仅支持文本或 url。 WScript 和 ActiveXObject 都不能提供更好的剪贴板访问。

但是您可以使用PowerShell 访问.Net，包括Clipboard，它有一个不错的小方法GetImage()。通过WSH 调用PowerShell 很简单，Base64 encoding 也是如此。

只剩下如何检索提取数据的问题。

通常您应该use a file，因为我们已经在使用 ActiveX。但是为了演示的目的，这里我将使用注册表。这样就省去了创建FileSystemObject 和检测临时文件夹的麻烦。

下面的 html 将抓取剪贴板上的任何图像，采用 base64 格式，并将其放入 <img>。

<!DOCTYPE html><meta charset="utf-8"><img width=500 /><script>
try {
   var doc = document, body = doc.body, shell = new ActiveXObject('WScript.shell');
   var key = 'HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer';
   var cmd = "function Get-ClipImg {Add-Type -AssemblyName 'System.Windows.Forms';"+
      "$s=New-Object System.IO.MemoryStream;"+
      "[System.Windows.Forms.Clipboard]::GetImage().Save($s,[System.Drawing.Imaging.ImageFormat]::Png);"+
      "[Microsoft.Win32.Registry]::SetValue('"+key+"','tmp_clipboard',[System.Convert]::ToBase64String($s.ToArray()))"+
   "} Get-ClipImg";
   shell.run( 'powershell -Command "'+cmd+'"', 0, true );
   var data = shell.RegRead( key + '\\tmp_clipboard' );
   shell.RegDelete( key + '\\tmp_clipboard' );
   if ( ! data.trim() ) body.textContent = 'Clipboard has no image';
   else doc.querySelector('img').src = 'data:image/png;base64,' + data;
} catch ( err ) { body.textContent = err; }
</script>

所以，这就是一种在 IE 中获取剪贴板图像的方法，无需使用 Flash 或 Java。只要网站是可信的。（包括本地文件）

或者你可以use Flash or Java。

【讨论】：

感谢回复，但我不能强制用户将我的网站添加到他们信任的网站列表中。
@MC_delta_T 那么唯一的选择就是使用 flash、java 或其他插件。由于 IE 11 很可能是最后一个 IE，可以肯定地说 IE 永远不会原生支持您想要的选项。