微信小程序實現拍照界面自定義實現

最近有一個項目須要對拍照界面進行自定義，以前使用的是html寫的項目界面，可是在html中想要自定義拍照界面十分的困難,因而想到了使用微信小程序來實現拍照界面的自定義

在微信小程序中實現自定義拍照功能主要使用到以下的組件和API

1：camera組件

常見的屬性有:

(1)：mode

應用模式，只在初始化時有效，不能動態變動，參數有：normal(相機模式),scanCode(掃碼模式) ，默認爲normal

(2)：device-position

攝像頭朝向，參數有front(前置),back(後置)，默認爲back

(3)：flash

閃關燈，參數有：auto(自動,手機相機目前的閃光燈狀態), on(打開閃光燈), off(關閉閃光燈)，默認爲auto

(4)：binderror

用戶不容許使用攝像頭時觸發事件

例如:

<camera device-position="back" flash="off" >  
</camera>

2：拍攝照片API(CameraContext.takePhoto)

參數說明：

(1)quality

成像質量,參數有：high(高質量),normal(普通質量),low(低質量)，默認爲normal

(2)success

接口調用成功的回調函數

(3)fail

接口調用失敗的回調函數

例如：

//拍攝照片  
wx.createCameraContext().takePhoto({  
  quality: 'high',//拍攝質量(high:高質量 normal:普通質量 low:高質量)  
  success: (res) => {  
    //拍攝成功  
    //照片文件的臨時文件  
    var file = res.tempImagePath;  
  },  
  fail: (res) => {  
    //拍攝失敗  
  },  
})

3:上傳拍照文件API(uploadFile)

參數說明：

url:上傳文件的服務器地址

filePath:要上傳文件資源的路徑 (本地路徑)

name:文件對應的 key，開發者在服務端能夠經過這個 key 獲取文件的二進制內容

formData:HTTP 請求中其餘額外的參數

success：接口調用成功的回調函數

fail：接口調用失敗的回調函數

例如：

wx.chooseImage({  
  success (res) {  
    const tempFilePaths = res.tempFilePaths  
    wx.uploadFile({  
      url: 'https://example.weixin.qq.com/upload', //僅爲示例，非真實的接口地址  
      filePath: tempFilePaths\[0\],  
      name: 'file',  
      formData: {  
        'user': 'test'  
      },  
      success: (res) => {  
        //上傳成功  
      },  
      fail: function(t) {  
        //上傳失敗  
    },  
    })  
  }  
})

4：根據如上咱們就能夠實如今微信小程序中自定義拍照頁面來實現上傳

(1)：wxml端：

<!--pages/web/index.wxml-->  
<camera binderror="handleCameraError" device-position="{{devicePosition}}" flash="off"  wx:if="{{authCamera}}">  
<cover-view>  
    <cover-image class="line" src="/images/outline.png"></cover-image>  
</cover-view>  
</camera>  
<button type="primary" bindtap="takePhoto">拍照</button>  
<button type="primary" bindtap="reverseCamera">攝像頭切換</button>  
<view class="error-handler" wx:if="{{!authCamera}}">  
    <button class="nobtn" openType="openSetting">打開相機受權</button>  
</view>

(2)：js端

// pages/web/index.js  
Page({  
  /\*\*  
   \* 頁面的初始數據  
   \*/  
  data: {  
    devicePosition:'back',  
    authCamera: false,//用戶是否運行受權拍照  
  },  
  handleCameraError:function() {  
    wx.showToast({  
      title:'用戶拒絕使用攝像頭',  
      icon: 'none'  
    })  
  },  
  reverseCamera:function(){  
    this.setData({  
      devicePosition: "back" === this.data.devicePosition ? "front" : "back"  
  });  
  },  
  takePhoto:function() {  
    //拍攝照片  
    wx.createCameraContext().takePhoto({  
      quality: 'high',//拍攝質量(high:高質量 normal:普通質量 low:高質量)  
      success: (res) => {  
        //拍攝成功  
        //照片文件的臨時文件  
        var file = res.tempImagePath;  
        console.log(file)  
        //上傳圖片到服務器  
        wx.uploadFile({  
          url: 'XXXX', //上傳服務器地址  
          filePath: file,  
          name: 'file',  
          formData: {  
            'test': 'test'  
          },  
          success: (res) => {  
            //上傳成功  
          },  
          fail: function(t) {  
            //上傳失敗  
          },  
        })  
      },  
      fail: (res) => {  
        //拍攝失敗  
      },  
    })  
  },  
  /\*\*  
   \* 生命週期函數--監聽頁面顯示  
   \*/  
  onShow: function () {  
    wx.getSetting({  
      success: (res) => {  
          if (res.authSetting\["scope.camera"\]) {  
              this.setData({  
                authCamera:true,  
              })  
          } else {  
            this.setData({  
              authCamera:false,  
            })  
          }  
      }  
    });  
  },  
})

具體相信以下：

在接口處理上傳文件的流程和正常的表單上傳文件流程相同，這裏就很少敘述了