提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

官方组件源码微信程序 展示 媒体 Camera
2023-06-13 09:13:50 时间

以下将展示微信小程序之媒体组件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>

版权声明： 本站所有内容均由互联网收集整理、上传，如涉及版权问题，请联系我们第一时间处理。

原文链接地址：https://developers.weixin.qq.com/miniprogram/dev/component/camera.html

相关文章