fix:先显示原图确保按钮出现,异步plus.zip裁剪1080×1080

pages/upload/camera_capture.nvue

@@ -6,6 +6,8 @@
 			:style="'width:' + camSize + 'px;height:' + camSize + 'px;margin-top:' + frameTop + 'px;margin-left:' + frameLeft + 'px;'"
 			flash="off"
 			facing="back"
+			:widthRatio="1"
+			:heightRatio="1"
 			@onPictureTaken="onPictureTaken"
 			@onCameraOpened="onCameraOpened"
 		></ima-camera-view>
@@ -67,8 +69,6 @@
 			<image class="cc-preview-img" :src="previewSrc" mode="aspectFill" :style="'width:' + previewSize + 'px;height:' + previewSize + 'px;'"></image>
 		</view>
 
-		<!-- 隐藏的canvas（用于裁剪缩放） -->
-		<canvas canvas-id="resizeCanvas" style="width:1080px;height:1080px;position:fixed;left:-9999px;top:-9999px;"></canvas>
 	</view>
 </template>
 
@@ -135,43 +135,46 @@
 					this.resizeTo1080(path)
 				}
 			},
-			// 居中裁剪为 1080×1080
+			// 先添加原图确保UI响应，再异步替换为1080×1080
 			resizeTo1080(srcPath) {
 				var that = this
-				uni.getImageInfo({
-					src: srcPath,
-					success: function(info) {
-						var w = info.width
-						var h = info.height
-						var size = Math.min(w, h)
-						var sx = Math.floor((w - size) / 2)
-						var sy = Math.floor((h - size) / 2)
-						// 用canvas裁剪 + 缩放
-						var ctx = uni.createCanvasContext('resizeCanvas', that)
-						ctx.drawImage(srcPath, sx, sy, size, size, 0, 0, 1080, 1080)
-						ctx.draw(false, function() {
-							setTimeout(function() {
-								uni.canvasToTempFilePath({
-									canvasId: 'resizeCanvas',
-									x: 0, y: 0,
-									width: 1080, height: 1080,
-									destWidth: 1080, destHeight: 1080,
-									fileType: 'jpg',
-									quality: 1,
-									success: function(res) {
-										that.capturedList.push(res.tempFilePath)
-									},
-									fail: function() {
-										that.capturedList.push(srcPath)
+				// 先占位，让完成按钮立即出现
+				var idx = this.capturedList.length
+				this.capturedList.push(srcPath)
+				// 异步尝试压缩
+				try {
+					if (typeof plus !== 'undefined' && plus.zip) {
+						uni.getImageInfo({
+							src: srcPath,
+							success: function(info) {
+								var w = info.width
+								var h = info.height
+								var size = Math.min(w, h)
+								var cx = Math.floor((w - size) / 2)
+								var cy = Math.floor((h - size) / 2)
+								plus.zip.compressImage({
+									src: srcPath,
+									dst: '_doc/sq_' + Date.now() + '.jpg',
+									width: '1080',
+									height: '1080',
+									quality: 95,
+									overwrite: true,
+									clip: {
+										x: cx, y: cy,
+										width: size, height: size
 									}
-								}, that)
-							}, 300)
+								},
+								function(res) {
+									that.capturedList[idx] = res.target
+								},
+								function() {
+									// 保持原图
+								})
+							},
+							fail: function() {}
 						})
-					},
-					fail: function() {
-						that.capturedList.push(srcPath)
 					}
-				})
+				} catch(e) {}
 			},
 			flipCamera() {
 				this.facing = this.facing === 'back' ? 'front' : 'back'