<!--pages/API/Camera/index.wxml-->
<view class="box">
  <view class='title'>照相和摄像</view>
  <view>
    <button type='primary' bindtap="chooseimage">获取图片</button>
    <image mode="scaleToFill" src="{{imgPath}}"></image>
    <button type='primary' bindtap="chooseVideo">获取视频</button>
    <video class="video" src="{{videoPath}}"></video>
  </view>
</view>
<image mode="scaleToFill" src="{{imgPath}}"></image>缩放图片,全部填充图片组件的范围
/* pages/API/Camera/index.wxss */

page {
  background-color: #f8f8f8;
  height: 100%;
}

button {
  margin: 20rpx;
}

image {
  background-color: gainsboro;
  height: 200px;
  width: 100%;
}

video {
  width: 100%;
  height: 200px;
}
// pages/API/Camera/index.js
Page({
  chooseimage: function() {
    var that = this;
    wx.chooseImage({
      count: 1, // 默认9,设置选取照片的个数
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function(res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        that.setData({
          imgPath: res.tempFilePaths
        })
      }
    })
  },
  chooseVideo: function() {
    var that = this;
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,//视频最大时长
      camera: ['front', 'back'],//前摄像头还是后摄像头拍摄
      success: function(res) {//接口调用成功首先显示一个消息提示框
        wx.showToast({
          title: res.tempFilePath,//标题是选择视频的路径
          icon: 'success',
          duration: 2000
        })
        that.setData({
          videoPath: res.tempFilePath//视频路径渲染到wxml文件,从而显示这个视频
        })
      }
    })
  }
})
this赋值给that,涉及到了success: function(res) 回调函数,当在回调函数中使用this的时候容易引起当前对象的变化,因此赋值给临时变量
chooseImage函数,只有一个对象类型的参数

API函数wx.chooseImage()的使用方法

  wx.chooseImage(Object object)从本地相册选择图片或使用相机拍照 。 其参数属性如下:

  

  success 回调函数的参数属性

  

   tempFiles 对象数组元素属性

  

API函数wx.chooseVideo()的使用方法

  wx.chooseVideo(Object object)用于拍摄视频或从手机相册中选择视频。 其参数属性如下:      

  

  success 回调函数的参数属性