html2canvas实现多图下载

完整代码
链接:https://pan.baidu.com/s/1IRj0auNm5FzfwPYM-ApNmA
提取码:kmgw
html2canvas实现多图下载

实现思路及踩过的坑
1.将图片样式到downloadImg-box中,并在后面遍历;
2.依次下载,等第一张图片执行完下载后再下载下一张【因为不这么搞,当图片下载量比较大而图片又是几m的时候就凉】
3.用户中360浏览器用户基数比较大,原有的功能是通过base64下载的图片,360浏览器不可以,就将base64转为图片后再下载;
4.imgName是图片名,你可以根据实际情况去改变后面这个拼接;
5.加了一层遮罩,显示下载进度【不然下载过程中样式是真的鬼畜】
6.代码中较多引用了网上的,如有原作者看到,可以回复我,我将你链接添加进来

<html>
	<meta charset="utf-8">

	<head>
		<link rel="stylesheet" type="text/css" href="download.css"/>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<ul class="downloadImg-box">
			
		</ul>
		<!--遮罩-->
		<div class="download-mask">
			<div class="loader">
				<div class="mt30 loader-tip">图片正在下载中,请勿关闭浏览器</div>
				<div class="mt5">
					<font class="loader-num mr10">1</font>/
					<font class="loader-all">0</font>
				</div>
			</div>
		</div>
		
	</body>
	<script>
		for(var i = 0;i<2;i++){
			$('.downloadImg-box').append(
				'<li class="downloadImg-bg" id="li'+i+'">'+
				'	<div class="tac downloadImg-tit">'+
				'		<b>合格证书</b>'+
				'	</div>'+
				'	<div class="download-box flex-row">'+
				'		<div class="download-user">'+
				'			<div class="download-picture">'+
				'				<img src="download-picture-1.jpg"/>'+
				'			</div>'+
				'			<div class="download-line">'+
				'				<div class="download-line-name">'+
				'					工作单位:'+
				'				</div>'+
				'				<div class="download-line-word">'+
				'					宁夏某个有限公司'+
				'				</div>'+
				'			</div>'+
				'			<div class="download-line">'+
				'				<div class="download-line-name">'+
				'					身份证号:'+
				'				</div>'+
				'				<div class="download-line-word download-idCard">'+
				'				640321111111111111'+
				'				</div>'+
				'			</div>'+
				'			<div class="download-line">'+
				'				<div class="download-line-name">'+
				'					证书编号:'+
				'				</div>'+
				'				<div class="download-line-word">'+
				'				xx编号	'+
				'				</div>'+
				'			</div>'+
				'		</div>'+
				'		<div class="download-content flex-1">'+
				'			<div class="download-content-show">'+
				'				<font class="download-name">波波</font>同志于'+
				'				<font>2020</font>年'+
				'				<font>6</font>月'+
				'				<font>6</font>日至'+
				'				<font>7</font>月'+
				'				<font>6</font>日,参加“软件技能提升”培训班学习,共完成'+
				'				<font>60</font>学时学习。经考试成绩合格,特发此证。'+
				'			</div>'+
				'			<div class="download-content-seal">'+
				'				<div>培训单位(盖章)</div>'+
				'				<div class="mr40">'+
				'					<font>2020</font>年'+
				'					<font>6</font>月'+
				'					<font>6</font>日'+
				'				</div>'+
				'			</div>'+
				'		</div>'+
				'	</div>'+
				'</li>'
			);
		}
		
		downImg();
		
		function downImg() {
		var downloadNum = 1; //图片从第二张开始下载
		var imgLength = $('.downloadImg-box li').length; //图片张数
		doScreenShot(0);
		$('.loader-all').html(imgLength);
		$('.downloadImg-box').show();
		function doScreenShot(num) { //点击截图,点击按钮后从第一张开始下载,下载完后重复执行这个方法
			html2canvas($("#li" + num), {
				onrendered : function(canvas) {
					canvas.id = "mycanvas";
					var mainwh = $("#li" + num).width();
					var mainhg = $("#li" + num).height();
					var imgName = ($("#li" + num).find('.download-name').html() + "--" + $("#li" + num).find('.download-idCard').html()); //这个是当前的姓名+身份证号拼接,并向download()传参,改变img文件名
					var img = convertCanvasToImage(canvas);
					img.onload = function() {
						img.onload = null;
						canvas = convertImageToCanvas(img, 0, 0, 2185, 1535); //设置图片大小和位置
						img.src = convertCanvasToImage(canvas).src;
						$(img).css({
							background : "#fff"
						});
						//调用下载方法 
						if (browserIsIe()) { //假如是ie浏览器
							DownLoadReportIMG(img.src, imgName);
							$('.loader-num').html(num + 1);
							if ((num + 1) == imgLength) {
								$('.loader-tip').html('下载已完成,可前往浏览器保存地址查看下载证书');
							}
						} else {
							download(img.src, imgName);
							$('.loader-num').html(num + 1);
							if ((num + 1) == imgLength) {
								$('.loader-tip').html('下载已完成,可前往浏览器保存地址查看下载证书');
							}
						}
					}
				}
			});
			
		}

		function convertCanvasToImage(canvas) { //绘制显示图片 
			var image = new Image();
			image.src = canvas.toDataURL("image/png"); //获得图片地址
			return image;
		}

		function convertImageToCanvas(image, startX, startY, width, height) { //生成canvas元素,相当于做了一个装相片的框架
			var canvas = document.createElement("canvas");
			canvas.width = width;
			canvas.height = height;
			canvas.getContext("2d").drawImage(image, startX, startY, width, height, 0, 0, 2185, 1535); //在这调整图片中内容的显示(大小,放大缩小,位置等)
			return canvas;
		}

		function DownLoadReportIMG(imgPathURL) { //如果隐藏IFRAME不存在,则添加
			if (!document.getElementById("IframeReportImg"))
				$('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onl oad="DoSaveAsIMG();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
			if (document.all.IframeReportImg.src != imgPathURL) { //加载图片
				document.all.IframeReportImg.src = imgPathURL;
			} else { //图片直接另存为
				DoSaveAsIMG();
				var num = downloadNum++;
				if (num < imgLength) {
					doScreenShot(num);
				}
				if (num == imgLength) {
					$('.downloadImg-box').hide();
				}
			}
		}

		function DoSaveAsIMG() {
			if (document.all.IframeReportImg.src != "about:blank")
				window.frames["IframeReportImg"].document.execCommand("SaveAs");
		}

		function download(src, imgName) { // 另存为图片

			var MIME = {
				"image/jpeg" : "jpeg",
				"image/png" : "png",
				"image/jpg" : "jpg"
			};

			//检测下载
			var fname = 'a' + "." + MIME[getContentType(src)];
			var blob = getBlob(src);
			if (navigator.msSaveBlob) {
				navigator.msSaveBlob(blob, fname);
			} else {
				var $a = $("<a></a>").attr("href", URL.createObjectURL(blob)).attr("download", imgName + ".png");
				$a[0].click();
				var num = downloadNum++;
				if (num < imgLength) {
					doScreenShot(num);
				}
				if (num == imgLength) {
					$('.downloadImg-box').hide();
				}
			}

			function getBlob(base64) {
				return b64toBlob(getData(base64), getContentType(base64));
			}

			function getContentType(base64) {
				return /data:([^;]*);/i.exec(base64)[1];
			}

			function getData(base64) {
				return base64.substr(base64.indexOf("base64,") + 7, base64.length);
			}

			function b64toBlob(b64Data, contentType, sliceSize) {
				contentType = contentType || '';
				sliceSize = sliceSize || 512;
				var byteCharacters = atob(b64Data);
				var byteArrays = [];
				for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
					var slice = byteCharacters.slice(offset, offset + sliceSize);
					var byteNumbers = new Array(slice.length);
					for (var i = 0; i < slice.length; i++) {
						byteNumbers[i] = slice.charCodeAt(i);
					}
					var byteArray = new Uint8Array(byteNumbers);

					byteArrays.push(byteArray);
				}
				var blob = new Blob(byteArrays, {
					type : contentType
				});
				return blob;
			}
		}

		function browserIsIe() { //判断是否为ie浏览器
			if (!!window.ActiveXObject || "ActiveXObject" in window)
				return true;
			else
				return false;
		}
	}
	</script>
</html>
上一篇:生成带二维码图片并通过微信分享


下一篇:html2canvas 部分iPhone手机无效