利用html2canvas将html页面截图 js

在截图页面引入html2canvas.js

下载地址: http://www.bootcdn.cn/html2canvas/

 

demo页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>htmltopic</title>
    <script type="text/javascript" src="~/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="~/js/html2canvas.min.js"></script>
    <style>
        * {
            margin: 0;
        }
 
 
        .test {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: #87CEEB;
            display: inline-block;
            vertical-align: top;
        }
 
 
        canvas {
            margin-right: 5px;
        }
 
 
        .down {
            float: left;
            margin: 40px 10px;
        }
        .down2 {
            float: left;
            margin: 40px 30px;
        }
    </style>
</head>
<body>
    <div class="test">测试</div>
    <div>
         <a class="down" href="" download="downImg">下载</a>
    </div>
</body>
</html>

 

js方法：

function SetCanvas() {

    //滚动条置顶, 避免截图不全
    window.pageYoffset = 0;
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;

    //定义画布容器
    var canvas2 = document.createElement("canvas");
    let _canvas = document.querySelector('div');//画布大小
    var w = parseInt(window.getComputedStyle(_canvas).width);
    var h = parseInt(window.getComputedStyle(_canvas).height);
    //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
    canvas2.width = w * 2;
    canvas2.height = h * 2;
    canvas2.style.width = w + "px";
    canvas2.style.height = h + "px";
    //可以按照自己的需求，对context的参数修改,translate指的是偏移量    
    //  context.translate(0,0);
    var context = canvas2.getContext("2d");
    context.scale(2, 2);
    html2canvas(document.querySelector('.gMain'), { canvas: canvas2 }).then(function (canvas) {
        //document.body.appendChild(canvas);
        //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
        document.querySelector(".down").setAttribute('href', canvas.toDataURL());
    });
}

　　

html2canvas根据body进行截图，若内容高度高于body时，

页面很长（伴有滚动条），只能截取到当前区域，会出现截图不全的问题。

使用以下方法：
window.pageYoffset = 0;

document.documentElement.scrollTop = 0;

document.body.scrollTop = 0;

在生成截图前，把滚动条置顶即可避免截图不全！！！

 

参考：https://blog.csdn.net/huwei2003/article/details/79761580

　　   https://www.cnblogs.com/xingzoudecd/p/12603632.html

 

posted @ 2020-05-21 09:53  夏目-D  阅读(490)  评论(0)    收藏  举报