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

2023-11-30 20:50:18 浏览数 (1)

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

10.1选择图片

wx.chooseImage(Object object)

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

<font color=red>从基础库 2.21.0 开始，本接口停止维护，请使用 wx.chooseMedia 代替</font>

以 Promise 风格 调用：支持

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

微信 Windows 版：支持

微信 Mac 版：支持

官方文档

参数

Object object

属性

类型

默认值

必填

说明

count

number

9

否

最多可以选择的图片张数

sizeType

Array.<string>

'original', 'compressed'

否

所选的图片的尺寸

sourceType

Array.<string>

'album', 'camera'

否

选择图片的来源

success

function

否

接口调用成功的回调函数

fail

function

否

接口调用失败的回调函数

complete

function

否

接口调用结束的回调函数（调用成功、失败都会执行）

object.sizeType 的合法值

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

object.sourceType 的合法值

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

object.success 回调函数

参数

Object res

属性

类型

说明

最低版本

tempFilePaths

Array.<string>

图片的本地临时文件路径列表 (本地路径)

tempFiles

Array.<Object>

图片的本地临时文件列表

1.2.0

res.tempFiles 的结构

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

代码

代码语言：javascript复制
// 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);
    }
    })
  }
})

页面

代码语言：html复制
<!-- 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

属性

类型

默认值

必填

说明

最低版本

urls

Array.<string>

是

需要预览的图片链接列表。2.2.3 起支持云文件ID。

showmenu

boolean

true

否

是否显示长按菜单。

2.13.0

current

string

urls 的第一张

否

当前显示图片的链接

referrerPolicy

string

no-referrer

否

origin: 发送完整的referrer; no-referrer: 不发送。格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；

2.13.0

success

function

否

接口调用成功的回调函数

fail

function

否

接口调用失败的回调函数

complete

function

否

接口调用结束的回调函数（调用成功、失败都会执行

代码

代码语言：javascript复制
wx.previewImage({
  current: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
})

完整代码

代码语言：javascript复制
// 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：

代码语言：html复制
<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>
代码语言：javascript复制
/* pages/demo/index.wxss */
.preview-tips {
  margin: 20rpx 0;
  }
  .video {
  margin: 50px auto;
  width: 100%;
  height: 300px;
  }
代码语言：javascript复制
// 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)
  }
})

全局样式

代码语言：javascript复制
/**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

属性

类型

默认值

必填

说明

最低版本

onlyFromCamera

boolean

false

否

是否只能从相机扫码，不允许从相册选择图片

1.2.0

scanType

Array.<string>

'barCode', 'qrCode'

否

扫码类型

1.7.0

success

function

否

接口调用成功的回调函数

fail

function

否

接口调用失败的回调函数

complete

function

否

接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性

类型

说明

result

string

所扫码的内容

scanType

string

所扫码的类型

charSet

string

所扫码的字符集

path

string

当所扫的码为当前小程序二维码时，会返回此字段，内容为二维码携带的 path

rawData

string

原始数据，base64编码

示例代码

代码语言：javascript复制
// 允许从相机和相册扫码
wx.scanCode({
  success (res) {
    console.log(res)
  }
})

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

代码

代码语言：html复制
<!--index.wxml-->
<view class="container">
  <button type="primary" bindtap="scanCode">扫描二维码</button>
</view>
代码语言：javascript复制
//index.js
//获取应用实例
const app = getApp()
Page({
  scanCode() {
    wx.scanCode({
      onlyFromCamera: true,
      success(res) {
        console.log(res)
      }
    })
  }
})

效果

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

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

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

1.5 动画

官网文档

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

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

2023腾讯·技术创作特训营第三期

0 人点赞