我有以下代码使用 html2canvas 转换图像。它工作正常，但捕获图像时选择标签图标(向下箭头)没有出现
<!DOCTYPE html>
<html>
<head>
<title>html2canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<style>
button{
display:block;
height:20px;
margin-top:10px;
margin-bottom:10px;
}
.icon-diamond:before {
content: "\e943";
}
</style>
</head>
<body>
<div id="target">
<div style="position:relative;" class="noteclasscontainer" >
<span style="font-size: 60px;" class="glyphicon">
<span style="color:white;font-size: 21px; position: absolute; top: 16px;left:10px;">dd</span>
</span>
</div>
<div style="position:relative;" class="noteclasscontainer">
<select>
<option>1</option>
<option>1</option>
</select>
</div>
</div>
<button onclick="takeScreenShot()">to image</button>
<script>
window.takeScreenShot = function() {
html2canvas(document.getElementById("target"), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width:320,
height:220
});
}
</script>
</body>
</html>图像捕获正确，但只有选择图标未正确显示。如何解决此问题？
最佳答案
这是浏览器默认 CSS 的一部分，html2canvas 无法访问所有内容，也不应该访问(某些操作系统可能会泄露隐私信息)。
也许这个确切的可以针对 chrome 进行调整，因为 chrome 确实暴露了它的一些 shadow selectors ，但我什至不知道它是否在列表中，而且无论如何，由于非标准，这些选择器可能会在将来随时更改，这是我的 FF 上的样子:
因此，最适合您的方法是完全从头开始创建下拉菜单。这样所有的 UA 都将显示相同的内容，并且 html2canvas 将能够对其进行“快照”。
关于javascript - 使用 html2canvas 在下拉图标中无法正确捕获图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41950504/