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

发布于:2024-04-26 ⋅ 阅读:(24) ⋅ 点赞:(0)

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

1.1、到插件市场先下载js_sdk

1.2、引入js_sdk

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

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

  <button @click="requestAndroidPermission('android.permission.CAMERA')">摄像头权限</button>
  <button @click="requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE')">相册权限</button>


async requestAndroidPermission(permisionID) {
	var result = await permision.requestAndroidPermission(permisionID)
	var strStatus
	if (result == 1) {
		strStatus = "已获得授权"
	} else if (result == 0) {
		strStatus = "未获得授权"
	} else {
		strStatus = "被永久拒绝权限"
	}

},

1.4、 iOS手机获取权限方法

<button  @click="judgeIosPermission('camera')">摄像头权限</button>
<button  @click="judgeIosPermission('photoLibrary')">相册权限</button>

judgeIosPermission: function(permisionID) {
	var result = permision.judgeIosPermission(permisionID)
	console.log(result);
	var strStatus = (result) ? "已" : "未"
},

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

<button @click="gotoAppPermissionSetting">打开手机系统权限设置</button>

gotoAppPermissionSetting: function() {
	permision.gotoAppPermissionSetting()
}

二 、打开相册功能实现

<button @click="OpenAlbum">打开相册</button>

OpenAlbum() {
	      uni.chooseImage({
	        count: 1, // 默认9,设置图片的数量
	        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
	        sourceType: ['album'],//['camera'], // 可以指定来源是相册还是相机,默认二者都有
	        success: (res) => {
	          // 成功选择照片后的回调
	          const tempFilePaths = res.tempFilePaths;
	          console.log(tempFilePaths);
	          // 这里可以执行上传图片等后续操作
			  // uni.uploadFile({//将本地资源上传到开发者服务器
			  // 					url:baseURL+'/api/Common/upload', //接口地址
			  // 					filePath: res.tempFilePaths[0],//图片地址
			  // 					name: 'file',
			  // 					formData:{
			  // 						access_token:uni.getStorageSync('access_token'),//加入token
			  // 					},
			  // 					success: (uploadFileRes) => {
			  // 						let data = JSON.parse(uploadFileRes.data)
			  // 						if(data.code ==1){
			  // 							this.my_avatar = data.data.url;//上传成功后返回的图片地址
			  // 						}
			  // 					}
			  // 				});
	        },
	        fail: (err) => {
	          console.log('选择照片失败:', err);
	        }
	      });
	    },

 

三 、拍照功能实现

 <button @click="takePhoto">拍照</button>

takePhoto() {
	      uni.chooseImage({
	        count: 1, // 默认9,设置图片的数量
	        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
	        sourceType: ['camera'], // 可以指定来源是相册还是相机,默认二者都有
	        success: (res) => {
	          // 成功选择照片后的回调
	          const tempFilePaths = res.tempFilePaths;
	          console.log(tempFilePaths);
	        },
	        fail: (err) => {
	          console.log('选择照片失败:', err);
	        }
	      });
	    },

 

四、视频录制功能实现

<button  @click="chooseVideo()">相册录制</button>

chooseVideo(){
	uni.chooseVideo({
		count: 1,
		sourceType: ['camera'],
		maxDuration: 60, // 最大视频录制时长(秒)
		success: function (res) {
			    console.log('选择视频成功,返回的参数:', res);
			    // 可以使用 res.tempFilePath 获取视频的本地路径
		},
		fail: function (err) {
			    console.error('选择视频失败:', err);
		}
	});
},