HTML2image 网页保存图片并下载到本地，兼容ie浏览器

今天药忘吃喽~ 2022-03-26 03:35 784阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<meta charset="UTF-8" />
    	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
    	<meta name="referrer" content="no-referrer" />
    	<title>html元素转canvas并一键生成png图片(支持img图片元素)</title>
    	
    	<script src="js/html5shiv.js"></script>
    	
    	<script src="js/bluebird.js"></script>
    	<script src="js/jquery-3.3.1.js"></script>
    	
    	<script src="js/html2canvas.js"></script>
    
    	<style>
    		p{
    			font-size: 15px;
    			font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif;
    		}
    		#content{
    			border-radius: 3px;
    		}
    		#btnSave,#Download{
    		    position: absolute;
    		    left: 180px;
    		    top: 540px;
    		    width: 78px;
    		    height: 30px;
    		    background-color: #22b4f6;
    		    color: #fff;
    		    text-align: center;
    		    border-radius: 3px;
    		    border: none;
    		}
    		#Download{
    		    margin-left: 560px;
    		}
    		.tx,.bt{
    			border: 1px solid #999;
    			width: 100px;
    			height: 20px;
    			border-radius: 3px;
    		}
    		.bt{
    			background-color: #22b4f6;
    			color: #fff;
    			text-align: center;
    			border: none;
    		}
    	</style>
    </head>
    
    <body>
    	<div>注意：html2canvas 只能在服务器中抓取img</div>
    	<div id="content" style="width:500px;height:500px;border:1px solid #22b4f6;float:left;text-align:center; background: #fff;">
    		<p><img width="80" height="100" src="http://inspect-report-https.autobole.com/FncQF2hj0TlDhZfyK0myI9z5HA-Q" alt="头像"></p>
    		<p>昵称：马云云</p>
    		<p>技能：前端 + 后端 + 小程序 + webapp</p>
    		<p>语言：html5、php、mysql</p>
    		<p>脚本：javascript</p>
    		<p>框架：vue.js、smarty、thinkphp、MUI、WeUI、Bootstrap</p>
    		<p><input type="text" class="tx" placeholder="微信公众号开发"></p>
    		<p><input type="button" class="bt" value="网站微站开发"></p>
    	</div>
    	<div style="width:60px;height:302px;float:left;text-align:center;line-height:302px;font-size:30px;color:#22b4f6;">==></div>
    	<div style="width:190px;height:302px;float:left;text-align:center;line-height:302px"><img id="images" style="width:300px;height:302px;"
    		 src="" alt=""></div>
    	<button id="btnSave">抓取图片</button>
    
    </body>
    <script>
    	/*生成canvas图形*/
    
    	// 获取按钮id
    	var btnSave = document.getElementById("btnSave");
    	// 获取内容id
    	var content = document.getElementById("content");
    	// 进行canvas生成
    
    	btnSave.onclick = function () {
    
    		html2canvas(content, { useCORS: true, scale: 2 }).then(function (canvas) {
    			var dataUrl = canvas.toDataURL('image/jpeg', 1.0) //image/jpeg 保存文件类型，图片的格式    0-1，表示生成的图片的质量，取值0到1，
    
    			$("#images").attr("src", dataUrl);
    			saveFile(dataUrl, 'richer');
    		});
    	}
    	// // 保存文件函数
    	var saveFile = function (data, filename) {
    		if (myBrowser() == "IE") {   // if browser is IE
    			function dataURLtoBlob(dataurl) {
    				var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    					bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    				while (n--) {
    					u8arr[n] = bstr.charCodeAt(n);
    				}
    				return new Blob([u8arr], { type: mime });
    			}
    			var blob_ = dataURLtoBlob(data); // 用到Blob是因为图片文件过大时，在一部风浏览器上会下载失败，而Blob就不会
    			var url;
    			url = {
    				name: filename, // 图片名称不需要加.png后缀名
    				src: blob_
    			};
    			navigator.msSaveBlob(url.src, url.name + '.png');//filename文件名包括扩展名，下载路径为浏览器默认路径
    		} else {
    			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);
    		}
    	};
    
    
    	function myBrowser() {
    		var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    		var isOpera = userAgent.indexOf("Opera") > -1;
    		if (isOpera) {
    			return "Opera"
    		}; //判断是否Opera浏览器
    		if (userAgent.indexOf("Firefox") > -1) {
    			return "FF";
    		} //判断是否Firefox浏览器
    		if (userAgent.indexOf("Chrome") > -1) {
    			return "Chrome";
    		}
    		if (userAgent.indexOf("Safari") > -1) {
    			return "Safari";
    		} //判断是否Safari浏览器
    		if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
    			return "IE";
    		}; //判断是否IE浏览器
    		if (userAgent.indexOf("Trident") > -1) {
    			return "Edge";
    		} //判断是否Edge浏览器
    	}
    
    </script>
    
    </html>

**demo需要的js 插件库：链接:https://pan.baidu.com/s/1whIBkW0RtASdCo-QwvmXtg  密码:k8m9**