第20课 微信小程序实现相机拍照功能

第20课 微信小程序实现相机拍照功能

效果图如下：

camera标签自动打开摄像头

camera标签详情： https://developers.weixin.qq.com/miniprogram/dev/component/camera.html

首先wxml代码：

<view>
  <text>相机拍照功能</text>
  <button class="photo" bindtap="takePhoto">点击拍照</button>
</view>

js代码：

takePhoto(){	
    wx.navigateTo({
      url: '/pages/photo/photo',	//跳转到自定义的一个拍照页面
    })
  },

pages/photo/photo页面内的代码如下：

wxml代码：

<camera
  class="camera"
  frame-size="large"
></camera>
  <!-- frame-size="large"拍照图片高清 -->
<button class='record' bindtap='record'>拍摄</button>

js代码

相机方法的使用文档
https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.takePhoto.html

  // 拍摄按钮按下, 执行record 触发拍摄
  record(){
    this.data.cameraContext = wx.createCameraContext()
    this.data.cameraContext.takePhoto({
      quality:"high", //高质量的图片
      success: res => {
        //res.tempImagePath照片文件在手机内的的临时路径
        let tempImagePath = res.tempImagePath
        wx.saveFile({
          tempFilePath: tempImagePath,
          success: function (res) {
            //返回保存时的临时路径 res.savedFilePath
            const savedFilePath = res.savedFilePath
            // 保存到本地相册
            wx.saveImageToPhotosAlbum({
              filePath: savedFilePath,
            })
          },
          //保存失败回调（比如内存不足）
          fail: console.log
        })
      }
    })
  }

wxss代码：

/* pages/photo/photo.wxss */
.camera{
  width: 100vw;
  height: 100vh;
}
.record{
  position: fixed;
  bottom: 10rpx;
  left: 0;
  right: 0;
  width: 120rpx;
  height: 120rpx;
  margin: auto;
  border-radius: 50%;
}