微信小程序(二十二) - 拍照功能的实现

vivi_潇潇
1,082 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情

本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过程。本文为本系列第二十二篇：关于拍照功能的实现

在本次项目开发过程中，需要涉及到拍照识别的功能，微信官方是给我们提供了拍照和从相册中获取图片的API的，实现起来也是比较简单。

需求及UI

首先自定义拍照容器的样式，点击下方的拍照图标，即可拍摄图片，点击左侧相册图标进入系统相册后选择图片。

image.png

自定义拍照容器，及拍照功能

1.根据官方提供的camera组件，首先自定义拍照容器，根据自己项目的的ui样式，可对camera容器样式进行自定义，其中常用的属性如：device-position属性为摄像头朝向，flash属性表示相机闪关灯是否开启

微信官方提供关于相机组件的文档点此进入

image.png

wxml

<view class="camera" >
   <camera  device-position="back" flash="off"></camera>
</view>

2.实现拍照，点击拍摄图标后进入takePhoto方法。

使用wx.createCameraContext() 创建 camera上下文 CameraContext对象。

微信官方提供关于createCameraContext的API接口文档点此进入

使用takePhoto拍摄照片

微信官方提供关于拍摄照片的API接口文档点此进入

takePhoto() {
  const ctx = wx.createCameraContext();
  var that = this;
  ctx.takePhoto({
   quality: 'high',
   success: (res) => {
   //res.tempImagePath表示获取到的图片地址
    that.setData({ src: res.tempImagePath });
  }
}); 
}

从相册中获取图片

原本，获取图片的接口可以使用官方提供的wx.chooseImage,不过从从基础库 2.21.0 开始，其接口就停止维护的。

那么我们就选择wx.chooseMedia，一样可以实现。以下为一些常用属性：

属性默认值说明
count9最多可以选择的文件个数
mediaType['image', 'video']文件类型
sourceType['album', 'camera']图片和视频选择的来源
sizeType['original', 'compressed']仅对 mediaType 为 image 时有效，是否压缩所选文件

微信官方提供关于获取相册图片的API接口文档点此进入

代码实现

 choosePhoto(){
   wx.chooseMedia({
    count: 1,
    mediaType:['image'],
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    success (res) {
     const tempFilePaths = res.tempFiles[0].tempFilePath;
   }
 })
}
avatar
文章
阅读
粉丝