vue+uniapp实现照录像，相册选择 ｜ 图片裁剪压缩，视频压缩

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一、插件简介

Zhimi-Camera(智密 - 智密 - 相机图册插件-视频/图片选择器)是一个支持拍照，录像，相册选择功能，自带图片裁剪，图片压缩，视频压缩，选择数量限制的uniapp原生插件。
平台支持：Android、IOS

二、效果预览
在App端测试效果如下：

体验DEMO（安卓浏览器扫码下载）

三、开始使用

(1): 引入插件

首先创建工程，添加完原生插件之后，需要引入插件

var Camera = uni.requireNativePlugin(\'Zhimi-Camera\')

具体的API在插件市场的API文档中可以查阅，有定制需求或bug提交的也可以自行联系客服微信(zhimitec)

(2): 获取权限

由于安卓与IOS在读写相册，获取摄像头的时候需要先获取权限，Zhimi-Camera自带前置的权限检查，当且仅当用户同意权限请求才会触发方法

(3): 录像/拍照

当我们需要进行录像/拍照操作的时候，可以通过以下API进行操作

Camera.openCamera(ActionOption, ret => {
　　// 当用户拍照/录像时候将会回调数据
　　// ret.type = photo | video
　　// photo: 照片
　　// video: 视频
　　// ret.type = photo时，ret.imagePath 为照片路径
　　// ret.type = video时，ret.videoPath 为视频路径
})

录像还是拍照，我们可以通过ActionOption中的action和type进行限制，ActionOption的传值如下

ActionOption = {
　　type: \'photo\', // photo: 照片 ｜ video: 视频
　　action: \'takePhoto\', // takePhoto: 拍照 ｜ record: 录像
}

(4): 选择图片/视频

当我们需要选择图片/视频的时候，可以通过以下API进行操作

Camera.openAlbum(ActionOption, ret => {
　　// 当用户选择图片/视频时候将会回调数据
　　// ret.type = photo | video
　　// photo: 照片
　　// video: 视频
　　// ret.type = photo时，ret.imagePaths 为照片路径数组
　　// ret.type = video时，ret.videoPath 为视频路径
})

选择图片还是视频，我们可以通过ActionOption中的type进行限制，而选择图片还可以通过maxNum确定最大数量，ActionOption的传值如下

ActionOption = {
　　type: \'photo\', // photo: 照片 ｜ video: 视频
　　maxNum: 9, // maxNum: 最大数量（拍照/录像/选择视频时固定为1），0为无限制
}

(5): 注意点

由于需要进行图片/视频压缩，因此我们会将源文件进行复制一份并且操作（转码，压缩），返回给开发者的为复制后的文件路径，如果仅仅是做上传操作之后不需要进行其他操作，开发者可以通过plus.io下的api删除该临时文件，具体参考html5plus官方文档：https://www.html5plus.org/doc/zh_cn/io.html#plus.io.FileEntry.remove

以上是 vue+uniapp实现照录像，相册选择 ｜ 图片裁剪压缩，视频压缩 的全部内容， 来源链接： utcz.com/z/375910.html

回到顶部