Question

我试图使用JavaScript / JQuery拍摄网页的屏幕截图。能否请您解释一下我需要遵循的代码步骤？

Answer 1

html2canvas2 JavaScript实用程序适合拍摄网页的屏幕截图。您必须使用三个JavaScript库：

 1.jquery-1.10.2.min.js
 2.html2canvas.js
 3.jquery.plugin.html2canvas.js

然后调用函数capture（），它将在新窗口中为您提供基于HTML5画布的屏幕截图。它还会生成image64的base64data值。它仅适用于支持HTML5画布的浏览器。

    <script type="text/javascript">
    function capture() {
            html2canvas($('body'),{
                onrendered: function (canvas) {                     
                            var imgString = canvas.toDataURL("image/png");
                            window.open(imgString);                  
            }
        });
   </script>

Answer 2

这里，使用 html2canvas 截取网页。

示例

<!doctype html>
<html>
 <head>
  <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
 </head>
 <body>
  <h1>Take screenshot of webpage with html2canvas</h1>
  <div class="container" id='container'>
      <h1>Devnote is a tutorial.</h1>
  </div>
  <input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>

  <!-- Script -->
  <script type='text/javascript'>
    function screenshot() {
        html2canvas(document.body).then(function(canvas) {
            document.body.appendChild(canvas);
        });
    }
  </script>

 </body>
</html>

输出：

如何使用Javascript / JQuery拍摄当前网页的屏幕截图？

2 个答案: