将html保存为图片并下载 利用html2canvas.js

html2canvas

html2canvas官网
html2canvas 能够实现在用户在浏览器端直接对整个或部分页面进行截屏。 它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。
前段时间刚好使用了html2canvas 在此做下记录

1. 首先在官网下载html2canvas.js 或者 html2canvas.min.js
2. js代码

function canvas() {
	 //获取当前日期
	 var myDate = new Date();
	 //滚动当前元素，进入浏览器的可见区域
     document.getElementById("canvas").scrollIntoView();
	 var canvas = document.getElementById("canvas"); //获取dom
	 var width = canvas.offsetWidth; //dom宽
	 var height = canvas.offsetHeight; //dom高
	 var imgName = '';
	 html2canvas(canvas, {
	        scale: 2,//缩放比例,默认为1
	        allowTaint: false,//是否允许跨域图像污染画布
	        useCORS: true,//是否尝试使用CORS从服务器加载图像
	        width: width,//画布的宽度
	        height: height,//画布的高度
	    }).then((canvas) => {
	        //将canvas转为base64格式
	    	var imgUri = canvas.toDataURL("image/png");//图片格式
	    	// 把url放到我们的a标签中，并得到a标签对象
	        var triggerDownload = $("#saveImg").attr("href", imgUri).attr("download", dateFtt("yyyy-MM-dd hh:mm:ss", myDate) + '.png'); 
	        triggerDownload[0].click(); //模拟点击！
	    });
}

//日期格式转化
function dateFtt(fmt, date) { //author: meizz   
	var o = {
		"M+": date.getMonth() + 1, //月份   
		"d+": date.getDate(), //日   
		"h+": date.getHours(), //小时   
		"m+": date.getMinutes(), //分   
		"s+": date.getSeconds(), //秒   
		"q+": Math.floor((date.getMonth() + 3) / 3), //季度   
		"S": date.getMilliseconds() //毫秒   
	};
	if(/(y+)/.test(fmt))
		fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
	for(var k in o)
		if(new RegExp("(" + k + ")").test(fmt))
			fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	return fmt;
	}

3. html代码

<div id="canvas">
	<center><h1>html2canvas 保存为图片  啦啦啦啦</h1></center>
	<p>&nbsp;</p>
	<p> &nbsp;</p>
	<p> &nbsp;</p>
	<p> &nbsp;</p>
	<p> &nbsp;</p>
	<center><p>这是下边</p></center>
</div>
<a id="saveImg"></a>
<button onclick="canvas()">点击保存将页面保存为图片并下载</button>

需要引入Jquery.js 和 html2canvas.js