问题:
通过拍照来识别图片,自定义拍照框,拍照后转成base64后上传后台,通过后台的识别,返回图片的有用信息。
方案:
创建摄像头节点
<camera class='scan-camera'
mode="normal"
binderror="cameraError"
bindscancode='scancode'
frame-size='large'>
<cover-view class='border-writh'></cover-view>
<cover-view class='add'> + </cover-view>
</camera>
<view class="bnt">
<view bindtap="takePhoto">识别</view>
</view>
样式
.scan-camera {
width: 100%;
height: 480rpx;
}
.border-writh{
border-radius: 20rpx;
border: 4rpx dotted #FD7102;
margin: 20rpx;
height: calc(100% - 44rpx);
}
.add{
position: absolute;
font-size: 40rpx;
color: #FD7102;
top: 240rpx;
width: 100%;
text-align: center;
}
原理是用微信提供的摄像头功能来,拍照,获取到图片后将其转化成base64编码,然后用第三方的接口实现图片的识别,并返回识别的参数
授权使用相机
// 授权使用相机
getCameraUse() {
wx.getSetting({
success: (res) => {
if (res.authSetting["scope.camera"]) {
wx.authorize({
scope: 'scope.camera',
success: res => {
},
});
}
}
});
},
拍照捕获图片
// 获取图片
takePhoto(e){
var ctx = wx.createCameraContext();
ctx.takePhoto({
quality: 'high',
success: res =>{
wx.getFileSystemManager().readFile({
filePath: res.tempImagePath,
encoding: 'base64',
success: result => {
let src = `data:image/png;base64,${
result.data}`;
console.log(src);
}
})
},
fail: res =>{
console.log(res)
}
})
},