master

分支 (2)

管理

管理

master

dev_test

web-test
/
jquery把页面自动生成图片保存.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>htmltopic</title>
		<!-- <script type="text/javascript" src="/h5/js/jquery-1.11.0.min.js"></script> -->
		<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
		<style>
			* {
				margin: 0;
			}

			html {
				background: #fff;
			}

			.test {
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 100px;
				background-color: #fff;
				display: inline-block;
				vertical-align: top;
			}

			canvas {
				margin-right: 5px;
			}

			.down {
				float: left;
				margin: 40px 10px;
			}

			.down2 {
				float: left;
				margin: 40px 30px;
			}
		</style>
	</head>
	<body>
		<div class="test">测试</div>
		<div class="test">测试</div>
		<div class="test">测试</div>
		<div class="test">测试</div>
		<div class="test">测试</div>
		<div><a class="down" href="" download="downImg">生成图片</a>
		</div>
		<!-- <div><a class="down2" href="" download="downImg">生成图片</a></div> -->
		<script>
			//直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊
			//html2canvas(document.querySelector('div')).then(function(canvas) {
			// document.body.appendChild(canvas);
			//});
			//创建一个新的canvas
			var canvas2 = document.createElement("canvas");
			let _canvas = document.querySelector('html');
			//此处可换body，或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('html'), {
				canvas: canvas2
			}).then(function(canvas) {
				//此处html可换body，或div等
				//document.body.appendChild(canvas);
				//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
				document.querySelector(".down").setAttribute('href', canvas.toDataURL());
			});
		</script>
		<script language="javascript">
			//这是另一种写法
			// $(function () {
			// $(".down2").click(function () {
			// html2canvas($(".test")).then(function (canvas) {
			// var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
			// window.location.href = imgUri; // 下载图片
			// });
			//html2canvas($('.tongxingzheng_bg'), {
			// onrendered: function (canvas) {
			// var data = canvas.toDataURL("image/png");//生成的格式
			// //data就是生成的base64码啦
			// alert(data);
			// }
			//});
			// });
			// });
		</script>
	</body>
</html>