使用html2canvas下拉图标无法正确捕获图像

我有以下代码使用html2canvas转换图像。它工作正常，但在选择标签图标（向下箭头）不来，当捕捉图像使用html2canvas下拉图标无法正确捕获图像

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>html2canvas</title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
 
\t <style> 
 
\t \t button{ 
 
\t \t \t display:block; 
 
\t \t \t height:20px; 
 
\t \t \t margin-top:10px; 
 
\t \t \t margin-bottom:10px; 
 
\t \t } 
 
\t \t .icon-diamond:before { 
 
\t \t content: "\e943"; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <div id="target"> 
 
\t \t <div style="position:relative;" class="noteclasscontainer" > 
 
\t \t <span style="font-size: 60px;" class="glyphicon">&#xe022; 
 

 
\t \t  <span style="color:white;font-size: 21px; position: absolute; top: 16px;left:10px;">dd</span> 
 
\t \t </span> 
 
\t \t </div> 
 
\t \t <div style="position:relative;" class="noteclasscontainer"> 
 
\t \t <select> 
 
\t \t <option>1</option> 
 
\t \t <option>1</option> 
 
\t \t </select> 
 
\t \t </div> 
 
\t </div> 
 
\t <button onclick="takeScreenShot()">to image</button> 
 
\t <script> 
 
\t \t window.takeScreenShot = function() { 
 
\t \t  html2canvas(document.getElementById("target"), { 
 
\t \t   onrendered: function (canvas) { 
 
\t \t    document.body.appendChild(canvas); 
 
\t \t   }, 
 
\t \t   width:320, 
 
\t \t   height:220 
 
\t \t  }); 
 
\t \t } 
 
\t </script> 
 
</body> 
 
</html>

图像是捕获正确，但只有选择的图标是不是来properly.how修复这个问题？

来源

2017-01-31 Sai Rajesh

这是浏览器默认CSS的一部分，html2canvas无法访问所有内容，并且不应该（某些操作系统可能泄露隐私信息）。

也许这个确切的一个可以调整为铬，因为铬确实暴露了它的一些shadow selectors，但我甚至不知道它是否在列表中，并且无论如何，因为这些选择器可能会在任何时候改变在未来的时间，这里是如何看起来像我的FF：

所以最适合你的，是完全从头创建的下拉。这样，所有的UA都会显示相同的内容，并且html2canvas将能够“快照”它。

来源

2017-01-31 06:04:01 Kaiido

好的，谢谢... –

使用html2canvas下拉图标无法正确捕获图像

回答

相关问题