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

哟，很有缘啊

我使用 html2canvas 完成页面截取以及下载功能。
插件在我的网盘内（永久有效，没有就是藏丢了）
链接：https://pan.baidu.com/s/1gLqx9QAaS_TMT9GQ9RHsUg 密码：vxbt
（有些朋友找不到 .js 文件
解压后js在：html2canvasv050\niklasvh-html2canvas-v0.5.0-beta4-0-g83e9b85\niklasvh-html2canvas-83e9b85\dist
）

首先引入我提供的 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);
					}
				})
			}
			

这样就完成了