很多时候我们项目中都需要到身份证,然后上传的时候ui给出了一个红框限制 说最好提示用户把身份证按照红框对齐拍照,以免信息不准,然后就去了小程序组件,也没有找到,然后去社区 也看了各种各样的,最后自己算了搞了搞 效果也出来了,有需要的可以看一下.
首先我是做成了组件的形式,页面中只需要引入组件 使用就ok了 话不多说 上代码:
首先是我们的组件页面
<view class="camera_box"> <camera class="camera" wx:if="{{!show}}" device-position="back" flash="off" binderror="error"> <view class="id_m"> <image class="img" wx:if='{{Num == 0}}' src="https://img-blog.csdnimg.cn/20210126144225906.png"> </image> <image class="img" wx:if='{{Num == 1}}' src="https://img-blog.csdnimg.cn/20210126144317636.png"> </image> </view> </camera> <image class="camera_img" src="{{src}}" wx:if="{{show}}"></image> <view class="action"> <button class="takeBtn" type="primary" bindtap="takePhoto" wx:if="{{!show}}"></button> <image class="cancel" bindtap="cancel" wx:if="{{!show}}" src="../../static/img/cancel.png"></image> <button class="saveImg" type="primary" bindtap="saveImg" wx:if="{{show}}"></button> <button class="cancelBtn" wx:if="{{show}}" type="primary" bindtap="cancelBtn"></button> </view> </view>
下面是wxss
.camera_box { height: 100%; 100%; position: fixed; top: 0; left: 0; z-index: 9999; overflow: hidden; background: #d9d9d9; } .camera { height: 86%; 100%; z-index: 999; } .id_m { height: 100%; 100%; z-index: 999; background: rgba(0, 0, 0, 0.1); display: flex; position: absolute; } .id_m .img { 80%; height: 80%; display: block; position: absolute; left: 0; right: 0; margin: auto auto; top: 0; bottom: 0; } .id_m .tips_txt { transform: rotate(90deg); } .camera_box .action { position: absolute; bottom: 0; left: 0; height: 15%; position: relative; display: flex; justify-content: space-around; align-items: center; z-index: 999; } .camera_box .takeBtn { height: 120rpx; 120rpx; border-radius: 50%; font-size: 24rpx; background: url('https://cdn.ctoku.com/1123123123123e3241.png') no-repeat center; background-size: contain; border: none; margin-left: 130rpx; } .camera_box .cancel{ height: 120rpx; 120rpx; border-radius: 50%; margin-right: 130rpx; } .camera_box .cancelBtn { font-size: 24rpx; height: 120rpx; 120rpx; border-radius: 50%; background: url('https://cdn.ctoku.com/12311123342312231.png') no-repeat center; background-size: contain; border: none; } .camera_box .saveImg { background: url('https://cdn.ctoku.com/1232123434231231231.png') no-repeat center; font-size: 24rpx; height: 120rpx; 120rpx; border-radius: 50%; background-size: contain; border: none; } .camera_box .takeBtn::after { border: none; } .camera_img { height: 85vh; 100%; }
然后json的话 基本就写了一句
“component”: true
最后就是js代码了
Component({ properties: { Num: { type: Number, value: 0 } }, /** * 页面的初始数据 */ data: { Num: '', src: '', show: false, getInfo: false }, methods: { upload() { this.setData({ x: 0 }) console.log(this.data.x) }, cancelBtn() { this.setData({ show: false }) }, saveImg() { this.triggerEvent('upload', { url: this.data.src, id: this.data.Num }) }, takePhoto() { const that = this; const ctx = wx.createCameraContext() ctx.takePhoto({ quality: 'high', success: (res) => { that.setData({ src: res.tempImagePath, show: true }) }, fail: (err) => { console.log(err) wx.showToast({ title: '拍照失败,请重试!', icon: 'none' }) that.triggerEvent('error') } }) }, error(e) { console.log(e.detail) wx.showToast({ title: '请打开摄像头权限并重试!', icon: 'none' }) this.triggerEvent('error') }, cancel() { this.triggerEvent('error') } } })
以上就是全部组件内容了 js中的Num是用来控制身份证正面的 0 即是人像面 1 是国徽面
那我们组件怎么调用呢?
首先是在json中引入: “upload”: “/components/upload/upload”
然后在页面中需要写入组件
<upload wx:if="{{up}}" Num='{{id}}' bindupload = 'upload' binderror="error"></upload >
以上是我在项目中用的,因为我是组件里面套组件使用的,所以有up判断 不需要的不用加
js中我们需要做组件返回处理 以及报错处理
upload(e) { let that = this; let img = e.detail.url this.setData({ up: false }) that.uploadimg({ url: that.data.uploadUrl, //这里是你图片上传的接口 path: [img], //这里是选取的图片的地址数组 }); },
error() {
console.log(‘err’)
this.setData({
up:false
})
},
最后说一下that.uploadimg是我自己写的上传图片到服务器的方法,有需要的直接按照小程序wx.uploadFile文档操作即可.
如有更优方案,请联系作者,谢谢