html页面点击生成图片并可以下载图片

-----最近一位朋友的项目有个需求，是用户可以在项目中点击，让html页面生成图片，并且可以导出下载。我就做了一个简单的例子，有同样需求或者感兴趣的同行可以看看
//HtML


<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>菜鸟老五</title>
		<link rel="stylesheet" href="css/mui.css" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<!-- html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来 -->
		<script src="js/html2canvas.min.js"></script>
		<!-- 将canvas图片保存成图片 -->
		<script src="js/canvas2image.js"></script>
		<script src="js/base64.js"></script>
		<style>
			/*清除padding-margin*/
			
			body {
				margin: 0 auto;
				padding: 0;
			}
			/*主体外层视图*/
			
			#content {
				width: 100%;
				height: 100px;
				position: relative;
				background-color: #fff;
			}
			/*左头像*/
			
			.list_img {
				position: absolute;
				width: 60px;
				height: 60px;
				top: 25px;
				left: 15px;
				border-radius: 50%;
			}
			/*左边消息气泡*/
			
			.left_name {
				color: green;
				border: 1px solid gray;
				border-radius: 3px;
				text-align: center;
				position: absolute;
				top: 35px;
				left: 100px;
				padding: 5px;
			}
			/*底部视图*/
			
			.sumits_view {
				position: fixed;
				width: 100%;
				height: 50px;
				line-height: 50px;
				bottom: 0;
				background-color: #333333;
			}
			
			/*点击下载*/
			#Download {
				position: absolute;
				width: 50%;
				height: 50px;
				border: 0;
				border-radius: 0;
				right: 0px;
				background-color: #2AC845;
			}
			/*点击转化*/
			#btnSave {
				position: absolute;
				left: 0;
				border: 0;
				border-radius: 0;
				
				width: 50%;
				display: inline-block;
				height: 50px;
				background-color: #007AFF;
			}
		</style>
	</head>

	<body>
		<!--标题栏-->
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">首页</h1>
		</header>
		<!--主体-->
		<div class="mui-content">

			<!--内容-->
			<div id="content">
				<!--左边头像-->
				<img class="list_img" src="img/list_img.png" />
				<!--左边消息-->
				<span class="left_name">He</span>
			</div>

<!--这里的div[images]指的是转化图片显示位置-->
			<div id="images"></div>

			<!--底部-->
			<div class="sumits_view">
				<!--左边button点击-->
				<button id="btnSave">点击转换成图片</button>
				<!--右边button点击-->
				<button id="Download">点击下载</button>
			</div>

		</div>

	</body>
	<script>
		/*生成canvas图形*/

		// 获取按钮id
		var btnSave = document.getElementById("btnSave");
		// 获取内容id
		var content = document.getElementById("content");
		// 进行canvas生成
		btnSave.onclick = function() {
			html2canvas(content, {
				onrendered: function(canvas) {
					//添加属性
					canvas.setAttribute('id', 'thecanvas');
					//读取属性值
					// var value= canvas.getAttribute('id');
					document.getElementById('images').appendChild(canvas);
				}
			});
		}
	</script>
	<script>
		/*
		 * 说明
		 * html2canvas，目前该插件还在开发中，暂不支持带有图片的div转换。图片会被忽略
		 * 对一些的默认样式的支持可能不那么尽如人意，建议自己定义样式,
		 * 不支持iframe
		 * 不支持跨域图片
		 * 不能在浏览器插件中使用
		 * 部分浏览器上不支持SVG图片
		 * 不支持Flash
		 * 不支持古代浏览器和IE，如果你想确认是否支持某个浏览器，可以用它访问 http://deerface.sinaapp.com/ 试试
		 */
		var Download = document.getElementById("Download");
		Download.onclick = function() {
			var oCanvas = document.getElementById("thecanvas");

			/*自动保存为png*/
			// 获取图片资源
			var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
			saveFile(img_data1, 'abc');

			/*下面的为原生的保存，不带格式名*/
			// 这将会提示用户保存PNG图片
			// Canvas2Image.saveAsPNG(oCanvas);
		}
		// 保存文件函数
		var saveFile = function(data, filename) {
			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);
		};
	</script>

</html>
html页面点击生成图片并可以下载图片

猜你喜欢
