qrcode加背景圖（系統應用）

岁月淡忘了谁發表於2024-08-14
<%@page language="java" pageEncoding="UTF-8"
	import="com.ksource.platform.model.system.SysUser"%>
<%@taglib prefix="f" uri="http://www.k-source.cn/functions" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page import="com.ksource.core.web.controller.BaseController"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>新增組織架構</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="${ctx}/assets/vendor/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="${ctx}/assets/vendor/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="${ctx}/assets/stylesheets/thestyle.css" />
<link rel="stylesheet" href="${ctx}/assets/vendor/bootstrap-datepicker/css/datepicker3.css" />
<link rel="stylesheet" href="${ctx}/assets/vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="${ctx}/styles/default/css/bootstraptreeskin/bootstrapStyle.css"/>
<link rel="stylesheet" href="${ctx}/city/css/city-picker.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx}/city/css/main.css" rel="stylesheet">
<f:js pre="js/lang/common" ></f:js>
<f:js pre="js/lang/js" ></f:js>
<f:js pre="js/lang/view/platform/system" ></f:js>
<script type="text/javascript">
//設定ContextPath
var __ctx='<%=request.getContextPath()%>';
//設定全路徑
var __url = '<%=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath() %>';

var __jsessionId='<%=session.getId() %>';
</script>
<script type="text/javascript" src="${ctx}/assets/min/jquery.min.js"></script>
<!--[if IE 8]>
		<script src="${ctx }/js/cdn/html5shiv.min.js"></script>
       	<script src="${ctx }/js/cdn/respond.js"></script>
       	<script src="${ctx }/assets/vendor/jquery-datatables/media/js/jquery.js"></script>
       	<link rel="stylesheet" href="${ctx }/styles/forIE8/main.css" />
 <![endif]-->
<script type="text/javascript" src="${ctx}/js/jquery/jquery.form.js"></script>
<script type="text/javascript" src="${ctx}/assets/vendor/jquery-validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery/jquery.validate.ext.js"></script>
<script type="text/javascript" src="${ctx}/js/util/util_new.js"></script>
<script type="text/javascript" src="${ctx}/js/lg/util/DialogUtil.js" ></script>
<script type="text/javascript" src="${ctx}/js/util/json2.js"></script>
<script type="text/javascript" src="${ctx}/js/util/form.js"></script>
<script type="text/javascript" src="${ctx}/js/layer-v3.1.0/layer/layer.js" ></script>
<script type="text/javascript" src="${ctx}/assets/vendor/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="${ctx}/assets/vendor/flot/jquery.flot.js"></script>
<script type="text/javascript" src="${ctx}/assets/vendor/flot-tooltip/jquery.flot.tooltip.js"></script>
<script type="text/javascript" src="${ctx}/servlet/ValidJs?form=microSite"></script>
<script type="text/javascript" src="${ctx }/js/lg/plugins/htButtons.js"></script>
<script type="text/javascript" src="${ctx }/js/ksource/platform/system/SysDialog.js"></script>
<script type="text/javascript" src="${ctx }/city/js/bootstrap.js"></script>
<script type="text/javascript" src="${ctx }/city/js/city-picker.data.js"></script>
<script type="text/javascript" src="${ctx }/city/js/city-picker.js"></script>
<script type="text/javascript" src="${ctx }/city/js/main.js"></script>
<script type="text/javascript" src="${ctx }/js/jquery.base64.js"></script>
<script type="text/javascript" src="${ctx }/js/clipboard.min.js"></script>
<script type="text/javascript" src="${ctx }/js/qrcode.js"></script>
<script type="text/javascript" src="${ctx }/js/jquery.qrcode.min.js"></script>
<script type="text/javascript">

	function copyUrl(text){
		var clipboard = new ClipboardJS('.copyUrl', {
			text: function () {
				return text;
			},
		});

		clipboard.on('success', function (e) {
			layer.alert("連結已複製",{icon:1});
		});

		clipboard.on('error', function (e) {
			console.info('Action:', e.action);
			console.info('Text:', e.text);
			console.info('Trigger:', e.trigger);
		});
	}

	$(function () {
		var url = "${url}"+"${ctx}/sspAllLink.ht?orgId="+$.base64.encode("${microSite.orgId}");
		$("#childrenUrl").text(url);

		//複製連結
		$(".copyUrl").click(function (){
			var url = $(this).siblings(".url").text();
			copyUrl(url)
		})
	})
