add: detail添加二维码

src/_shanghu_detail.html

@@ -8,10 +8,12 @@
 		<title>高区“码”上</title>
 		<script type="text/javascript" src="../sdk/includeHead.js"></script>
 		<style>
-			.wrapper {
-				padding: 0.2rem;
+			html, body{
 				background-color: #fff;
 			}
+			.wrapper {
+				/* padding: 0.2rem; */
+			}
 		
 			/* 添加以下样式 */
 			.van-cell {
@@ -19,11 +21,33 @@
 			}
 			.van-field__label {
 				font-weight: bold;
+				color: #000;
+				font-size: .28rem;
 			}
 			.van-field__control {
 				color: #737373;
 			}
 		</style>
+		<style>
+			.container {
+				text-align: center;
+			}
+		
+			.qr-card {
+				margin-bottom: 10px;
+			}
+		
+			.save-btn {
+			    background: #1890ff;
+			    color: #fff;
+			    border: none;
+			    padding: 7px 20px;
+			    border-radius: 3px;
+			    font-size: 16px;
+			    cursor: pointer;
+			    margin-bottom: .4rem;
+			}
+		</style>
 	</head>
 	<div id="app">
 			<div class="wrapper">
@@ -58,9 +82,17 @@
 					<van-cell-group>
 						<van-field label="安全二维码" v-model="formData.sjName6"/>
 					</van-cell-group>
-					
 				</van-cell-group>
+				
+			</div>
 			</div>
+			<div class="container">
+				<div class="qr-card">
+					<canvas id="mainCanvas" width="300" height="400"></canvas>
+				</div>
+				<button class="save-btn" onclick="saveCanvas()">保存二维码</button>
+			</div>
+			
 	
 			<script>
 				// 在原有Vue实例中添加
@@ -99,6 +131,93 @@
 					}
 				});
 			</script>
+			<script>
+				const QR_IMAGE_URL = 'http://pic.616pic.com/ys_img/00/10/41/bL9gkesSxm.jpg';
+				let canvasReady = false;
+				 // 记录已加载的图片数量
+				let loadedImages = 0;
+				
+				const canvas = document.getElementById('mainCanvas');
+				const ctx = canvas.getContext('2d');
+				// 加载二维码图片
+				const img = new Image();
+				img.crossOrigin = "Anonymous"; // 处理跨域问题
+				img.src = '../image/code/erweima.png'; // QR_IMAGE_URL;
+				
+				
+				const img4erweima = new Image();
+				img4erweima.crossOrigin = "Anonymous"; // 处理跨域问题
+				img4erweima.src = QR_IMAGE_URL; // QR_IMAGE_URL;
+				
+				img.onload = function () {
+					loadedImages++;
+					drawImages();
+				};
+						
+				img4erweima.onload = function () {
+					loadedImages++;
+					drawImages();
+				};
+				
+				
+				function drawImages() {
+					if (loadedImages === 2) {
+						// 画布的宽度和高度
+						const canvasWidth = canvas.width;
+						const canvasHeight = canvas.height;
+									
+						// 图片的原始宽度和高度
+						const imgWidth = img.width;
+						const imgHeight = img.height;
+									
+						// 计算宽度和高度的缩放比例
+						const scaleX = canvasWidth / imgWidth;
+						const scaleY = canvasHeight / imgHeight;
+									
+						// 取较小的缩放比例作为最终的缩放比例
+						const scale = Math.min(scaleX, scaleY);
+									
+						// 计算缩放后的图片宽度和高度
+						const scaledWidth = imgWidth * scale;
+						const scaledHeight = imgHeight * scale;
+									
+						// 计算图片在画布上的绘制位置，使其居中显示
+						const x = (canvasWidth - scaledWidth) / 2;
+						const y = (canvasHeight - scaledHeight) / 2;
+									
+						// 绘制图片到 canvas 上
+						ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
+			
+						 // 绘制前景图标
+						const fgIconSize = 150; // 假设前景图标显示的尺寸
+						const fgX = (canvasWidth - fgIconSize) / 2;
+						const fgY = (canvasHeight - fgIconSize) / 2;
+				
+						// 绘制二维码
+						ctx.drawImage(img4erweima, fgX, fgY, fgIconSize, fgIconSize);
+						
+						canvasReady = true;
+					}
+				}
+				
+				function saveCanvas() {
+					if (!canvasReady) return;
+			
+					const canvas = document.getElementById('mainCanvas');
+					const dataURL = canvas.toDataURL('image/png');
+					console.log(dataURL, '图片下载')
+			
+					lightAppJssdk.media.savePhoto({
+						arg: dataURL,
+						success: function(data) {
+							alert(JSON.stringify(data));
+						},
+						fail: function(data) {
+							alert(data);
+						}
+					});
+				}
+			</script>
 	</body>
 	
 </html>
\ No newline at end of file