微信小程序拍照并图片转base64码

问题:

通过拍照来识别图片,自定义拍照框,拍照后转成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)
    }
  })
},

猜你喜欢

转载自blog.csdn.net/qq_1296888290/article/details/112205257