微信小程序官方组件展示之媒体组件camera源码

软件事业部

发布于 2022-10-08 10:42:34

8730

发布于 2022-10-08 10:42:34

文章被收录于专栏：软件事业部专栏

以下将展示微信小程序之媒体组件camera源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。

功能描述：

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

属性说明：

属性	类型	默认值	必填	说明	最低版本
mode	string	normal	否	应用模式，只在初始化时有效，不能动态变更	2.1.0
合法值	说明
normal	相机模式
scanCode	扫码模式
resolution	string	medium	否	分辨率，不支持动态修改	2.10.0
合法值	说明
low	低
medium	中
high	高
device-position	string	back	否	摄像头朝向	1.0.0
合法值	说明
front	前置
back	后置
flash	string	auto	否	闪光灯，值为 auto , on, off	1.0.0
合法值	说明	最低版本
auto	自动
on	打开
off	关闭
torch	常亮	2.8.0
frame-size	string	medium	否	指定期望的相机帧数据尺寸	2.7.0
合法值	说明
small	小尺寸帧数据
medium	中尺寸帧数据
large	大尺寸帧数据
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

Bug & Tip

1.tip: 同一页面只能插入一个 camera 组件

2.tip:请注意原生组件使用限制

3.tip:onCameraFrame 接口根据 frame-size 返回不同尺寸的原始帧数据，与 Camera 组件展示的图像不同，其实际像素值由系统决定

示例代码

JAVASCRIPT

// camera.js
Page({
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

WXML

<!-- camera.wxml -->
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>