Question

我有以下代码使用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">&#xe022;

		      <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>

图像正确捕获，但只有选择图标不正确。如何修复此问题？

Answer 1

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

也许这个确切的可以针对chrome进行调整，因为chrome确实暴露了它的一些shadow selectors，但我甚至不知道它是否在列表中，无论如何，因为非标准这些选择器可以在将来的任何时候改变，这就是我在FF上的样子：

对您来说最好的方法是从头开始创建下拉列表。这样所有UAs都会显示相同的内容，而html2canvas将能够＆＃34;快照＆＃34;它

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

1 个答案: