微信小程序拍照和攝像功能實現方法示例:本文實例講述了微信小程序拍照和攝像功能實現方法。分享給大家供大家參考,具體如下:
微信小程序拍照功能實現邏輯和實例代碼:
原先的想法是使用微信的camera組件來實現,並且模擬發朋友圈的樣子來進行相機的設置,其實就是將camera組件的大小設置成根屏幕一樣大,並在上面使用一個cover-image組件來給用戶進行點擊,可是實際上的情況是:
第一,cover-image組件有時候會消失,
第二,整個流程實現起來很僵硬,頁面跳轉也是卡的要死,後來無意間發現了另一個API:wx.chooseImage
,這個API會自己去調用相機和相冊,之後的工作完全交給底層去實現,簡直是簡單到沒朋友:
// 拍照功能
getLocalImage:function(){
var that=this;
wx.chooseImage({
count:1,
success:function(res){
// 這裏無論用戶是從相冊選擇還是直接用相機拍攝,拍攝完成後的圖片臨時路徑都會傳遞進來
app.startOperating("保存中")
var filePath=res.tempFilePaths[0];
var session_key=wx.getStorageSync('session_key');
// 這裏順道展示一下如何將上傳上來的文件返回給後端,就是調用wx.uploadFile函數
wx.uploadFile({
url: app.globalData.url+'/home/upload/uploadFile/session_key/'+session_key,
filePath: filePath,
name: 'file',
success:function(res){
app.stopOperating();
// 下面的處理其實是跟我自己的業務邏輯有關
var data=JSON.parse(res.data);
if(parseInt(data.status)===1){
app.showSuccess('文件保存成功');
}else{
app.showError("文件保存失敗");
}
}
})
},
fail:function(error){
console.error("調用本地相冊文件時出錯")
console.warn(error)
},
complete:function(){
}
})
},
然後可以封裝在app.js中的函數
微信小程序錄像功能實現邏輯和實例代碼
其實跟上面的原理是一樣的,對應的API就是wx.chooseVideo
,其中可以設置拍攝錄像時間,用戶拍攝結束以及用戶錄像拍攝時間超時等,都會調用success的回調函數,所以又是可以安心處理接下來的業務流程,而不用需要調用camera組件。
實例demo:http://news.vrgc.com.cn
// 攝像功能
getLocalVideo:function(){
var that=this;
var session_key=wx.getStorageSync('session_key');
wx.chooseVideo({
maxDuration:10,
success:function(res1){
app.startOperating("上傳中")
// 這個就是最終拍攝視頻的臨時路徑了
var tempFilePath=res1.tempFilePath;
},
fail:function(){
console.error("獲取本地視頻時出錯");
}
})
},
微信小程序拍照和攝像功能實現起來也是很簡單,但是有一個問題就是沒有辦法像調用camera組件一樣獲取視頻的縮略圖,這是現在唯一的缺陷。但是總體來說,比起調用camera組件,這樣實現起來的確簡單了很多。