vue+uniapp實現照錄像,相冊選擇 | 圖片裁剪壓縮,視頻壓縮


一、插件簡介

Zhimi-Camera(智密 - 智密 - 相機圖冊插件-視頻/圖片選擇器)是一個支持拍照,錄像,相冊選擇功能,自帶圖片裁剪,圖片壓縮,視頻壓縮,選擇數量限制的uniapp原生插件。
平台支持:Android、IOS

 


 

 

二、效果預覽
在App端測試效果如下:

 

體驗DEMO(安卓瀏覽器掃碼下載)

 


 

 

三、開始使用

(1): 引入插件

首先創建工程,添加完原生插件之后,需要引入插件

var Camera = uni.requireNativePlugin('Zhimi-Camera')

具體的API在插件市場的API文檔中可以查閱,有定制需求或bug提交的也可以自行聯系客服微信(zhimitec)

 

(2): 獲取權限

由於安卓與IOS在讀寫相冊,獲取攝像頭的時候需要先獲取權限,Zhimi-Camera自帶前置的權限檢查,當且僅當用戶同意權限請求才會觸發方法

 

(3): 錄像/拍照

當我們需要進行錄像/拍照操作的時候,可以通過以下API進行操作

Camera.openCamera(ActionOption, ret => {
  // 當用戶拍照/錄像時候將會回調數據
  // ret.type = photo | video
  // photo: 照片
  // video: 視頻
  // ret.type = photo時,ret.imagePath 為照片路徑
  // ret.type = video時,ret.videoPath 為視頻路徑
})

錄像還是拍照,我們可以通過ActionOption中的action和type進行限制,ActionOption的傳值如下

ActionOption = {
  type: 'photo', // photo: 照片 | video: 視頻
  action: 'takePhoto', // takePhoto: 拍照 | record: 錄像
}

 

(4): 選擇圖片/視頻

當我們需要選擇圖片/視頻的時候,可以通過以下API進行操作

Camera.openAlbum(ActionOption, ret => {
  // 當用戶選擇圖片/視頻時候將會回調數據
  // ret.type = photo | video
  // photo: 照片
  // video: 視頻
  // ret.type = photo時,ret.imagePaths 為照片路徑數組
  // ret.type = video時,ret.videoPath 為視頻路徑
})

選擇圖片還是視頻,我們可以通過ActionOption中的type進行限制,而選擇圖片還可以通過maxNum確定最大數量,ActionOption的傳值如下

ActionOption = {
  type: 'photo', // photo: 照片 | video: 視頻
  maxNum: 9, // maxNum: 最大數量(拍照/錄像/選擇視頻時固定為1),0為無限制
}

 

(5): 注意點

由於需要進行圖片/視頻壓縮,因此我們會將源文件進行復制一份並且操作(轉碼,壓縮),返回給開發者的為復制后的文件路徑,如果僅僅是做上傳操作之后不需要進行其他操作,開發者可以通過plus.io下的api刪除該臨時文件,具體參考html5plus官方文檔:https://www.html5plus.org/doc/zh_cn/io.html#plus.io.FileEntry.remove

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM