微信小程序-相册选择/拍摄图片或视频封装函数

news/2024/7/20 3:41:34 标签: 微信小程序, 小程序

一、前言

本文实现的功能是:在小程序中通过拍照或者相册选择照片的函数封装,基于最新的API:wx.chooseMedia()

在这里插入图片描述

之前的博客封装过基于wx.chooseImage()的图片选择函数,但是该函数目前已经停止维护,所以重新封装了一个。

在这里插入图片描述

函数使用效果如下

在这里插入图片描述

悬停时会有参数提示,参数做了简化,方便使用时调用
在这里插入图片描述

二、封装的函数代码

函数的注释非常详细,有定制需求的同学可以自行修改代码。调用时悬停或输入参数时会有相应的提示。同时也做了基础库的判断。


  /**
   * 选择图片或视频
   * @param {*} count 文件数量 1-20 基础库2.25.0+ 上限为20 否则为 9
   * @param {*} mediaType 可选择的文件类型 1仅图片 2仅视频 3图片和视频
   * @param {*} sourceType 文件的来源 1仅相册 2仅拍摄 3相册或拍摄
   * @param {*} sizeType 文件是否压缩 1原文件 2压缩 3由用户可选择
   * @param {*} maxDuration 拍摄时视频的时长 3-60s(相册选择不限制)
   * @param {*} cameraType 拍摄时使用前/后相机 1后摄 2前摄
   */
  async chooseMedia(
    count = 1,
    mediaType = 1,
    sourceType = 3,
    sizeType = 3,
    maxDuration = 10,
    cameraType = 1
  ) {
    if (count <= 0) count = 1;
    // 版本比较 2.25.0+ 上限为20
    if (count > 9) {
      const { SDKVersion } = wx.getSystemInfoSync();
      const vRes = compareVersion(SDKVersion, "2.25.0");
      if (vRes < 0 && count >= 20) count = 9;
      else if (vRes >= 0 && count > 20) count = 20;
    }

    // 可选择的文件类型
    let _mediaType = [];
    if (mediaType === 1) _mediaType = ["image"]; // 仅图片
    if (mediaType === 2) _mediaType = ["video"]; // 仅视频
    if (mediaType === 3) _mediaType = ["mix"]; // 图片或视频

    // 文件的来源
    let _sourceType = [];
    if (sourceType === 1) _mediaType = ["album"]; // 仅相册
    if (sourceType === 2) _mediaType = ["camera"]; // 仅相机拍摄
    if (sourceType === 3) _mediaType = ["album", "camera"]; // 相册或相机拍摄

    // 上传压缩或原图
    let _sizeType = [];
    if (sizeType === 1) _sizeType = ["original"];
    if (sizeType === 2) _sizeType = ["compressed"];
    if (sizeType === 3) _sizeType = ["original", "compressed"];

    let _cameraType = "back";
    if (cameraType === 1) _cameraType = "back";
    if (cameraType === 2) _cameraType = "front";

    if (maxDuration < 3) maxDuration = 3;
    if (maxDuration > 60) maxDuration = 60;

    return await wx
      .chooseMedia({
        count,
        mediaType: _mediaType,
        sourceType: _sourceType,
        cameraType: _cameraType,
        maxDuration,
      })
      .then((res) => {
        return res;
      })
      .catch((err) => {
        return err;
      });

    /**
     * 版本比较
     * v1 >= v2 返回 0或1 否则 -1
     * @param {String} v1
     * @param {String} v2
     */
    function compareVersion(v1, v2) {
      v1 = v1.split(".");
      v2 = v2.split(".");
      const len = Math.max(v1.length, v2.length);

      while (v1.length < len) {
        v1.push("0");
      }
      while (v2.length < len) {
        v2.push("0");
      }

      for (let i = 0; i < len; i++) {
        const num1 = parseInt(v1[i]);
        const num2 = parseInt(v2[i]);
        if (num1 > num2) {
          return 1;
        } else if (num1 < num2) {
          return -1;
        }
      }
      return 0;
    }
  },

三、结语

最后来一下常规结语:
实际开发中的其他逻辑就不写了。需要同学们自己去考虑异常情况处理等问题啦。

有任何疑问可以在评论区留下。我每天都会进行回复,私聊不回。(为了刷积分)

以上均是本人开发过程中的一些经验总结与领悟,如果有什么不正确的地方,希望大佬们评论区斧正。

💥最后!!!不管这篇文章对你有没有用,既然都看到最后了。
👍赞一个!!!
🤩当然,顺带收藏就最好了。
😎欢迎转载,原创不易,转载请注明出处✍️。

😊如果你对小程序开发有兴趣或者正在学习小程序开发,可以关注我。每一篇都是原创,每一篇都是干货噢~。

————————————————
版权声明:本文为CSDN博主「super–Yang」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44702572/article/details/135141353


http://www.niftyadmin.cn/n/5278958.html

相关文章

Ubuntu 22.04 系统创建用户并授权sudo权限

文章目录 Ubuntu 22.04 系统创建用户并授权sudo权限添加用户将用户添加到 sudo 用户组中&#xff0c;以使其具有执行需要管理员权限的命令的能力 Ubuntu 22.04 系统创建用户并授权sudo权限 添加用户 adduser zkdocker我们刚刚创建了一个名为“zkdocker”的新用户&#xff0c;…

Flutter本地化(国际化)之App名称

文章目录 Android国际化IOS国际化 Flutter开发的App&#xff0c;如果名称想要跟随着系统的语言自动改变&#xff0c;则必须同时配置Android和IOS原生。 Android国际化 打开android\app\src\main\res\values 创建strings.xml 在values上右键&#xff0c;选择New>Values Res…

CUDA 学习记录2

1.是否启用一级缓存有什么影响&#xff1a; 启用一级缓存&#xff08;缓存加载操作经过一级缓存&#xff09;&#xff1a;一次内存十五操作以128字节的粒度进行。 不启用一级缓存&#xff08;没有缓存的加载不经过一级缓存&#xff09;&#xff1a;在内存段的粒度上&#xff…

109基于MATLAB 中的设施布局设计和位置分配

基于MATLAB 中的设施布局设计和位置分配&#xff0c;通过PSO算法进行最佳位置匹配。程序已调通&#xff0c;可直接运行。 109设施布局设计和位置分配通 (xiaohongshu.com)

字符设备驱动代码的完善

一. 简介 前面编写了字符设备驱动的框架。文章地址如下&#xff1a; 字符设备的注册与注销实现-CSDN博客 本文来完善字符设备驱动代码。即在字符驱动代码中加入一些代码实现。 要求&#xff1a;应用程序可以对驱动读写操作&#xff0c;读就是从驱动里面读取字符串&#xff…

【随笔】MD5加密字符串、文件commons-codec、springframework实现

文章目录 一、引入依赖二、工具代码三、测试代码四、输出结果 一、引入依赖 commons-codec <dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId><version>1.13</version> </dependency>二…

ICLR 2024 高分论文 | Step-Back Prompting 使大语言模型通过抽象进行推理

文章目录 一、前言二、主要内容三、总结🍉 CSDN 叶庭云:https://yetingyun.blog.csdn.net/ 一、前言 ICLR 2024 高分论文:《Step-Back Prompting Enables Reasoning Via Abstraction in Large Language Models》 论文地址:https://openreview.net/forum?id=3bq3jsvcQ1 …

提升Elasticsearch性能的一些经验

分片查询缓存(Shard Request Cache) ES 层面的缓存实现,封装在 IndicesRequestCache 类中。缓存的 Key 是整个客户端请求,缓存内容为单个分片的查询结果。主要作用是对聚合的缓存,查询结果中被缓存的内容主要包括:Aggregations(聚合结果)、Hits.total、以及 Suggestion…