打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
微信小程序|调用相机
相机是一个媒体组件,调用相机听起来很复杂,但其实比设计导航或列表界面更为简单。
使用camera组件不需要在wxss添加样式,只需要在js提供数据以及在wxml绑定数据即可调用相机。
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>
Js:
// pages/headline/headline.js
Page({
takePhoto(){
const ctx=wx.createCameraContext()
ctx.takePhoto({
quality:'high',
success:(res)=>{
this.set.Data({
src:res.tempImagePath
})
}
})
},
error(e){
console.log(e.detail)
}
})
效果图:
图1 调用相机
代码解释:
device-position是控制摄像头朝向的属性,前置为front,后置为back,默认调用后置。flash则是负责闪光灯的属性,值为auto,on和off。binderror是一个事件属性(即需要在特定情况下才能触发),他的触发条件是在用户不允许使用相机时。
组件的使用代码并不繁杂,但是要理解它的含义还需要更深入的学习。
END实习编辑   |   王楠岚
责       编   |   赵   微
where2go 团队
微信号:算法与编程之美
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
小程序 - 颜值大师
three.js 源码注释(二十八)Cameras/Camera.js
Three.js Example 注解 —— css3d_youtube.html
微信小程序组件化开发框架
React 属性和状态详解
js改变img标签的src属性在IE下没反应的解决方法
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服