当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序使用相机组件如何实现

微信小程序使用相机组件如何实现

2018-08-31 11:36 来源: 霸界科技

摘要:许多微信小程序都会用到相机,那么相机组件是如何实现的,下面为大家介绍这篇文章。...

期权保本理财
  许多微信小程序都会用到相机,那么相机组件是如何实现的,下面为大家介绍这篇文章。
 
微信小程序使用相机组件如何实现
 
  微信小程序使用相机组件如何实现
 
  <view class="page-body">
 
  <view class="page-body-wrapper">
 
  <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
 
  <view class="btn-area">
 
  <button type="primary" bindtap="takePhoto">拍照</button>
 
  </view>
 
  <view class="btn-area">
 
  <button type="primary" bindtap="startRecord">开始录像</button>
 
  </view>
 
  <view class="btn-area">
 
  <button type="primary" bindtap="stopRecord">结束录像</button>
 
  </view>
 
  <view class="preview-tips">预览</view>
 
  <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
 
  <video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
 
  </view>
 
  </view>
 
  onLoad() {
 
  this.ctx = wx.createCameraContext()
 
  },
 
  takePhoto() {
 
  this.ctx.takePhoto({
 
  quality: 'high',
 
  success: (res) => {
 
  this.setData({
 
  src: res.tempImagePath
 
  })
 
  }
 
  })
 
  },
 
  startRecord() {
 
  this.ctx.startRecord({
 
  success: (res) => {
 
  console.log('startRecord')
 
  }
 
  })
 
  },
 
  stopRecord() {
 
  this.ctx.stopRecord({
 
  success: (res) => {
 
  this.setData({
 
  src: res.tempThumbPath,
 
  videoSrc: res.tempVideoPath
 
  })
 
  }
 
  })
 
  },
 
  error(e) {
 
  console.log(e.detail)
 
  }
 
  /* pages/one/one.wxss */
 
  .preview-tips {
 
  margin: 20rpx 0;
 
  }
 
  .video {
 
  margin: 50px auto;
 
  width: 100%;
 
  height: 300px;
 
  }
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088