JS 实现网页截屏

最新推荐文章于 2024-09-23 17:30:07 发布

IsQtion

最新推荐文章于 2024-09-23 17:30:07 发布

阅读量3w

点赞数 3

分类专栏： Javascrip

本文链接：https://blog.csdn.net/Lucky_Q/article/details/83658131

版权

Javascrip 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

要实现这个功能就必须要介绍一款特别好用的插件: 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