微信小程序拍照实现

博客简介

本篇博客介绍组件camera以及如何使用wx.createCameraContext()创建 camera 上下文 CameraContext 对象，使用CameraContext.takePhoto(Object object)
拍摄照片，获取临时保存的照片

• 组件camera
• 用wx.createCameraContext()创建 camera 上下文 CameraContext 对象
• 使用CameraContext.takePhoto(Object object)拍摄照片
• 获取临时保存的照片

组件camera

系统相机。扫码二维码功能，需升级微信客户端至6.7.3。需要用户授权 scope.camera。 2.10.0起 initdone 事件返回 maxZoom，最大变焦范围，相关接口 CameraContext.setZoom。

属性参数

属性	类型	默认值	必填	说明	最低版本
mode	string	normal	否	应用模式，只在初始化时有效，不能动态变更	2.1.0
resolution	string	medium	否	分辨率，不支持动态修改	2.10.0
device-position	string	back	否	摄像头朝向	1.0.0
flash	string	auto	否	闪光灯，值为auto, on, off	1.0.0
frame-size	string	medium	否	指定期望的相机帧数据尺寸	2.7.0
bindstop	eventhandle		否	摄像头在非正常终止时触发，如退出后台等情况	1.0.0
binderror	eventhandle		否	用户不允许使用摄像头时触发	1.0.0
bindinitdone	eventhandle		否	相机初始化完成时触发，e.detail = {maxZoom}	2.7.0
bindscancode	eventhandle		否	在扫码识别成功时触发，仅在 mode="scanCode" 时生效	2.1.0

mode 的合法值

值	说明	最低版本
normal	相机模式
scanCode	扫码模式

resolution 的合法值

值	说明	最低版本
low	低
medium	中
high	高

device-position 的合法值

值	说明	最低版本
front	前置
back	后置

frame-size 的合法值

值	说明	最低版本
small	小尺寸帧数据
medium	中尺寸帧数据
large	大尺寸帧数据

插入照相功能组件：

<camera binderror="error" style="width: 100%; height: 300px; border: 2px solid skyblue;">camera>
<button type="warn" bindtap="takePhoto" style="display:block">点击拍照button>
<image mode="widthFix" src="{{src}}">image>

设置takePhoto()函数

函数的功能如下

• 用wx.createCameraContext()创建 camera 上下文 CameraContext 对象
• 用wx.createCameraContext()创建 camera 上下文 CameraContext 对象
• 使用CameraContext.takePhoto(Object object)拍摄照片
• 获取临时保存的照片

  takePhoto()
  {
      var that=this;
      var ctx=wx.createCameraContext();
      ctx.takePhoto({
        quality:'high',
        success:function(res)
        {
          that.setData({
            src:res.tempImagePath
          })
        }
      })
  },

效果展示