正品联盟二维码2

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

@@ -21,8 +21,8 @@
 
         .content-box {
             border-radius: 5px;
-            width: 414px;
-            height: 416px;
+            width: 300px;
+            height: 400px;
             background-color: #FFF;
             border: 1px solid #ebebeb;
             position: absolute;
@@ -36,8 +36,8 @@
         }
 
         .qrcodeBox {
-            width: 414px;
-            height: 416px;
+            width: 300px;
+            height: 400px;
         }
 
         .qrcodeBox-colse {
@@ -162,6 +162,7 @@
             <div class="qrcodeBox-download">
                 <div class="download-btn" onclick="downQRCode()">下载二维码</div>
             </div>
+            <div id="downQrCode"></div>
         </div>
     </div>
     <a id="downloadLink"></a>
@@ -178,17 +179,13 @@
 			})
 		});
 
-		var	qrCodeSize = [414, 500, 1000],//二维码尺寸
-				picWidth = [0, 34, 66],//图片额外宽
-				picHeight = [0, 100, 200],//图片额外高
-				fontSize = [14, 24, 46];//描述文字大小
-
 		function show(id, wwwServer, agentName, snCode) {
 			var qrText = wwwServer + "product/auth/product-" + id + ".html",//要生成二维码的信息,文本或URL
 					strHeader = agentName+'品牌授权',//顶部文字描述
-					strFooter = '仪器SN码:'+snCode;//底部文字描述
-			var i = 0;
+					strFooter1 = "仪器SN码：";//底部文字描述
+					strFooter2 = snCode;//底部文字描述
 			$('.qrcodeBox-content').show(100);
+			//生成展示二维码
 			var qrcode = $('#qrcode').qrcode({
 				render: 'canvas',
 				text: qrText,
@@ -198,7 +195,7 @@
 				foreground: '#000000',
 			}).show();
 			var canvas = qrcode.find('canvas').get(0);
-			//设置二维码
+			//设置展示二维码
 			var img = new Image();
 			var bgImg = new Image();
 			img.src = canvas.toDataURL('image/png');
@@ -210,7 +207,7 @@
 				canvas.height = h;
 				var ctx = canvas.getContext('2d');
 				//设置画布背景
-				ctx.fillStyle = '#ffffff';
+				ctx.fillStyle = '#fffefe';
 				ctx.fillRect(0, 0, canvas.width, canvas.height);
 				//设置文字样式
 				ctx.fillStyle = 'white';
@@ -219,13 +216,13 @@
 				// ctx.fillText(strHeader, w / 2, picHeight[i] / 3);
 				ctx.drawImage(bgImg, 0, 0);
 				//绘制二维码
-				ctx.drawImage(img, 115, 154);
+				ctx.drawImage(img, 60, 167);
 				//绘制顶部文字描述
 				var chr = strHeader.split("");
 				var temp = "";
 				var row = [];
 				for(var a = 0; a < chr.length; a++){
-					if( ctx.measureText(temp).width < (w-130) ){
+					if(ctx.measureText(temp).width < (w-50) ){
 					}else {
 						row.push(temp);
 						temp = "";
@@ -234,27 +231,90 @@
 				}
 				row.push(temp);
 				if (row.length == 1) {
-					ctx.fillText(row[0], w / 2, 60);
+					ctx.fillText(row[0], w / 2, 48);
 				} else {
 					for(var b = 0; b < row.length; b++){
-						ctx.fillText(row[b], w / 2, 70 - (row.length - b - 1) * 25);
+						ctx.fillText(row[b], w / 2, 58 - (row.length - b - 1) * 25);
 					}
 				}
 				//绘制底部文字
-				ctx.font = '16px MicrosoftYaHei';
-				ctx.fillText(strFooter, w / 2, h - 20);
+                ctx.fillStyle = '#0e9ef0';
+				ctx.font = 'bold 14px MicrosoftYaHei';
+                ctx.textAlign = 'left';
+                ctx.fillText(strFooter1, 68, 91);
+                ctx.font = '14px MicrosoftYaHei';
+                ctx.fillText(strFooter2, w / 2-5, 91);
 			}
+
+			//生成下载二维码
+            var downQrCode = $('#downQrCode').qrcode({
+                render: 'canvas',
+                text: qrText,
+                width: 660,
+                height: 660,
+                background: '#ffffff',
+                foreground: '#000000',
+            }).hide();
+            //设置下载二维码
+            var downCanvas = downQrCode.find('canvas').get(0);
+            var downImg = new Image();
+            var downBgImg = new Image();
+            downImg.src = downCanvas.toDataURL('image/png');
+            downBgImg.src = "/static/images/downQrCodeBackground.png";
+            downBgImg.onload = function () {
+                //重新绘制画布
+                var w = downBgImg.width, h = downBgImg.height;
+                downCanvas.width = w;
+                downCanvas.height = h;
+                var ctx = downCanvas.getContext('2d');
+                //设置画布背景
+                ctx.fillStyle = '#ffffff';
+                ctx.fillRect(0, 0, downCanvas.width, downCanvas.height);
+                //设置文字样式
+                ctx.fillStyle = '#ffffff';
+                ctx.font = 'bold 52px MicrosoftYaHei';
+                ctx.textAlign = 'center';
+                ctx.drawImage(downBgImg, 0, 0);
+                //绘制二维码
+                ctx.drawImage(downImg, 215, 402);
+                //绘制顶部文字描述
+                var chr = strHeader.split("");
+                var temp = "";
+                var row = [];
+                for(var a = 0; a < chr.length; a++){
+                    if( ctx.measureText(temp).width < (w-290) ){
+                    }else {
+                        row.push(temp);
+                        temp = "";
+                    }
+                    temp += chr[a];
+                }
+                row.push(temp);
+                if (row.length == 1) {
+                    ctx.fillText(row[0], w / 2, 122);
+                } else {
+                    for(var b = 0; b < row.length; b++){
+                        ctx.fillText(row[b], w / 2, 160 - (row.length - b - 1) * 65);
+                    }
+                }
+                //绘制底部文字
+                ctx.fillStyle = '#42aaff';
+                ctx.font = 'bold 33px MicrosoftYaHei';
+                ctx.textAlign = 'center';
+                ctx.fillText(strFooter1+strFooter2, w/2, 238);
+            }
 		}
 
 		function closeAlert() {
 			$('.qrcodeBox-content').hide(100);
 			$('#qrcode').empty();
+			$('#downQrCode').empty();
 		}
 
 		//jquery
 		function downQRCode() {
 			// 获取base64的图片节点
-			var img = document.getElementById('qrcode').getElementsByTagName('canvas')[0];
+			var img = document.getElementById('downQrCode').getElementsByTagName('canvas')[0];
 			// 构建画布
 			var canvas = document.createElement('canvas');
 			canvas.width = img.width;