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

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

10.1选择图片

wx.chooseImage(Object object)

功能描述： 从本地相册选择图片或使用相机拍照。

从基础库 2.21.0 开始，本接口停止维护，请使用 wx.chooseMedia 代替

以 Promise 风格 调用：支持

小程序插件：支持，需要小程序基础库版本不低于 1.9.6

微信 Windows 版：支持

微信 Mac 版：支持

官方文档

参数

Object object

object.sizeType 的合法值

合法值	说明
original	原图
compressed	压缩图

object.sourceType 的合法值

合法值	说明
album	从相册选图
camera	使用相机

object.success 回调函数

参数

Object res

res.tempFiles 的结构

结构属性	类型	说明
path	string	本地临时文件路径 (本地路径)
size	number	本地临时文件大小，单位 B

代码

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

效果

以上代码做个测试，需要做真机调试如下图

真机调试->手机扫描->在手机上点击【选择照片】

10.2 预览图片

wx.previewImage(Object object)

功能描述： 在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

以 Promise 风格 调用：支持

小程序插件：支持，需要小程序基础库版本不低于 1.9.6

微信 Windows 版：支持

微信 Mac 版：支持

官方文档

参数

Object object

代码

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链接列表
      })
      }
      
  })

效果

真机调试->手机扫描->在手机上点击【选择照片】如下图是个预览图片的效果

10.3 相机API

官方文档

CameraContext wx.createCameraContext()

基础库 1.6.0 开始支持，低版本需做兼容处理。

小程序插件：支持，需要小程序基础库版本不低于 1.9.6

微信 Windows 版：支持

微信 Mac 版：支持

相关文档: camera 组件介绍

功能描述

创建 camera 上下文 CameraContext 对象。

返回值

CameraContext

index.wxml：

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

效果

效果（需要在真机上测试）如下图

• 拍照

• 录像

10.4 二维码

官方文档

wx.scanCode(Object object)

基础库 1.0.0 开始支持，低版本需做兼容处理。

以 Promise 风格 调用：支持

小程序插件：支持，需要小程序基础库版本不低于 1.9.6

功能描述

调起客户端扫码界面进行扫码

参数

Object object

object.success 回调函数

参数

Object res

示例代码

// 允许从相机和相册扫码
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)
      }
    })
  }
})

效果

效果（需要在真机上测试）如下图

这里有个简单的二维码来用真机调试，（当此二维码无法查看时，可以找别的二维码来进行测试）

手机扫描二维码得到如下结果，返回字符串“Hello World”

1.5 动画

官网文档

往下拉找到-【在开发者工具中预览效果】按提示步骤操作可以直接查看效果

此专栏此阶段完成

代码007普通

打赏 收藏 海报 链接