js截取页面内容、生成png（包括非可视区域）、下载到本地

哟，很有缘啊

我使用html2canvas；完成页面截取以及下载功能。
插件在我的网盘内（永久有效，没有就是藏丢了）
链接：https://pan.baidu.com/s/1gLqx9QAaS_TMT9GQ9RHsUg 密码：vxbt

首先引入我提供的 js,(自己喜欢的也行。)

<script type="text/javascript" charset="UTF-8" src="./js/printer/html2canvas.min.js"></script>

然后是 H5 ;

// 这个div 里面的内容就是我要打印的东西。
// 请注意：一定要用position：absolute 目的是将这个div 脱离文档流,目標是可截取非可视区域的内容
<div id="print" name="print" style="background-color: #FF1493;width: 711px; position: absolute;top: 100px;">

好！开始撸 js

            function html2canvas_2() {
            //获取截取区域的高度和宽度
                var TargetNode = document.querySelector("#print")
                var h = $(TargetNode).height()
                var w = $(TargetNode).width()
            //设置 canvas 画布的宽高 是容器搞度 2倍、为了是图片清晰
                /**1.创建画布
                 * 2.设置canvas 大小
                 * */
                var canvas = document.createElement("canvas");
                //这是画布整体的大小
                canvas.width = w * 2;
                canvas.height = h * 2;
                //这是绘画范围的大小
                canvas.style.width = w + "px";
                canvas.style.height = h + "px";
                canvas.style.color = "chartreuse"
                //画布缩小，将图片发大两倍 
                var context = canvas.getContext("2d")
                context.scale(2,2)
                // 再说一次 要截取全部，必须要脱离文档流 position: absolute; 否则只能截取到看到的部分。

                html2canvas($("#print"), { 
//                  allowTaint: true,
//                  taintTest: false,
//                  canvas: canvas,
                    onrendered: function(canvas) {
                        // 图片导出为 png 格式
                        var type = 'png';
                        var imgData = canvas.toDataURL(type);
                        var _fixType = function(type) {
                            type = type.toLowerCase().replace(/jpg/i, 'jpeg');
                            var r = type.match(/png|jpeg|bmp|gif/)[0];
                            return 'image/' + r;
                        };

                        // png 替换 mime type 为了下载
                        imgData = imgData.replace(_fixType(type), 'image/octet-stream');
                        /**
                         * 在本地进行文件保存
                         * @param  {String} data     要保存到本地的图片数据
                         * @param  {String} filename 文件名
                         */
                        var saveFile = function(data, filename) {
                        //创建一个命名空间。是 a 标签
                        var save_link =document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); 
                            save_link.href = data;
                            save_link.download = filename;
                            var event = document.createEvent('MouseEvents');
                            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                            save_link.dispatchEvent(event);
                        };
                        // 下载后的问题名
                        var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
                        // download
                        saveFile(imgData, filename);
                    }
                })
            }

这样就完成了,