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

Question

我有以下代码使用 html2canvas 转换图像。它工作正常，但捕获图像时 select 标签图标（向下箭头）没有出现

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

图像捕捉正确，但只有 select 图标没有出现 properly.how 来解决这个问题？

Answer 1

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

也许可以为 chrome 调整这个确切的，因为 chrome 确实公开了它的一些 shadow selectors，但我什至不知道它是否在列表中，无论如何，因为 non-standards 这些选择器可能会在未来的任何时候改变，这是我的 FF 上的样子：

因此，最适合您的方法是完全从头开始创建下拉菜单。这样所有的UA都会显示一样，html2canvas就能"snapshot"了。

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

Image is not capturing correctly in dropdown icon using html2canvas

javascript

css

html2canvas