用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序使用相机

纸飞机 2018-11-12 16:05

拍照 开始录像 结束录像 预览 onLoad() { this.ctx = wx.createCameraContext() }, takePhoto() { this.ctx.takePhoto({ quality: 'high', success: ...


  1. class="page-body">
  2. class="page-body-wrapper">
  3. device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;">
  4. class="btn-area">
  5. type="primary" bindtap="takePhoto">拍照
  6. class="btn-area">
  7. type="primary" bindtap="startRecord">开始录像
  8. class="btn-area">
  9. type="primary" bindtap="stopRecord">结束录像
  10. class="preview-tips">预览
  11. wx:if="{{src}}" mode="widthFix" src="{{src}}">
  12. wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}">
  1. onLoad() {
  2. this.ctx = wx.createCameraContext()
  3. },
  4. takePhoto() {
  5. this.ctx.takePhoto({
  6. quality: 'high',
  7. success: (res) => {
  8. this.setData({
  9. src: res.tempImagePath
  10. })
  11. }
  12. })
  13. },
  14. startRecord() {
  15. this.ctx.startRecord({
  16. success: (res) => {
  17. console.log('startRecord')
  18. }
  19. })
  20. },
  21. stopRecord() {
  22. this.ctx.stopRecord({
  23. success: (res) => {
  24. this.setData({
  25. src: res.tempThumbPath,
  26. videoSrc: res.tempVideoPath
  27. })
  28. }
  29. })
  30. },
  31. error(e) {
  32. console.log(e.detail)
  33. }
  1. /* pages/one/one.wxss */
  2. .preview-tips {
  3. margin: 20rpx 0;
  4. }
  5. .video {
  6. margin: 50px auto;
  7. width: 100%;
  8. height: 300px;
  9. }
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