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

Question

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

javascriptwebpage-screenshot

13

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

- user2682340

1

可能是使用HTML5/Canvas/JavaScript进行屏幕截图的重复问题。 - Zach Saucier

3个回答

0

在这里，使用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>

输出：

- Fefar Ravi

0

如果您想要真实的屏幕截图而不是将HTML转换为图像，那么您可以尝试我的新JS库：screenshot.js。

它能够拍摄真实的屏幕截图。

您可以加载该脚本：

<script src="https://raw.githubusercontent.com/amiad/screenshot.js/master/screenshot.js"></script>

并且进行截图：

new Screenshot({success: img => {
        // callback function
        myimage = img;
    }});

你可以在项目页面阅读更多选项。

- amiad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Edward · Accepted Answer

html2canvas2 JavaScript工具适用于网页截图。您需要使用三个JavaScript库：

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

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

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