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

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

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 —

点这里可以跳转到人工智能网站