小程序
小游戏
企业微信
微信支付
扫描小程序码分享
微信小程序，camera组件调用时能够，能够在拍照界面添加取景框吗？或者在相加拍照界面添加背景图片？可以实现AR效果吗？求教
5 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你好，请问你的问题解决了吗
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
使用了cover-view
参考的楼下王凡的代码
有js部分的吗
你要这样的？
对的，请问怎么实现的
<!-- 自定义相机 -->
<view wx:if="{{showCamera}}" class='customcamera'>
<view wx:if="{{!showPreview}}" class='cameraview'>
<camera flash="{{flash}}" device-position="{{cmodel}}" bindstop='photostop' style='background:rgba(0,0,0,0.5)' binderror='photoerr'>
<cover-view class="{{curimgtype!='hand'?'cameraview':'cpnl'}}">
<cover-image style='width:100%;height:100%' src='{{pnlimg}}'>
</cover-image>
</cover-view>
<cover-view class='cmodel' wx:if="{{curimgtype=='hand'}}" >
<cover-image catchtap='changemodel' src='../../images/cchange.png' style='width:20px;height:20px;padding:5px'></cover-image>
</camera>
</view>
<view wx:else class='cameraview'>
<image mode='aspectFit' src='{{prviewImg}}'></image>
<view class='camerabtn'>
<view class='clickbtn'>
<view bindtap='clickCancel' data-text='{{cancelText}}'>{{cancelText}}</view>
<view class='btnimg'>
<image bindtap='clickCamera' src="{{!photoactive?'../../images/photo.png':'../../images/photo_enter.png'}}"></image>
<view bindtap='useImg'>{{sureText}}</view>
多谢，我试试
你好，能否把
wxss 也贴出来
/* 拍照取景框 */
.customcamera{
height: 100vh;
width: 100%;
position: fixed;
top: 0;
background: rgb(0, 0,0);
/* display: flex;
flex-direction: column; */
}
.cameraview{
height: 88vh;
display: -webkit-flex;
align-items:center;
.cameraviewborder{
position: relative;
height: 86vh;
margin: auto;
left: 0;
right: 0;
top:7vh;
width: 60vh;
.camerabtn{
height: 12vh;
display: flex;
flex-direction: column;
background: rgba(0,0,0,0.5);
font-size: 15px;
.cameraview camera{
height: 100%;
.cameraview image{
.cmodel{
width:100%;
height:5%;
background:rgba(0,0,0,0.3);
display:-webkit-flex;
justify-content:flex-end;
.cmodel image{
width:20px;height:20px;padding:5px
.cpnl{
height:95%;
.showtost{
flex: 1;
text-align: center;
color: white;
font-size: 12px;
line-height: 22px;
.clickbtn{
flex: 3;
flex-direction: row;
.clickbtn view{
justify-content:center;
.btnimg {
.btnimg image{
width: 60px;
height: 60px;
你好该问题是否已经解决？
还没有，请问你有好办法吗？
貌似不可以吧
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你好，请问你的问题解决了吗
使用了cover-view
参考的楼下王凡的代码
有js部分的吗
camera 组件里使用 cover-view 组件就可以吧。
你要这样的？![]()
对的，请问怎么实现的
camera +cover-view+cover-image 下面是布局
<!-- 自定义相机 -->
<view wx:if="{{showCamera}}" class='customcamera'>
<view wx:if="{{!showPreview}}" class='cameraview'>
<camera flash="{{flash}}" device-position="{{cmodel}}" bindstop='photostop' style='background:rgba(0,0,0,0.5)' binderror='photoerr'>
<cover-view class="{{curimgtype!='hand'?'cameraview':'cpnl'}}">
<cover-image style='width:100%;height:100%' src='{{pnlimg}}'>
</cover-image>
</cover-view>
<cover-view class='cmodel' wx:if="{{curimgtype=='hand'}}" >
<cover-image catchtap='changemodel' src='../../images/cchange.png' style='width:20px;height:20px;padding:5px'></cover-image>
</cover-view>
</camera>
</view>
<view wx:else class='cameraview'>
<image mode='aspectFit' src='{{prviewImg}}'></image>
</view>
<view class='camerabtn'>
<view class='clickbtn'>
<view bindtap='clickCancel' data-text='{{cancelText}}'>{{cancelText}}</view>
<view class='btnimg'>
<image bindtap='clickCamera' src="{{!photoactive?'../../images/photo.png':'../../images/photo_enter.png'}}"></image>
</view>
<view bindtap='useImg'>{{sureText}}</view>
</view>
</view>
</view>
多谢，我试试
你好，能否把
wxss 也贴出来
/* 拍照取景框 */
.customcamera{
height: 100vh;
width: 100%;
position: fixed;
top: 0;
background: rgb(0, 0,0);
/* display: flex;
flex-direction: column; */
}
.cameraview{
height: 88vh;
display: -webkit-flex;
align-items:center;
}
.cameraviewborder{
position: relative;
height: 86vh;
margin: auto;
left: 0;
right: 0;
top:7vh;
width: 60vh;
}
.camerabtn{
height: 12vh;
display: flex;
flex-direction: column;
background: rgba(0,0,0,0.5);
font-size: 15px;
}
.cameraview camera{
height: 100%;
width: 100%;
}
.cameraview image{
width: 100%;
height: 100%;
}
.cmodel{
width:100%;
height:5%;
background:rgba(0,0,0,0.3);
display:-webkit-flex;
justify-content:flex-end;
align-items:center;
}
.cmodel image{
width:20px;height:20px;padding:5px
}
.cpnl{
width:100%;
height:95%;
}
.showtost{
flex: 1;
text-align: center;
color: white;
font-size: 12px;
line-height: 22px;
}
.clickbtn{
flex: 3;
display: flex;
flex-direction: row;
}
.clickbtn view{
flex: 1;
align-items:center;
display:-webkit-flex;
justify-content:center;
color: white;
}
.btnimg {
text-align: center;
}
.btnimg image{
width: 60px;
height: 60px;
}
你好该问题是否已经解决？
还没有，请问你有好办法吗？
貌似不可以吧