</script>
	<style type="text/css">
		.inputFrom .popover{
			min-width: 0px;
			width: auto;
		}
	</style>
</head>
<body>
	<div class="panel">
		<header class="panel-heading">
		<div class="btn-group-p">
			<a class="btn btn-primary link save" href="edit.ht"><span class="fa" style="width:60px">編輯</span></a>
		</div>
		</header>
		<div class="panel-body">
			<textarea id="copy" style="display:none;"></textarea>
			<form id="microSiteForm" method="post" action="save.ht"
				class="inputFrom" novalidate="novalidate">

				<div class="row-body">
					<div class="row">
						<div class="col-sm-3 tip">微網站名稱：</div>
						<div class="col-sm-6" style="padding-top:3px">
							${microSite.name}
						</div>
						<div class="col-sm-3 remd"></div>
					</div>
					<%--<div class="row">
						<div class="col-sm-3 tip">微信公眾號標識：</div>
						<div class="col-sm-6" style="padding-top:3px">
							${microSite.flag}
						</div>
						<div class="col-sm-3 remd"></div>
					</div>--%>
					<div class="row" style="border-bottom:0px">
						<div class="col-sm-3 tip" style="padding-top:5px">連結地址：</div>
						<div class="col-sm-9" style="padding-top:8px;">
							<span id="url" class="url" style="color: #2b9474; display:inline-block; padding-left:15px">${microSite.url}</span>
							<a class="btn btn-primary link copyUrl" href="javascript:void(0)" style="margin-left: 50px"><span class="fa" style="width:60px">複製連結</span></a>
							<a id="ewmxz1" class="btn btn-primary link" data-toggle="popover" data-trigger="hover" data-placement="right" ><span class="fa" style="width:70px" onclick="downloadQRCode1()">二維碼下載</span></a>
						</div>
						<%--<a class="btn btn-primary link" href="javascript:void(0)" style="margin-left: 50px" onclick="downloadQRCode1()">下載二維碼</a>--%>
						<div id="qrCode1" style="display: none"></div>
						<div id="qrCode2" style="display: none"></div>
					</div>
					<div class="row" style="border-bottom:0px;
						<c:if test="${((empty orgCount) or (orgCount==0))}">
								display: none;
						</c:if>
					">
						<div class="col-sm-3 tip" style="padding-top:5px">包含下級連結地址：</div>
						<div class="col-sm-9" style="padding-top:8px;">
							<span id="childrenUrl" class="url" style="color: #2b9474; display:inline-block; padding-left:15px"></span>
							<a class="btn btn-primary link copyUrl" href="javascript:void(0)" style="margin-left: 50px"><span class="fa" style="width:60px">複製連結</span></a>
							<a id="ewmxz2" class="btn btn-primary link" data-toggle="popover" data-trigger="hover" data-placement="right" ><span class="fa" style="width:70px" onclick="downloadQRCode2()">二維碼下載</span></a>
						</div>
						<%--<a class="btn btn-primary link" href="javascript:void(0)" style="margin-left: 50px" onclick="downloadQRCode2()">下載二維碼</a>--%>
						<div id="qrCode3" style="display: none"></div>
						<div id="qrCode4" style="display: none"></div>
					</div>
					<div id="qrCodeX"></div>
					<div id="qrCodeY"></div>
				</div>
			</form>
		</div>
	</div>
