• uniapp实现相册、拍照及视频录制功能


    一、调用相册、拍照及视频录制功能要先获取相册权限,摄像头权限,要不然,调用不了下面的方法

    1.1、到插件市场先下载js_sdk

    1.2、引入js_sdk

    import permision from "@/js_sdk/wa-permission/permission.js"

    1.3 、安卓手机获取权限方法

    1. <button @click="requestAndroidPermission('android.permission.CAMERA')">摄像头权限</button>
    2. <button @click="requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE')">相册权限</button>
    3. async requestAndroidPermission(permisionID) {
    4. var result = await permision.requestAndroidPermission(permisionID)
    5. var strStatus
    6. if (result == 1) {
    7. strStatus = "已获得授权"
    8. } else if (result == 0) {
    9. strStatus = "未获得授权"
    10. } else {
    11. strStatus = "被永久拒绝权限"
    12. }
    13. },

    1.4、 iOS手机获取权限方法

    1. <button @click="judgeIosPermission('camera')">摄像头权限</button>
    2. <button @click="judgeIosPermission('photoLibrary')">相册权限</button>
    3. judgeIosPermission: function(permisionID) {
    4. var result = permision.judgeIosPermission(permisionID)
    5. console.log(result);
    6. var strStatus = (result) ? "已" : "未"
    7. },

     1.5、注意:如果未获得权限需要跳到应用去打开权限

    1. <button @click="gotoAppPermissionSetting">打开手机系统权限设置</button>
    2. gotoAppPermissionSetting: function() {
    3. permision.gotoAppPermissionSetting()
    4. }

    二 、打开相册功能实现

    1. <button @click="OpenAlbum">打开相册</button>
    2. OpenAlbum() {
    3. uni.chooseImage({
    4. count: 1, // 默认9,设置图片的数量
    5. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
    6. sourceType: ['album'],//['camera'], // 可以指定来源是相册还是相机,默认二者都有
    7. success: (res) => {
    8. // 成功选择照片后的回调
    9. const tempFilePaths = res.tempFilePaths;
    10. console.log(tempFilePaths);
    11. // 这里可以执行上传图片等后续操作
    12. // uni.uploadFile({//将本地资源上传到开发者服务器
    13. // url:baseURL+'/api/Common/upload', //接口地址
    14. // filePath: res.tempFilePaths[0],//图片地址
    15. // name: 'file',
    16. // formData:{
    17. // access_token:uni.getStorageSync('access_token'),//加入token
    18. // },
    19. // success: (uploadFileRes) => {
    20. // let data = JSON.parse(uploadFileRes.data)
    21. // if(data.code ==1){
    22. // this.my_avatar = data.data.url;//上传成功后返回的图片地址
    23. // }
    24. // }
    25. // });
    26. },
    27. fail: (err) => {
    28. console.log('选择照片失败:', err);
    29. }
    30. });
    31. },

     

    三 、拍照功能实现

    1. <button @click="takePhoto">拍照</button>
    2. takePhoto() {
    3. uni.chooseImage({
    4. count: 1, // 默认9,设置图片的数量
    5. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
    6. sourceType: ['camera'], // 可以指定来源是相册还是相机,默认二者都有
    7. success: (res) => {
    8. // 成功选择照片后的回调
    9. const tempFilePaths = res.tempFilePaths;
    10. console.log(tempFilePaths);
    11. },
    12. fail: (err) => {
    13. console.log('选择照片失败:', err);
    14. }
    15. });
    16. },

     

    四、视频录制功能实现

    1. <button @click="chooseVideo()">相册录制</button>
    2. chooseVideo(){
    3. uni.chooseVideo({
    4. count: 1,
    5. sourceType: ['camera'],
    6. maxDuration: 60, // 最大视频录制时长(秒)
    7. success: function (res) {
    8. console.log('选择视频成功,返回的参数:', res);
    9. // 可以使用 res.tempFilePath 获取视频的本地路径
    10. },
    11. fail: function (err) {
    12. console.error('选择视频失败:', err);
    13. }
    14. });
    15. },

  • 相关阅读:
    【Matlab2016】Matlab中文版的下载、安装、激活(不建议安装过高版本!!)
    IO流原理及流的分类
    使用Pyhton执行JavaScript-pyexecjs
    LVS+DR+apache+keepalived负载均衡
    外卖项目(SpringBoot)--- 项目功能演示
    maven引入kabeja依赖
    jmeter下载地址
    基于C语言的图论汇编
    python自动化系列之python操作pptx文件
    [网鼎杯 2020 朱雀组]phpweb-1|反序列化
  • 原文地址:https://blog.csdn.net/qq_40063198/article/details/138188896