uniapp框架如何实现仿微信相册插件 | 图视频编辑 + 压缩

在上上篇文章中(),我们基于uniapp框架实现了仿微信相册中的拍照+录像功能。今天,就继续在uni-app中实现:

1: 图片编辑

2: 视频编辑

3: 文件压缩

效果预览:


技术实现
开发环境:HbuilderX + nodejs
技术框架:uniapp + vue2.x
测试环境:App端(Android + IOS)、
代码:开源


效果预览
uniapp框架如何实现仿微信相册插件 | 图视频编辑 + 压缩_第1张图片
uniapp框架如何实现仿微信相册插件 | 图视频编辑 + 压缩_第2张图片
uniapp框架如何实现仿微信相册插件 | 图视频编辑 + 压缩_第3张图片


业务分析
uniapp框架如何实现仿微信相册插件 | 图视频编辑 + 压缩_第4张图片

这里主要是承接上次写的仿微信相册(https://segmentfault.com/a/11...)的继续扩展下去,对于插件而言,当用户点击图片非选区的位置的时候,插件会调用回调事件反馈点击编辑事件,具体如下:

// 相册事件回调
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种压缩方式。
uniapp框架如何实现仿微信相册插件 | 图视频编辑 + 压缩_第5张图片

引入压缩模块

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的方法就可以完美转成原生路径啦


ok,到这里uniapp实现仿微信相册的部分就分享完成啦,大家可以根据自己的爱好定制,改为仿得物,仿qq相册都可以呀,界面显示形式不唯一嘛。

对于这部分的代码使用到的原生插件,可以参考uniapp插件市场中的插件
智密相册-自定义原生相册+图片视频过滤

你可能感兴趣的:(uniapp框架如何实现仿微信相册插件 | 图视频编辑 + 压缩)