camera

基础库 1.6.0 开始支持，低版本需做兼容处理

系统相机。

需要用户授权 scope.camera

属性名 类型 默认值 说明 最低版本
mode String normal 有效值为 normal, scanCode 2.1.0
device-position String back 前置或后置，值为front, back
flash String auto 闪光灯，值为auto, on, off
scan-area Array 扫码识别区域，格式为[x, y, w, h]，x,y是相对于camera显示区域的左上角，w,h为区域宽度，单位px，仅在 mode="scanCode" 时生效 2.1.0
bindstop EventHandle 摄像头在非正常终止时触发，如退出后台等情况
binderror EventHandle 用户不允许使用摄像头时触发
bindscancode EventHandle 在成功识别到一维码时触发，仅在 mode="scanCode" 时生效 2.1.0

相关api：wx.createCameraContext

Bug & Tip
  • tip: camera 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image覆盖在上面。
  • tip: 同一页面只能插入一个 camera 组件。
  • tip: 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件。
  • bug: scan-area 属性目前存在识别区域不准的问题，建议先不指定

示例：

在开发者工具中预览效果

  1. <!-- camera.wxml -->
  2. <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
  3. <button type="primary" bindtap="takePhoto">拍照</button>
  4. <view>预览</view>
  5. <image mode="widthFix" src="{{src}}"></image>
  1. // camera.js
  2. Page({
  3.     takePhoto() {
  4.         const ctx = wx.createCameraContext()
  5.         ctx.takePhoto({
  6.             quality: 'high',
  7.             success: (res) => {
  8.                 this.setData({
  9.                     src: res.tempImagePath
  10.                 })
  11.             }
  12.         })
  13.     },
  14.     error(e) {
  15.         console.log(e.detail)
  16.     }
  17. })

原文:

https://developers.weixin.qq.com/miniprogram/dev/component/camera.html