JS 实现网页截屏

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

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

下面看例子
JS 实现网页截屏_第1张图片
这里我们的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

你可能感兴趣的:(Javascrip)