微信小程序拍照实现

博客简介

本篇博客介绍组件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
          })
        }
      })
  },