正品联盟二维码

src/main/webapp/WEB-INF/views/modules/zplm/cmBrandAuthProductList.jsp

@@ -21,8 +21,8 @@
 
         .content-box {
             border-radius: 5px;
-            width: 260px;
-            height: 330px;
+            width: 414px;
+            height: 416px;
             background-color: #FFF;
             border: 1px solid #ebebeb;
             position: absolute;
@@ -33,12 +33,11 @@
             margin: auto;
             z-index: 999;
             box-sizing: border-box;
-            padding: 20px;
         }
 
         .qrcodeBox {
-            width: 220px;
-            height: 260px;
+            width: 414px;
+            height: 416px;
         }
 
         .qrcodeBox-colse {
@@ -157,7 +156,7 @@
             <div class="qrcodeBox" id="qrcode">
 
             </div>
-            <div class="qrcodeBox-colse">
+			<div class="qrcodeBox-colse">
                 <div class="close-btn">关闭</div>
             </div>
             <div class="qrcodeBox-download">
@@ -169,20 +168,19 @@
 
 	<div class="pagination">${page}</div>
 <%--    <script type="text/javascript" src="${ctxStatic}/QRCode/qrcode.js"></script>--%>
-    <script type="text/javascript" src="${ctxStatic}/QRCode/jquery.qrcode.min.js"></script>
-    <script type="text/javascript">
-        $(document).ready(function () {
-            //弹出框去滚动条
-            top.$('#jbox-content').css("overflow-y", "hidden");
-            show_title(30);
-            $('.close-btn').click(function () {
-                closeAlert();
-            })
-        });
+	<script type="text/javascript">
+		$(document).ready(function () {
+			//弹出框去滚动条
+			top.$('#jbox-content').css("overflow-y", "hidden");
+			show_title(30);
+			$('.close-btn').click(function () {
+				closeAlert();
+			})
+		});
 
-		var	qrCodeSize = [200, 500, 1000],//二维码尺寸
-				picWidth = [20, 34, 66],//图片额外宽
-				picHeight = [60, 100, 200],//图片额外高
+		var	qrCodeSize = [414, 500, 1000],//二维码尺寸
+				picWidth = [0, 34, 66],//图片额外宽
+				picHeight = [0, 100, 200],//图片额外高
 				fontSize = [14, 24, 46];//描述文字大小
 
 		function show(id, wwwServer, agentName, snCode) {
@@ -194,18 +192,20 @@
 			var qrcode = $('#qrcode').qrcode({
 				render: 'canvas',
 				text: qrText,
-				width: qrCodeSize[i],
-				height: qrCodeSize[i],
+				width: 182,
+				height: 182,
 				background: '#ffffff',
 				foreground: '#000000',
 			}).show();
 			var canvas = qrcode.find('canvas').get(0);
 			//设置二维码
 			var img = new Image();
+			var bgImg = new Image();
 			img.src = canvas.toDataURL('image/png');
-			img.onload = function () {
+			bgImg.src = "/static/images/qrCodeBackground.png";
+			bgImg.onload = function () {
 				//重新绘制画布
-				var w = img.width + picWidth[i], h = img.height + picHeight[i];
+				var w = bgImg.width, h = bgImg.height;
 				canvas.width = w;
 				canvas.height = h;
 				var ctx = canvas.getContext('2d');
@@ -213,57 +213,62 @@
 				ctx.fillStyle = '#ffffff';
 				ctx.fillRect(0, 0, canvas.width, canvas.height);
 				//设置文字样式
-				ctx.fillStyle = '#000000';
-				ctx.font = 'bold ' + fontSize[i] + 'px Arial';
+				ctx.fillStyle = 'white';
+				ctx.font = 'bold 18px MicrosoftYaHei';
 				ctx.textAlign = 'center';
-				//绘制顶部文字描述
-                var chr = strHeader.split("");
-                var temp = "";
-                var row = [];
-                for(var a = 0; a < chr.length; a++){
-                    if( ctx.measureText(temp).width < w ){
-                        ;
-                    }
-                    else{
-                        row.push(temp);
-                        temp = "";
-                    }
-                    temp += chr[a];
-                }
-                row.push(temp);
-                for(var b = 0; b < row.length; b++){
-                    ctx.fillText(row[b],w / 2,picHeight[i] / 3-(row.length-b-1)*20);
-                }
 				// ctx.fillText(strHeader, w / 2, picHeight[i] / 3);
+				ctx.drawImage(bgImg, 0, 0);
 				//绘制二维码
-				ctx.drawImage(img, picWidth[i] / 2, picHeight[i] / 2);
+				ctx.drawImage(img, 115, 154);
+				//绘制顶部文字描述
+				var chr = strHeader.split("");
+				var temp = "";
+				var row = [];
+				for(var a = 0; a < chr.length; a++){
+					if( ctx.measureText(temp).width < (w-130) ){
+					}else {
+						row.push(temp);
+						temp = "";
+					}
+					temp += chr[a];
+				}
+				row.push(temp);
+				if (row.length == 1) {
+					ctx.fillText(row[0], w / 2, 60);
+				} else {
+					for(var b = 0; b < row.length; b++){
+						ctx.fillText(row[b], w / 2, 70 - (row.length - b - 1) * 20);
+					}
+				}
 				//绘制底部文字
-				ctx.fillText(strFooter, w / 2, h - picHeight[i] / 5);
+				ctx.font = '16px MicrosoftYaHei';
+				ctx.fillText(strFooter, w / 2, h - 20);
 			}
 		}
 
-        function closeAlert() {
-            $('.qrcodeBox-content').hide(100);
-            $('#qrcode').empty();
-        }
+		function closeAlert() {
+			$('.qrcodeBox-content').hide(100);
+			$('#qrcode').empty();
+		}
 
-        //jquery
-        function downQRCode() {
-            // 获取base64的图片节点
-            var img = document.getElementById('qrcode').getElementsByTagName('canvas')[0];
-            // 构建画布
-            var canvas = document.createElement('canvas');
-            canvas.width = img.width;
-            canvas.height = img.height;
-            canvas.getContext('2d').drawImage(img, 0, 0);
-            // 构造url
-            var url = canvas.toDataURL('image/png');
-            // 构造a标签并模拟点击
-            var downloadLink = document.getElementById('downloadLink');
-            downloadLink.setAttribute('href', url);
-            downloadLink.setAttribute('download', '二维码.png');
-            downloadLink.click();
-        }
-    </script>
+		//jquery
+		function downQRCode() {
+			// 获取base64的图片节点
+			var img = document.getElementById('qrcode').getElementsByTagName('canvas')[0];
+			// 构建画布
+			var canvas = document.createElement('canvas');
+			canvas.width = img.width;
+			canvas.height = img.height;
+			canvas.getContext('2d').drawImage(img, 0, 0);
+			// 构造url
+			var url = canvas.toDataURL('image/png');
+			// 构造a标签并模拟点击
+			var downloadLink = document.getElementById('downloadLink');
+			downloadLink.setAttribute('href', url);
+			downloadLink.setAttribute('download', '二维码.png');
+			downloadLink.click();
+		}
+	</script>
+	<script type="text/javascript" src="${ctxStatic}/QRCode/jquery.qrcode.min.js"></script>
 </body>
 </html>