zoukankan      html  css  js  c++  java
  • 小程序API(1.9)利用API方法wx.chooseImage()和wx.chooseVideo()进行拍照和摄像

    <!--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 回调函数的参数属性

      

  • 相关阅读:
    重学数据结构系列之——图的储存
    重学数据结构系列之——森林之并查集(Disjoint set)
    nginx的sbin和conf文件不在同一目录怎么装安全狗
    优先队列解哈夫曼编码问题之带权路径长度
    重学数据结构系列之——堆及堆排序
    搭建git私有服务器及同步更新自己网站的文件
    void类型指针的基本用法
    关于c++中const的基本用法
    1054 求平均值 (20 分)
    数数
  • 原文地址:https://www.cnblogs.com/suitcases/p/14265909.html
Copyright © 2011-2022 走看看