Js实现将html页面或div生成图片

2019-07-05 143 Comments 2,428 Views 1 Times

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>htmltopic</title>  
    <script src="https://cdn.bootcss.com/jquery/2.0.2/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.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;  
        }  
        .test img{
            width: 100%;
        }
    </style>  
</head>  
<body>
    <div class="test">测试</div>  
    <script>  
        //直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊  
        //html2canvas(document.querySelector('div')).then(function(canvas) {  
        //    document.body.appendChild(canvas);  
        //});  
        //创建一个新的canvas  
        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";
        var context = canvas2.getContext("2d");  
        context.scale(2, 2);
        html2canvas(document.querySelector('div'), { canvas: canvas2 }).then(function(canvas) {  
            //document.body.appendChild(canvas);  
            //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载  
            console.log(222);
            $('.test').html('<img src="' + canvas.toDataURL() + '" />');
        });

        //这是另一种写法  
        // $(function () {  
        //     html2canvas($(".test")).then(function (canvas) {  
        //         var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url  
        //         console.log(imgUri);
        //         $('.test').html('<img src="' + imgUri + '" />');
        //     }); 
        // });  
    </script>  
</body>  
</html>