乐趣区

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

在上上篇文章中(),咱们基于 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 插件市场中的插件
智密相册 - 自定义原生相册 + 图片视频过滤

退出移动版