DaShangDao/daShangDao_scanBook
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:相机组件本身设为正方形大小,黑色背景自然露出

Browse Source
This commit is contained in:
ShenQiLun 2026-06-25 17:29:59 +08:00
parent 10ccb194d2
commit 60cbfdd364
1 changed files with 2 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
pages/upload/camera_capture.nvue
View File

@ -1,9 +1,9 @@
<template> <template>
<view class="cc-page"> <view class="cc-page">
<!-- 相机预览（全屏） --> <!-- 正方形相机预览 -->
<ima-camera-view <ima-camera-view
ref="cameraRef" ref="cameraRef"
:style="'width:' + winWidth + 'px;height:' + winHeight + 'px;'" :style="'width:' + camSize + 'px;height:' + camSize + 'px;margin-top:' + frameTop + 'px;margin-left:' + frameLeft + 'px;'"
flash="off" flash="off"
facing="back" facing="back"
:widthRatio="1" :widthRatio="1"
@ -12,12 +12,6 @@
@onCameraOpened="onCameraOpened" @onCameraOpened="onCameraOpened"
></ima-camera-view> ></ima-camera-view>
<!-- 正方形取景框外半透明遮罩 -->
<view class="cc-mask" :style="'top:0px;left:0px;width:' + winWidth + 'px;height:' + frameTop + 'px;'"></view>
<view class="cc-mask" :style="'top:' + (frameTop + camSize) + 'px;left:0px;width:' + winWidth + 'px;height:' + (winHeight - frameTop - camSize) + 'px;'"></view>
<view class="cc-mask" :style="'top:' + frameTop + 'px;left:0px;width:' + frameLeft + 'px;height:' + camSize + 'px;'"></view>
<view class="cc-mask" :style="'top:' + frameTop + 'px;left:' + (frameLeft + camSize) + 'px;width:' + (winWidth - frameLeft - camSize) + 'px;height:' + camSize + 'px;'"></view>
<!-- 正方形取景框（白色边框） --> <!-- 正方形取景框（白色边框） -->
<view class="cc-frame" :style="'top:' + frameTop + 'px;left:' + frameLeft + 'px;width:' + camSize + 'px;height:' + camSize + 'px;'"></view> <view class="cc-frame" :style="'top:' + frameTop + 'px;left:' + frameLeft + 'px;width:' + camSize + 'px;height:' + camSize + 'px;'"></view>
@ -176,13 +170,6 @@
background-color: #000000; background-color: #000000;
} }
/* 遮罩（取景框外半透明黑色） */
.cc-mask {
position: absolute;
background-color: rgba(0,0,0,0.55);
z-index: 3;
}
/* 取景框（白色边框，视觉引导） */ /* 取景框（白色边框，视觉引导） */
.cc-frame { .cc-frame {
position: absolute; position: absolute;