【进阶】uniapp复现微信相册功能之【图视频编辑 + 压缩】

基于uniapp + vue实现微信相册，在实现了微信相册的基础上增加以下功能

1: 图片编辑

2: 视频编辑

3: 文件压缩

---

技术实现

开发环境：HbuilderX + nodejs

技术框架：uniapp + vue2.x

测试环境：App端(Android + IOS)

代码：开源

---

效果概览

---

业务分析

这里主要是承接上次写的仿微信相册(选择界面 +自定义相册+图片视频过滤）的继续扩展下去，对于插件而言，当用户点击图片非选区的位置的时候，插件会调用回调事件反馈点击编辑事件，具体如下 ：

// 相册事件回调 AlbumCallbackHanlder (res) { let { type, data } = res switch (type) { // 触发点击编辑图视频 case 'onClickEditImage': // 这里的data就是触发的文件路径 console.log(res); break; default: console.log(res) break; } }

当我们触发了编辑事件之后，我们就可以开始调用api执行编辑图视频

---

编辑图视频

编辑图视频相对来说简单，我们只需要传入文件路径，插件自己内部会自动解析应该是编辑图片还是编辑视频，但是我们提供的路径必须是原生可识别的路径， 以 / 开头。如果是特殊路径，可以使用plus自带的方法进行路径转换，具体如下：

let localPath = plus.io.convertLocalFileSystemURL(path)

引入插件对象

var sdkwx = uni.requireNativePlugin('Zhimi-EditImage');

编辑图视频

// path 原文件路径

// distPath 编辑后文件保存路径

sdkwx.edit(path, distPath => {

console.log(distPath)

})

这里其实很简单的就是传入路径之后就会弹出来文件编辑界面，但是不一样的是如果我们编辑之后需要同步的更新到相册中，我们需要调用以下方法

更新相册Item

// 这里编辑完成之后调用，过后调用默认更新最后一次编辑的文件 albumView.changeListEditImage(path)

图片视频压缩

在这里一般得到的是原图，原视频。随着现在手机设备的性能提升，相机分辨率也随之提升，拍出来的视频图片往往已经超过了1080p的范畴了，对于服务器来说压力非常在，在这里我们可以通过插件内置的压缩模块压缩图片视频，一共有3种压缩方式。

引入压缩模块

var sdkwx = uni.requireNativePlugin('Zhimi-compression');

压缩图片

// 0.5 压缩质量比

// path 传入文件路径，/ 开头

// distPath 返回文件路径， / 开头，前端显示要加file:// 前缀

sdkwx.compressPicQuality(0.5, path, distPath => {

console.log(distPath)

})

缩放图片

// 750 目标高度

// path 传入文件路径，/ 开头

// distPath 返回文件路径， / 开头，前端显示要加file:// 前缀

sdkwx.compressPicSize(750, path, distPath => {

console.log(distPath)

})

压缩视频

// path 传入文件路径，/ 开头

// 10 超过10M体积才压缩视频，根据插件内置算法自动压缩，单位M

// distPath 返回文件路径， / 开头，前端显示要加file:// 前缀

sdkwx.compressVideo(path, 10, distPath => {

console.log(distPath)

})

这里还是需要注意的一点就是文件路径的问题，传入给插件的路径需要是 / 开头，因为原生是不认uniapp的_doc, _www之类开头的特殊路径的，如果是特殊路径，最好先转化一遍，用plus的方法就可以完美转成原生路径啦

let localPath = plus.io.convertLocalFileSystemURL(path)

ok，到这里对于uniapp实现微信相册扩展出图视频压缩的功能就分享结束啦，希望感兴趣的小伙伴可以动手试试看哦