使用html2canvas无法在下拉图标中正确捕获图像
使用html2canvas无法在下拉图标中正确捕获图像
提问于 2017-01-31 05:48:15
我有以下代码来转换图像使用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>
图像捕获正确，但只有选择图标不会出现properly.how来解决此问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-01-31 06:04:01
这是浏览器默认CSS的一部分，html2canvas无法访问所有内容，也不应该如此(在某些操作系统上可能会泄露隐私信息)。
也许这个选择器可以针对chrome进行调整，因为chrome确实暴露了它的一些shadow selectors，但我甚至不知道它是否在列表中，而且不管怎样，因为这些非标准选择器可能在未来的任何时候改变，这是它在我的FF上的样子：
所以对你来说，最好的办法就是完全从头开始创建下拉菜单。这样，所有的无人机都将显示相同的内容，并且html2canvas将能够对其进行“快照”。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41950504
复制相关文章
相似问题
腾讯云开发者
