js截图及绕过服务器图片保存至本地(html2canvas)

  今天要分享的是用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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<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: right;
   				 margin: 40px 10px;
			}
		</style>
	</head>
	<body>
	<a class="down" href="" download="downImg">下载</a>
	
	<div class="test">测试</div>
	
	<script src="js/html2canvas.js"></script>
<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>
	</body>
</html>

  

 

 

posted @ 2017-07-07 19:45  无敌小坑笔  阅读(15667)  评论(4编辑  收藏