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

<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8">
        <title>htmltopic</title>
        <!-- <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> -->
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <!-- <script type="text/javascript" src="js/html2canvas.js"></script> -->
        <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
        <style>
                * {
     
                        margin: 0;
                }


                .test {
     
                        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">
                <form action="" class="table">
                        <div class="header">
                                <div>学号</div>
                                <div>学院</div>
                                <div>专业</div>
                                <div>班级</div>
                                <div>年级</div>
                                <div>/</div>
                                <div>姓名</div>
                                <div>性别</div>
                                <div>个人联系电话</div>
                                <div>短号</div>
                                <div>家庭详细地址</div>
                                <div>家庭联系电话</div>
                                <div>资助手续办理情况描述</div>
                                <div>经办人</div>
                                <div>签名时间</div>
                                <div>确认签名</div>
                                <p class="cl"></p>
                        </div>
                        <div class="body">
                                <div>1</div>
                                <div>2</div>
                                <div>3</div>
                                <div>4</div>
                                <div>5</div>
                                <div>6</div>
                                <div>7</div>
                                <div>8</div>
                                <div>9</div>
                                <div>10</div>
                                <div>11</div>
                                <div>12</div>
                                <div>13</div>
                                <div>14</div>
                                <div>15</div>
                                <div>16</div>
                                <p class="cl"></p>
                        </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('.test');
                                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('.test'), {
      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>

采坑记:html2canvas.js要采用0.5.0版本的,0.4.0的版本会直接报错,无法进行。
第一次弄这个,html2canvas.js的下载地址
点击下载可以直接下载图片啦!
感谢转载参考的两篇文章:https://blog.csdn.net/huwei2003/article/details/79761580
另外一篇也是参考这个博主的,谢谢啦!

你可能感兴趣的:(js学习总结)