乐趣区

关于uni-app:uniapp框架如何实现仿微信相册插件-图视频编辑-压缩

jiezi

在上上篇文章中（），咱们基于 uniapp 框架实现了仿微信相册中的拍照 + 录像性能。明天，就持续在 uni-app 中实现：

1: 图片编辑

2: 视频编辑

3: 文件压缩

成果预览：

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

成果预览


业务剖析

这里次要是承接上次写的仿微信相册(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 种压缩形式。

引入压缩模块

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 插件市场中的插件
智密相册 - 自定义原生相册 + 图片视频过滤

退出移动版