13

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

4

3 回答 3

15

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>
于 2013-11-25T10:38:31.637 回答
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>

输出：

在此处输入图像描述

于 2021-07-29T04:54:56.533 回答
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;
    }});

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

于 2022-02-07T20:38:43.993 回答