【進階】uniapp復現微信相冊功能之【圖視頻編輯 + 壓縮】

基於uniapp + vue實現微信相冊，在實現了微信相冊的基礎上增加以下功能

1: 圖片編輯

2: 視頻編輯

3: 文件壓縮

 

 

---

技術實現

• 開發環境：HbuilderX + nodejs
• 技術框架：uniapp + vue2.x
• 測試環境：App端(Android + IOS)
• 代碼：開源

 

---

 

效果概覽

---

業務分析

 

這里主要是承接上次寫的仿微信相冊(https://www.yuque.com/zhimikeji/zdtppo/hmhvn6)的繼續擴展下去，對於插件而言，當用戶點擊圖片非選區的位置的時候，插件會調用回調事件反饋點擊編輯事件，具體如下：

// 相冊事件回調
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實現微信相冊擴展出圖視頻壓縮的功能就分享結束啦，希望感興趣的小伙伴可以動手試試看哦