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

This commit is contained in:
ShenQiLun 2026-06-26 09:51:14 +08:00
parent a83e43af39
commit d21b73593f

View File

@ -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
// 先占位,让完成按钮立即出现
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 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 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() {
that.capturedList.push(srcPath)
}
fail: function() {}
})
}
} catch(e) {}
},
flipCamera() {
this.facing = this.facing === 'back' ? 'front' : 'back'