下将展示微信小程序之媒体组件camera源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。
功能描述:
系统相机。扫码二维码功能,需升级微信客户端至6.7.3。需要用户授权 scope.camera。 2.10.0起 initdone 事件返回 maxZoom,最大变焦范围,相关接口 CameraContext.setZoom。
属性说明:
属性类型默认值必填说明最低版本
modestringnormal否应用模式,只在初始化时有效,不能动态变更2.1.0
合法值说明
normal相机模式
scanCode扫码模式
resolutionstringmedium否分辨率,不支持动态修改2.10.0
合法值说明
low低
medium中
high高
device-positionstringback否摄像头朝向1.0.0
合法值说明
front前置
back后置
flashstringauto否闪光灯,值为
auto , on, off
1.0.0
合法值说明最低版本
auto自动
on打开
off关闭
torch常亮2.8.0
frame-sizestringmedium否指定期望的相机帧数据尺寸2.7.0
合法值说明
small小尺寸帧数据
medium中尺寸帧数据
large大尺寸帧数据
bindstopeventhandle否摄像头在非正常终止时触发,如退出后台等情况1.0.0
binderroreventhandle否用户不允许使用摄像头时触发1.0.0
bindinitdoneeventhandle否相机初始化完成时触发,e.detail = {maxZoom}2.7.0
bindscancodeeventhandle否在扫码识别成功时触发,仅在
mode="scanCode" 时生效
2.1.0
Bug & Tip
1.tip: 同一页面只能插入一个 camera 组件
2.tip:请注意原生组件使用限制
3.tip:onCameraFrame 接口根据 frame-size 返回不同尺寸的原始帧数据,与 Camera 组件展示的图像不同,其实际像素值由系统决定
示例代码
JAVASCRIPT
代码语言:javascript
复制
// camera.jsPage({takePhoto(){constctx=wx.createCameraContext()ctx.takePhoto({quality:'high',success:(res)=>{this.setData({src:res.tempImagePath})}})},error(e){console.log(e.detail)}})
WXML
代码语言:javascript
复制
<!--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>