最近有一個項目需要對拍照界面進(jìn)行自定義，之前使用的是html寫的項目界面，但是在html中想要自定義拍照界面十分的困難,于是想到了使用微信小程序來實現(xiàn)拍照界面的自定義

在微信小程序中實現(xiàn)自定義拍照功能主要使用到如下的組件和API

1：camera組件

常見的屬性有:

(1)：mode

應(yīng)用模式，只在初始化時有效，不能動態(tài)變更，參數(shù)有：normal(相機模式),scanCode(掃碼模式) ，默認(rèn)為normal

(2)：device-position

攝像頭朝向，參數(shù)有front(前置),back(后置)，默認(rèn)為back

(3)：flash

閃關(guān)燈，參數(shù)有：auto(自動,手機相機目前的閃光燈狀態(tài)), on(打開閃光燈), off(關(guān)閉閃光燈)，默認(rèn)為auto

(4)：binderror

用戶不允許使用攝像頭時觸發(fā)事件

例如:

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

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

參數(shù)說明：

(1)quality

成像質(zhì)量,參數(shù)有：high(高質(zhì)量),normal(普通質(zhì)量),low(低質(zhì)量)，默認(rèn)為normal

(2)success

接口調(diào)用成功的回調(diào)函數(shù)

(3)fail

接口調(diào)用失敗的回調(diào)函數(shù)

例如：

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

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

參數(shù)說明：

url:上傳文件的服務(wù)器地址

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

name:文件對應(yīng)的 key，開發(fā)者在服務(wù)端可以通過這個 key 獲取文件的二進(jìn)制內(nèi)容

formData:HTTP 請求中其他額外的參數(shù)

success：接口調(diào)用成功的回調(diào)函數(shù)

fail：接口調(diào)用失敗的回調(diào)函數(shù)

例如：

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：根據(jù)如上我們就可以實現(xiàn)在微信小程序中自定義拍照頁面來實現(xiàn)上傳

(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">打開相機授權(quán)</button>  
</view>  

(2)：js端

// pages/web/index.js  
Page({  
  /\*\*  
   \* 頁面的初始數(shù)據(jù)  
   \*/  
  data: {  
    devicePosition:'back',  
    authCamera: false,//用戶是否運行授權(quán)拍照  
  },  
  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',//拍攝質(zhì)量(high:高質(zhì)量 normal:普通質(zhì)量 low:高質(zhì)量)  
      success: (res) => {  
        //拍攝成功  
        //照片文件的臨時文件  
        var file = res.tempImagePath;  
        console.log(file)  
        //上傳圖片到服務(wù)器  
        wx.uploadFile({  
          url: 'XXXX', //上傳服務(wù)器地址  
          filePath: file,  
          name: 'file',  
          formData: {  
            'test': 'test'  
          },  
          success: (res) => {  
            //上傳成功  
          },  
          fail: function(t) {  
            //上傳失敗  
          },  
        })  
      },  
      fail: (res) => {  
        //拍攝失敗  
      },  
    })  
  },  
  /\*\*  
   \* 生命周期函數(shù)--監(jiān)聽頁面顯示  
   \*/  
  onShow: function () {  
    wx.getSetting({  
      success: (res) => {  
          if (res.authSetting\["scope.camera"\]) {  
              this.setData({  
                authCamera:true,  
              })  
          } else {  
            this.setData({  
              authCamera:false,  
            })  
          }  
      }  
    });  
  },  
})  

具體相信如下：

 

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