当页面往下滚动后html2canvas截图不完整

js yekong 579℃

vue外包的h5页面,客户要求点击按钮可以将整个页面生成一张图片。这里我们通过html2canvas方法来实现网页截图。虽然实现了,但是有个问题,就是当页面往下滚动后,上面看不到的部分截图的时候会丢失无法截取到。

当页面往下滚动后html2canvas截图不完整

那么如何处理呢?页面往下滚动后导致无法截取到上面的内容,那么我们在截图前,先让页面滚动到顶部这样截图就完整了。
滚动到顶部

document.documentElement.scrollTop = 0
window.pageYOffset = 0
document.body.scrollTop = 0

实现代码

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script>
    document.getElementById("export").addEventListener('click', function () {
        //创建一个新的canvas
        document.documentElement.scrollTop = 0
        window.pageYOffset = 0
        document.body.scrollTop = 0
        var canvas2 = document.createElement("canvas");
        let canvasObj = document.querySelector('.viewport');
        var w = parseInt(window.getComputedStyle(canvasObj).width);   //获取目标元素的宽高
        var h = parseInt(window.getComputedStyle(canvasObj).height);
        //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
        var context = canvas2.getContext("2d");
        context.scale(2, 2);
        canvas2.width = w;
        canvas2.height = h;
        html2canvas(document.querySelector('.viewport'), {canvas: canvas2}).then(function (canvas) {
            let image = new Image();
            image.className = "newImg"
            image.src = canvas.toDataURL("image/png");
            document.body.appendChild(image)
        });
    });

</script>

演示地址:

当页面往下滚动后html2canvas截图不完整解决实例

喜欢 (0)