溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

微信小程序拍照和攝像功能實現方法示例

發布時間:2020-09-11 13:28:10 來源:腳本之家 閱讀:332 作者:trouble-i-am-in 欄目:web開發

本文實例講述了微信小程序拍照和攝像功能實現方法。分享給大家供大家參考,具體如下:

拍照

原先的想法是使用微信的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組件。

// 攝像功能
  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組件,這樣實現起來的確簡單了很多。

希望本文所述對大家微信小程序開發有所幫助。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女