如何从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，在编辑器字段中单击并粘贴。 我只是打印图像数据; 例如，在真实程序中，我可以将它发送到我的服务器进行进一步处理。

 <script type="text/javascript"> $(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; } } }); }); </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>

在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>

Answer 2

它可能在受信任的站点上。

你看，IE的clipboardData 定义很好。 它仅支持文本或URL。 WScript和ActiveXObject都不能提供更好的剪贴板访问。

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

这只留下了如何检索提取数据的问题。

通常你应该使用一个文件，因为我们已经在使用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>

所以，在这里，您可以在不使用Flash或Java的情况下在IE中获取剪贴板图像。 只要该网站是可信的。 （包括本地文件）

或者您可以使用Flash或Java 。

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

问题描述

2 个解决方案

解决方案1
7 已采纳 2015-03-01 21:58:25

解决方案2
2 2015-02-24 09:38:28

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

问题描述

2 个解决方案

解决方案1 7 已采纳 2015-03-01 21:58:25

解决方案2 2 2015-02-24 09:38:28

解决方案1
7 已采纳 2015-03-01 21:58:25

解决方案2
2 2015-02-24 09:38:28