实现效果:
用到的组件:camera,cover-image,cover-view
解决思路:在官方文档搜索camera组件,注意到cover-view介绍里有一句“可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher,只支持嵌套cover-view、cover-image”。
结合了两个组件,自己PS了一张有框框的png图片放
到cover-image里,大功告成。
!--pages/camera.wxml--camera mode="normal" device-position="back" flash="auto" binderror="error" style="width: 100%; height: 250px;" cover-view class="controls" cover-image class="img" src="../../images/notice.png" style="width:100%; height:100%"/ /cover-view cover-view class="noticeTXT"请将XXX放入框内/cover-view/camerabutton type="primary" bindtap="takePhoto"拍照/buttonimage mode="widthFix" src="{{src}}"/image/* pages/camera.wxss */.controls { position: relative; top: 5%; display: flex;}.noticeTXT{ font-size: 10PX; color: rgb(12, 242, 240); text-align: center}// camera.jsPage({ onReady() { }, takePhoto() { const ctx = wx.createCameraContext() ctx.takePhoto({ quality: 'high', success: (res) = { this.setData({ src: res.tempImagePath }) } }) }, error(e) { console.log(e.detail) }})













