最近有一個項目需要對拍照界面進行自定義，之前使用的是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,  
            })  
          }  
      }  
    });  
  },  
})  

具體相信如下：

 

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