JS 实现网页截屏

最新推荐文章于 2025-06-21 16:40:57 发布

原创最新推荐文章于 2025-06-21 16:40:57 发布 · 3w 阅读

31 ·

CC 4.0 BY-SA版权

Javascrip 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一款名为html2canvas的插件，它能够轻松实现网页的完整截屏，即使页面高度超出浏览器窗口。只需简单两行代码，即可将网页转换为canvas并保存为图片，适用于各种DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要实现这个功能就必须要介绍一款特别好用的插件: html2canvas
他的用法也特别傻瓜式只需要两行代码就可以实现网页截屏的功能

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

下面看例子
在这里插入图片描述
这里我们的body标签高度是3023, 浏览器肯定是已经出现滚动条了, 我们测试的就是, 是否能实现网页的完整截屏

<html>  
    <head>
    <style>
        .box {
            width: 600px;
            height: 3000px;
            background-color: pink;
        }
    </style>  
        <meta name="layout" content="main">  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
        <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>  
           
    </head>  
    <body>   
        <div class='box'></div>
        <input  type="button" value="button">  
        生成界面如下：  
    </body>  
     <script  type="text/javascript" >  
                document.querySelector('input').on("click", function(event) {  
                        event.preventDefault();  
                        html2canvas(document.body).then(function(canvas) {
                            var dataUrl = canvas.toDataURL();
                            var newImg = document.createElement("img");
                            newImg.src =  dataUrl;
                            document.body.appendChild(newImg);
                        });   
                });   
        </script>  
</html>

实验证明, 完全可以实现网页完整截屏, 此外, 因为这款插件的原理是遍历dom, 因此, 除了可以把body当做参数传入之外, 还可以将你想截取的标签当做参数传入进去, 比如, 当你的body的高度设置100%时, 有的元素因为超出了body的高度而发现只能截取到当前窗口的图片时, 不妨试一下把你需要截取的标签当做参数传入到html2canvas()里, 此外, 这个插件还有许多方便的功能, 有兴趣的可以去官网学习一下,组件化开发中也可以用
附上API传送门: http://html2canvas.hertzen.com/documentation