html2canvas将HTML页面转为图片并保存

提供一个下载html2canvas的地址https://github.com/niklasvh/html2canvas/releases

引入后,用法可以参考如下:

$("#toImg").click(function(){
	html2canvas($("#wrapper")[0]).then(function(canvas){
		var imgUri = canvas.toDataURL();
		$("body").append('保存图片');
	})
})

html代码就不粘贴了,wrapper是一个大div,要转为图片的html都写在里面,注意这里需要一个DOM对象,用jQuery的话转一下就行了。

直接添加一个a标签,href就是转为图片的地址,给a标签写上download属性,属性值是保存在本地时图片的名字,写了这个属性点击a标签的时候才可以下载。

html2canvas的具体用法,参数配置可以看http://html2canvas.hertzen.com/documentation

你可能感兴趣的:(JavaScript)