10-微信小程序 图片 相机 二维码 动画相关API(实现选择相册、拍照、录像、动画)

// pages/demo/index.js
Page({
  data: {},
  onLoad: function(options) {
  },


   /**
   * 选择图片
   */
  chooseImage(){
    wx.chooseImage({
    count: 5,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success(res) {
      console.log(res.tempFilePaths);
    }
    })
  }
})

<!-- pages/demo/index.wxml -->

<button bindtap="chooseImage" size='mini' type="primary">选择照片</button>

wx.previewImage({
  current: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
})

// pages/demo/index.js
Page({
  data: {},
  onLoad: function(options) {
  },
 

   /**
   * 选择图片
   */
  chooseImage(){

    wx.previewImage({
      current: 'https://img-blog.csdnimg.cn/7d9ec09660304c248c2279d72ed9d243.png', // 当前显示图片的http链接
      urls: [
      'https://img-blog.csdnimg.cn/65256cf88e2b413b9eccda34aad5ecbb.png',
      'https://img-blog.csdnimg.cn/d4a81724a53e4f3b85ac9bc2b49bd622.png'
      ] // 需要预览的图片http链接列表
      })
      }
      
  })

<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>

/* pages/demo/index.wxss */
.preview-tips {
  margin: 20rpx 0;
  }
  .video {
  margin: 50px auto;
  width: 100%;
  height: 300px;
  }

// pages/demo/index.js
Page({
  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)
  }
})

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}

.page-body {
  padding: 20rpx 0;
}

.page-body-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.btn-area {
  margin-top: 60rpx;
  box-sizing: border-box;
  width: 100%;
  padding: 0 30rpx;
}

// 允许从相机和相册扫码
wx.scanCode({
  success (res) {
    console.log(res)
  }
})

// 只允许从相机扫码
wx.scanCode({
  onlyFromCamera: true,
  success (res) {
    console.log(res)
  }
})

<!--index.wxml-->
<view class="container">
  <button type="primary" bindtap="scanCode">扫描二维码</button>
</view>

//index.js
//获取应用实例
const app = getApp()
Page({
  scanCode() {
    wx.scanCode({
      onlyFromCamera: true,
      success(res) {
        console.log(res)
      }
    })
  }
})