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

╰+攻爆jí腚メ 2022-05-28 06:12 228阅读 0赞

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

今天要分享的是用html2canvas根据自己的需求生成截图，并且修复html2canvas截图模糊，以及绕过服务器图片保存至本地。　　  
  
只需要短短的几行代码，就能根据所需的dom截图，是不是很方便，但是生成的图片模糊  
//直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊  
            html2canvas(document.querySelector('div')).then(function(canvas) \{  
                    document.body.appendChild(canvas);  
             \})  
　　  
   常见的解决方案是，生成一个多倍的画布，然后将其放在较小的容器内，这样就解决了截屏模糊的尴尬。  
  
 还有一个问题是怎么将图片绕过服务器保存至本地，canvas有个toDataURL的方法，然后a标签有个download属性，感觉简直天造之和。当然微信中屏蔽下载，可以借助微信的webview中的一个内置规则，只要是a标签(不含href属性)里面嵌套Img的，可以正常呼出保存至手机和分享给朋友的菜单栏。  
  
以下是简单的demo, html2canvas.min.js 下载地址: http://www.bootcdn.cn/html2canvas/

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>htmltopic</title>
        <script type="text/javascript" src="/h5/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>
        <div><a class="down2" href="" download="downImg">下载2</a></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";
        //可以按照自己的需求，对context的参数修改,translate指的是偏移量
        //  var context = canvas.getContext("2d");
        //  context.translate(0,0);
        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属性，直接下载，绕过上传服务器再下载
            document.querySelector(".down").setAttribute('href', canvas.toDataURL());
        });
    </script>
    
    
    <script language="javascript">
        //这是另一种写法
        $(function () {
            $(".down2").click(function () {
                html2canvas($(".test")).then(function (canvas) {
                    var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
                    window.location.href = imgUri; // 下载图片
                });
    
    
                //html2canvas($('.tongxingzheng_bg'), {
                //    onrendered: function (canvas) {
                //        var data = canvas.toDataURL("image/png");//生成的格式
                //        //data就是生成的base64码啦
                //        alert(data);
                //    }
                //});
            });
        });
    </script>
    </body>
    </html>

\--- end ---