search

bubibubing / MBYI

0 stars 1 forks source link

简单的截屏测试 #1

Open bhlll opened 2 years ago

bhlll commented 2 years ago

截屏是可以做的，但需要把需要截屏的element确定好，另外需要处理截屏的布局，考虑放在一个popup里面或者放在页面其他元素的上面

<!DOCTYPE html>
<html>

<body>
  <div>
    <div id="results">
      <h1>测试用户</h1>
      <img src="./img/poster/A.jpg" width="100%" height="100%"/>
    </div>
    <button style="font-size: 24px;" onclick="screenshot()">截屏</button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.9.0/html-to-image.js"></script>
  <script>
    function screenshot() {
      htmlToImage.toPng(document.getElementById("results"))
        .then(function (dataUrl) {
          var img = new Image();
          img.src = dataUrl;
          document.body.appendChild(img);
        });
    }
  </script>
</body>

</html>
bhlll commented 2 years ago

截document.body不可行，试过了