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,
+				var idx = this.capturedList.length
-					success: function(info) {
+				this.capturedList.push(srcPath)
-						var w = info.width
+				// 异步尝试压缩
-						var h = info.height
+				try {
-						var size = Math.min(w, h)
+					if (typeof plus !== 'undefined' && plus.zip) {
-						var sx = Math.floor((w - size) / 2)
+						uni.getImageInfo({
-						var sy = Math.floor((h - size) / 2)
+							src: srcPath,
-						// 用canvas裁剪 + 缩放
+							success: function(info) {
-						var ctx = uni.createCanvasContext('resizeCanvas', that)
+								var w = info.width
-						ctx.drawImage(srcPath, sx, sy, size, size, 0, 0, 1080, 1080)
+								var h = info.height
-						ctx.draw(false, function() {
+								var size = Math.min(w, h)
-							setTimeout(function() {
+								var cx = Math.floor((w - size) / 2)
-								uni.canvasToTempFilePath({
+								var cy = Math.floor((h - size) / 2)
-									canvasId: 'resizeCanvas',
+								plus.zip.compressImage({
-									x: 0, y: 0,
+									src: srcPath,
-									width: 1080, height: 1080,
+									dst: '_doc/sq_' + Date.now() + '.jpg',
-									destWidth: 1080, destHeight: 1080,
+									width: '1080',
-									fileType: 'jpg',
+									height: '1080',
-									quality: 1,
+									quality: 95,
-									success: function(res) {
+									overwrite: true,
-										that.capturedList.push(res.tempFilePath)
+									clip: {
-									},
+										x: cx, y: cy,
-									fail: function() {
+										width: size, height: size
-										that.capturedList.push(srcPath)
 									}
-								}, 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'