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

      

  • 相关阅读:
    iOS学习——键盘弹出遮挡输入框问题解决方案
    知识扩展——Git和GitHub的区别
    iOS项目——项目开发环境搭建
    iOS学习——iOS项目Project 和 Targets配置详解
    iOS扩展——Objective-C开发编程规范
    iOS学习——Xcode9上传项目到GitHub
    Mac OS Sierra如何打开任何来源
    iOS学习——UIAlertController详解
    iOS学习——获取iOS设备的各种信息
    Drag and drop folder to a TextBox in C#
  • 原文地址:https://www.cnblogs.com/suitcases/p/14265909.html
Copyright © 2011-2022 走看看