微信小程序实现拍照界面自定义实现

最近有一个项目须要对拍照界面进行自定义，以前使用的是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,  
            })  
          }  
      }  
    });  
  },  
})

具体相信以下：

在接口处理上传文件的流程和正常的表单上传文件流程相同，这里就很少叙述了