</body>
<script>
	$(function () {

		var url1 = '${microSite.url}';
		var qrcode1 = new QRCode('qrCode1', {
			text: 'qrcode',
			width: 80,
			height: 80,
			colorDark : '#000000',
			colorLight : '#ffffff',
			correctLevel : QRCode.CorrectLevel.H
		});
		qrcode1.makeCode(url1);


		var url2 = $("#childrenUrl").text();
		var qrcode3 = new QRCode('qrCode3', {
			text: 'qrcode',
			width: 80,
			height: 80,
			colorDark : '#000000',
			colorLight : '#ffffff',
			correctLevel : QRCode.CorrectLevel.H
		});
		qrcode3.makeCode(url2);

		$('#ewmxz1').popover({
			html : true,
			title: function() {
				return '';
			},
			content: function() {
				return $("#qrCode1").html();
			}
		});

		$('#ewmxz2').popover({
			html : true,
			title: function() {
				return '';
			},
			content: function() {
				return $("#qrCode3").html();
			}
		});

		createQRCode1();
		createQRCode2();
	});

	function createQRCode1(){
		var qrcode= $('#qrCodeX').qrcode({
			text: '${microSite.url}',
			width: 180,
			height: 180,
		}).hide();
		createQRCodeCommon(qrcode, "qrCode2")
	}

	function createQRCode2(){
		var qrcode= $('#qrCodeY').qrcode({
			text: $("#childrenUrl").text(),
			width: 180,
			height: 180,
		}).hide();
		createQRCodeCommon(qrcode, "qrCode4")
	}

	function createQRCodeCommon(qrcode, divId){
		var canvas=qrcode.find('canvas').get(0);
		var data_codeImg = canvas.toDataURL('image/jpg');//圖片base64位字串
		var data = [
			'${ctx}/styles/default/images/bg.png', //背景海報圖
			data_codeImg
		], base64 = [];
		function draw(fn) {
			var c = document.createElement('canvas'),  // 獲取canvas物件( 透過選擇器選擇canvas元素 )
					ctx = c.getContext('2d'),  // 透過canvas獲取他的上下文繪製環境( context )
					len = data.length;
			c.width = 400;  // 畫布寬   canvas的預設寬度與高度:寬度:300,高度:150 注：canvas的寬度與高度，只能透過行間屬性或者js動態修改，不要透過樣式去修改，否則獲取到的寬度與高度不準
			c.height = 712;  // 畫布高
			ctx.rect(0, 0, c.width, c.height);  // 建立矩形 引數：繪製起點x座標，繪製起點y座標，矩形寬（畫素），矩形高（畫素）
			ctx.fillStyle = '#fff';
			ctx.fill();
			function drawing(n) {
				if (n < len) {
					var img = new Image;
					img.src = data[n];
					img.onload = function () {
						if (n === 1) {
							// 畫圖 引數：圖片物件，相對畫布的起點x座標，
							// 相對畫布的起點y座標，繪製的圖片寬度（二維碼，px），繪製的圖片高度（二維碼，px）
							ctx.drawImage(img, 108, 408, 180, 180);
						}
						else if(n === 0){
							ctx.drawImage(img, 0, 0, c.width,  c.height);
						}
						drawing(n + 1);//遞迴
					}
				} else {
					//儲存生成作品圖片
					base64.push(c.toDataURL("image/jpeg", 0.8));
					fn();
				}
			}
			drawing(0);
		}
		draw(function () {
			document.getElementById(divId).innerHTML = '<img id='+divId+'Img src="'+base64[0]+'">';
		});
	}

	function downloadQRCode1() {
		let qrcodeUrl = $("#qrCode2Img").attr("src");
		downloadFileByBase64(qrcodeUrl,"二維碼");
	}

	function downloadQRCode2() {
		let qrcodeUrl = $("#qrCode4Img").attr("src");
		downloadFileByBase64(qrcodeUrl,"二維碼");
	}

	function downloadFileByBase64(base64, fileName) {
		var myBlob = dataURLtoBlob(base64)
		var myUrl = URL.createObjectURL(myBlob)
		downloadFile(myUrl, fileName)
	}
	//將完整的base64轉換為blob
	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 })
	}

	// * desc: 下載方法
	// * @param url  ：返回資料的blob物件或連結
	// * @param fileName  ：下載後檔名標記
	function downloadFile(url, fileName) {
		var a = document.createElement("a")
		a.setAttribute("href", url)
		a.setAttribute("download", fileName+".png")
		a.setAttribute("target", "_blank")
		let clickEvent = document.createEvent("MouseEvents")
		clickEvent.initEvent("click", true, true)
		a.dispatchEvent(clickEvent)
	}

</script>
</html>

相關文章