uniapp實現拍照模板

本文主要介紹使用uniapp實現拍照自定義拍照模板功能

看到這個需求，首先想到可以使用uniapp上的camera組件，然后在用cover-image添加一個圖片就可以達到要求。
但是camera組件有兼容性的問題，不支持app端。
於是參考別人的寫法，看到有一個live-pusher直播流組件，用nvue寫就可以兼容app。

技術拆分：

1.小程序端使用camera組件。頁面內嵌的區域相機組件。注意這不是點擊后全屏打開的相機。

2.App端使用直播推流 live-pusher 組件，官方上說：如app平台的vue頁面需要支持直播推流，需編寫條件編譯代碼，
使用 plus.video.LivePusher，業務指南、
規范文檔。
還是推薦直接使用nvue里的live-pusher組件。所以我們使用nvue格式來代替vue格式的頁面。

不管是camera組件還是live-pusher組件。他們都是原生組件，所以必須使用cover-image、cover-view來制作覆蓋層。

2個功能。1.實現相機+取景框的拍照組合。2.裁剪取景框內的元素。
拍照：1.APP端使用 直播流 模擬相機窗口。需要在manifest.json -> APP權限模塊里勾選 LivePusher直播流
2.小程序端只用 組件模擬相機窗口。
裁剪：1.APP端無法使用canvas的API，因為用的是nvue文件，目前不支持官方canvas的API，可以使用官方提供的gcanvas的API。（gcanvas的drawImage不允許臨時路徑）
2.小程序端通過canvas提供的API可實現。
關於gcanvas 參考官方示例 https://github.com/dcloudio/NvueCanvasDemo

<template>
  <view
    class="live-camera"
    :style="{ width: `${windowWidth}px`, height: `${windowHeight}px` }"
  >
    <view
      class="preview"
      :style="{ width: `${windowWidth}px`, height: `${windowHeight - 90}px` }"
    >
      <!-- #ifdef APP-PLUS -->
      <live-pusher
        v-if="showLive"
        id="livePusher"
        ref="livePusher"
        class="livePusher"
        mode="FHD"
        beauty="0"
        whiteness="0"
        :aspect="aspect"
        min-bitrate="1000"
        audio-quality="16KHz"
        device-position="back"
        :auto-focus="true"
        :muted="true"
        :enable-camera="true"
        :enable-mic="false"
        :zoom="false"
        @statechange="statechange"
        @error="error"
        :style="{ width: `${cameraWidth}px`, height: `${windowHeight - 90}px` }"
      ></live-pusher>
      <!-- #endif -->
      <!-- #ifdef MP -->
      <camera
        :style="{ width: `${cameraWidth}px`, height: `${windowHeight - 90}px` }"
        :device-position="devicePosition"
      ></camera>
      <!-- #endif -->
      <!--輔助線-->
      <cover-view
        class="outline-box"
        :style="{ width: `${windowWidth}px`, height: `${windowHeight - 90}px` }"
      >
        <cover-image
          v-if="type === '0'"
          class="outline-img"
          src="../static/images/regist/k-sfz.png"
        ></cover-image>
        <cover-image
          v-else-if="type === '1'"
          class="outline-img"
          src="../static/images/regist/k-sfzb.png"
        ></cover-image>
        <cover-image
          v-else-if="type === '2'"
          class="outline-img1"
          src="../static/images/regist/jsz-qjk.png"
        ></cover-image>
        <cover-image
          v-else-if="type === '3'"
          class="outline-img1"
          src="../static/images/regist/xsz-qjk.png"
        ></cover-image>
        <cover-image
          v-else-if="type === '4'"
          class="outline-img"
          src="../static/images/regist/k-cyzgz.png"
        ></cover-image>
        <cover-image
          v-else-if="type === '5'"
          class="outline-img"
          src="../static/images/regist/k-dlysz.png"
        ></cover-image>
        <ksfz />
      </cover-view>
    </view>

    <view class="menu">
      <!--底部菜單區域背景-->
      <cover-image
        class="menu-mask"
        src="../static/images/regist/bar.png"
      ></cover-image>
      <!--返回鍵-->
      <cover-image
        class="menu-back"
        @tap="back"
        src="../static/images/regist/back2.png"
      ></cover-image>
      <!--快門鍵-->
      <cover-image
        class="menu-snapshot"
        @tap="snapshot"
        src="../static/images/regist/btn.png"
      ></cover-image>
      <!--反轉鍵-->
      <cover-image
        class="menu-flip"
        @tap="flip"
        src="../static/images/regist/flip.png"
      ></cover-image>
    </view>
    <canvas-crop ref="crop"></canvas-crop>
  </view>
</template>

<script>
import {
  judgeIosPermission,
  requestAndroidPermission,
  gotoAppPermissionSetting,
} from '@/common/scripts/permission.js';
import { uploadFileOSS } from '@/api/oss.js';
import { errorMsg } from '@/common/scripts/message.js';
import config from '@/config/index.js';

export default {
  data() {
    return {
      devicePosition: 'back', //前置或后置攝像頭,值為front, back
      poenCarmeInterval: null, //打開相機的輪詢
      dotype: 'idcardface', //操作類型
      message: '', //提示
      aspect: '2:3', //比例
      cameraWidth: '', //相機畫面寬度
      cameraHeight: '', //相機畫面寬度
      windowWidth: '', //屏幕可用寬度
      windowHeight: '', //屏幕可用高度
      camerastate: false, //相機准備好了
      livePusher: null, //流視頻對象
      snapshotsrc: null, //快照
      type: null,
      showLive: false, //安卓機需要先判斷權限有沒有授權
      imageInfo: {}, //取景框內的圖片大小
      context: {}, //canvas實例對象
      rpx2px: '',
      finder: {
        //取景框尺寸，駕駛證、行駛證為333*999，其他為640*980
        width: 640,
        height: 980,
      },
    };
  },
  onLoad(e) {
    this.type = e.type;
    if (['2', '3'].indexOf(this.type) > -1)
      this.finder = { width: 333, height: 999 };
    console.log(this.finder);
  },
  async onReady() {
    this.initCamera();
    // #ifdef APP-NVUE
    if (plus.os.name === 'Android') {
      await this.checkAndriodCamera();
    } else {
      this.showLive = true;
    }
    // #endif
    // #ifdef MP
    this.showLive = true;
    if (!(await this.checkCamera())) {
      return;
    }
    // #endif

    // #ifdef APP-PLUS
    this.showLive
      ? this.$nextTick(() => {
          this.livePusher = uni.createLivePusherContext('livePusher', this);
        })
      : '';
    if (plus.os.name === 'iOS') {
      setTimeout(() => {
        //開啟預覽並設置攝像頭
        this.startPreview();
      }, 100);
    }
    // #endif
  },
  methods: {
    //初始化相機
    initCamera() {
      //處理安卓手機異步授權問題
      uni.getSystemInfo({
        success: (res) => {
          console.log('手機信息', res);
          this.windowWidth = res.windowWidth;
          this.windowHeight = res.windowHeight;
          this.cameraWidth = res.windowWidth;
          this.cameraHeight = res.windowWidth * 1.5;
          this.rpx2px = (1 / 750) * res.windowWidth;
          let imgW = parseInt(this.finder.width * this.rpx2px),
            imgH = parseInt(this.finder.height * this.rpx2px); // 640和980是css里定義取景框的rpx寬度
          this.imageInfo = {
            width: imgW,
            height: imgH,
          };
        },
      });
    },

    //檢查安卓相機權限
    async checkAndriodCamera() {
      let androidPermisson = await requestAndroidPermission(
        'android.permission.CAMERA'
      );
      if (androidPermisson === 1) {
        this.showLive = true;
        this.$nextTick(() => {
          this.livePusher = uni.createLivePusherContext('livePusher', this);
        });
        setTimeout(() => {
          //開啟預覽並設置攝像頭
          this.startPreview();
          this.poenCarme();
        }, 100);
      } else {
        uni.showModal({
          content: '請打開攝像頭授權功能！',
          showCancel: false,
          success: (res) => {
            if (res.confirm) gotoAppPermissionSetting();
          },
        });
      }
      console.log('checkAndriodCamera', androidPermisson);
    },

    //檢查照相機權限
    checkCamera() {
      return new Promise(async (resolve) => {
        // #ifdef APP-PLUS
        if (plus.os.name === 'iOS' && !judgeIosPermission('camera')) {
          uni.showModal({
            content: '請打開攝像頭授權功能！',
            showCancel: false,
            success: (res) => {
              if (res.confirm) gotoAppPermissionSetting();
            },
          });
          resolve(false);
        } else if (plus.os.name === 'Android') {
          let androidPermisson = await requestAndroidPermission(
            'android.permission.CAMERA'
          );
          console.log(androidPermisson);
          if (androidPermisson < 1) {
            uni.showModal({
              content: '請打開攝像頭授權功能！',
              showCancel: false,
            });
            resolve(false);
          } else {
            resolve(true);
          }
        } else {
          resolve(true);
        }
        // #endif
        // #ifdef MP
        uni.getSetting({
          success: (sRes) => {
            console.log(sRes);
            if (sRes.authSetting['scope.camera'] === false) {
              uni.showModal({
                content: '請打開攝像頭授權功能！',
                showCancel: false,
              });
              resolve(false);
            } else {
              resolve(true);
            }
          },
          fail: (err) => {
            console.log(err);
          },
        });
        // #endif
      });
    },
    //輪詢打開
    async poenCarme() {
      //#ifdef APP-PLUS
      if (plus.os.name == 'Android') {
        this.poenCarmeInterval = setInterval(() => {
          if (!this.camerastate) this.startPreview();
        }, 1000);
      }
      //#endif
    },

    //開始預覽
    startPreview() {
      this.livePusher.startPreview({
        success: async (a) => {
          //直播推流默認是前置攝像頭，預覽成功后給轉成后置攝像頭
          if (plus.os.name == 'iOS') {
            this.livePusher.switchCamera();
            this.camerastate = true;
          }
        },
      });
    },
    error(e) {
      clearInterval(this.poenCarmeInterval);
      console.log('error:' + JSON.stringify(e));
      if (e.detail.errCode === 10001) {
        uni.showModal({
          content: '請打開攝像頭授權功能！',
          showCancel: false,
          success: (res) => {
            if (res.confirm) gotoAppPermissionSetting();
          },
        });
      }
    },
    //停止預覽
    stopPreview() {
      this.livePusher.stopPreview({
        success: (a) => {
          this.camerastate = false; //標記相機未啟動
        },
      });
    },

    //狀態
    statechange(e) {
      //狀態改變
      console.log(e);
      if (e.detail.code == 1003 || e.detail.code == 1007) {
        //1007
        this.camerastate = true;
      } else if (e.detail.code == -1301) {
        this.checkCamera();
        this.camerastate = false;
      }
    },
    //返回
    back() {
      uni.navigateBack();
    },

    /**
     * 抓拍，因為APP端用的gcanvas，gcanvas.drawImage不允許臨時圖片，所以要先傳一次圖片
     * **/
    snapshot() {
      if (!this.checkCamera()) {
        return false;
      }
      //震動
      uni.vibrateShort();
      // #ifdef APP-PLUS
      this.livePusher.snapshot({
        success: async (e) => {
          this.uploadImage(`file://${e.message.tempImagePath}`);
        },
        fail: (err) => {
          console.log(err);
        },
      });
      // #endif
      // #ifdef MP
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          this.uploadImage(res.tempImagePath);
        },
      });
      // #endif
    },
    /**
     * 獲取臨時路徑的圖片寬高大小
     * **/
    getImageInfo(path) {
      return new Promise((resolve, reject) => {
        uni.getImageInfo({
          src: path,
          success: (res) => {
            resolve(res);
          },
          fail: (err) => {
            reject(err);
            resolve(err);
          },
        });
      });
    },
    async uploadImage(path) {
      let info = await this.getImageInfo(path); //獲取臨時路徑的圖片寬高大小
      let width = Math.round(
          ((this.rpx2px * this.finder.width) / this.cameraWidth) * info.width
        ),
        height = Math.round(
          ((this.rpx2px * this.finder.height) / (this.windowHeight - 90)) *
            info.height
        );
      let x = parseInt((info.width - width) / 2),
        y = parseInt((info.height - height) / 2);
      uploadFileOSS(path)
        .then((res) => {
          this.snapshotsrc =
            res.url +
            `?x-oss-process=image/crop,x_${x},y_${y},w_${width},h_${height}/rotate,270`;
          console.log(this.snapshotsrc);
          this.setImage({ x, y, width, height });
          uni.navigateBack({
            delta: 2,
          });
        })
        .catch((err) => {
          console.log(err);
          errorMsg(err);
        });
    },

    //反轉
    flip() {
      // #ifdef APP-PLUS
      this.livePusher.switchCamera();
      // #endif
      // #ifdef MP
      this.devicePosition = this.devicePosition === 'back' ? 'front' : 'back';
      // #endif
    },

    //設置
    setImage(x, y, width, height) {
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 3]; //上二個頁面
      //直接調用上二個頁面的setImage()方法，把數據存到上二個頁面中去
      prevPage.$vm.setImage({ path: this.snapshotsrc, type: this.type });
    },
  },
};
</script>

<style lang="scss">
.live-camera {
  .preview {
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    .canvas {
      visibility: hidden;
      position: absolute;
      top: 0;
      z-index: -1;
    }
    .gcanvas {
      z-index: -1;
      position: absolute;
    }
    .outline-box {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 99;
      align-items: center;
      justify-content: center;
      display: flex;
      .outline-img {
        width: 640rpx;
        height: 980rpx;
      }
      .outline-img1 {
        width: 333rpx;
        height: 999rpx;
      }
    }
    .remind {
      position: absolute;
      left: -106px;
      top: 880rpx;
      width: 750rpx;
      z-index: 100;
      transform: rotate(90deg);
      align-items: center;
      justify-content: center;
      color: #ffffff;
      .remind-text {
        color: #ffffff;
        font-weight: bold;
      }
    }
  }
  .menu {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 750rpx;
    height: 90px;
    z-index: 98;
    align-items: center;
    justify-content: center;
    background-color: #000;
    box-sizing: inherit;
    .menu-mask {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 750rpx;
      height: 180rpx;
      z-index: 98;
    }
    .menu-back {
      position: absolute;
      left: 30rpx;
      bottom: 50rpx;
      width: 80rpx;
      height: 80rpx;
      z-index: 99;
      align-items: center;
      justify-content: center;
    }
    .menu-snapshot {
      width: 130rpx;
      height: 130rpx;
      z-index: 99;
    }
    .menu-flip {
      position: absolute;
      right: 30rpx;
      bottom: 50rpx;
      width: 80rpx;
      height: 80rpx;
      z-index: 99;
      align-items: center;
      justify-content: center;
    }
  }
}
.back {
  width: 88rpx;
  height: 88rpx;
  margin-left: 20rpx;
  margin-top: env(safe-area-inset-top);
  position: absolute;
  top: 0;
  left: 0;
}
</style>

/**
 * 本模塊封裝了Android、iOS的應用權限判斷、打開應用權限設置界面、以及位置系統服務是否開啟
 */

var isIos;
// #ifdef APP-PLUS
isIos = plus.os.name == 'iOS';
// #endif

// 判斷推送權限是否開啟
function judgeIosPermissionPush() {
  var result = false;
  var UIApplication = plus.ios.import('UIApplication');
  var app = UIApplication.sharedApplication();
  var enabledTypes = 0;
  if (app.currentUserNotificationSettings) {
    var settings = app.currentUserNotificationSettings();
    enabledTypes = settings.plusGetAttribute('types');
    console.log('enabledTypes1:' + enabledTypes);
    if (enabledTypes == 0) {
      console.log('推送權限沒有開啟');
    } else {
      result = true;
      console.log('已經開啟推送功能!');
    }
    plus.ios.deleteObject(settings);
  } else {
    enabledTypes = app.enabledRemoteNotificationTypes();
    if (enabledTypes == 0) {
      console.log('推送權限沒有開啟!');
    } else {
      result = true;
      console.log('已經開啟推送功能!');
    }
    console.log('enabledTypes2:' + enabledTypes);
  }
  plus.ios.deleteObject(app);
  plus.ios.deleteObject(UIApplication);
  return result;
}

// 判斷定位權限是否開啟
function judgeIosPermissionLocation() {
  var result = false;
  var cllocationManger = plus.ios.import('CLLocationManager');
  var status = cllocationManger.authorizationStatus();
  result = status != 2;
  console.log('定位權限開啟：' + result);
  // 以下代碼判斷了手機設備的定位是否關閉，推薦另行使用方法 checkSystemEnableLocation
  /* var enable = cllocationManger.locationServicesEnabled();
     var status = cllocationManger.authorizationStatus();
     console.log("enable:" + enable);
     console.log("status:" + status);
     if (enable && status != 2) {
         result = true;
         console.log("手機定位服務已開啟且已授予定位權限");
     } else {
         console.log("手機系統的定位沒有打開或未給予定位權限");
     } */
  plus.ios.deleteObject(cllocationManger);
  return result;
}

// 判斷麥克風權限是否開啟
function judgeIosPermissionRecord() {
  var result = false;
  var avaudiosession = plus.ios.import('AVAudioSession');
  var avaudio = avaudiosession.sharedInstance();
  var permissionStatus = avaudio.recordPermission();
  console.log('permissionStatus:' + permissionStatus);
  if (permissionStatus == 1684369017 || permissionStatus == 1970168948) {
    console.log('麥克風權限沒有開啟');
  } else {
    result = true;
    console.log('麥克風權限已經開啟');
  }
  plus.ios.deleteObject(avaudiosession);
  return result;
}

// 判斷相機權限是否開啟
function judgeIosPermissionCamera() {
  var result = false;
  var AVCaptureDevice = plus.ios.import('AVCaptureDevice');
  var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');
  console.log('authStatus:' + authStatus);
  if (authStatus == 3) {
    result = true;
    console.log('相機權限已經開啟');
  } else {
    console.log('相機權限沒有開啟');
  }
  plus.ios.deleteObject(AVCaptureDevice);
  return result;
}

// 判斷相冊權限是否開啟
function judgeIosPermissionPhotoLibrary() {
  var result = false;
  var PHPhotoLibrary = plus.ios.import('PHPhotoLibrary');
  var authStatus = PHPhotoLibrary.authorizationStatus();
  console.log('authStatus:' + authStatus);
  if (authStatus == 3) {
    result = true;
    console.log('相冊權限已經開啟');
  } else {
    console.log('相冊權限沒有開啟');
  }
  plus.ios.deleteObject(PHPhotoLibrary);
  return result;
}

// 判斷通訊錄權限是否開啟
function judgeIosPermissionContact() {
  var result = false;
  var CNContactStore = plus.ios.import('CNContactStore');
  var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
  if (cnAuthStatus == 3) {
    result = true;
    console.log('通訊錄權限已經開啟');
  } else {
    console.log('通訊錄權限沒有開啟');
  }
  plus.ios.deleteObject(CNContactStore);
  return result;
}

// 判斷日歷權限是否開啟
function judgeIosPermissionCalendar() {
  var result = false;
  var EKEventStore = plus.ios.import('EKEventStore');
  var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
  if (ekAuthStatus == 3) {
    result = true;
    console.log('日歷權限已經開啟');
  } else {
    console.log('日歷權限沒有開啟');
  }
  plus.ios.deleteObject(EKEventStore);
  return result;
}

// 判斷備忘錄權限是否開啟
function judgeIosPermissionMemo() {
  var result = false;
  var EKEventStore = plus.ios.import('EKEventStore');
  var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
  if (ekAuthStatus == 3) {
    result = true;
    console.log('備忘錄權限已經開啟');
  } else {
    console.log('備忘錄權限沒有開啟');
  }
  plus.ios.deleteObject(EKEventStore);
  return result;
}

// Android權限查詢
function requestAndroidPermission(permissionID) {
  return new Promise((resolve, reject) => {
    plus.android.requestPermissions(
      [permissionID], // 理論上支持多個權限同時查詢，但實際上本函數封裝只處理了一個權限的情況。有需要的可自行擴展封裝
      function (resultObj) {
        var result = 0;
        for (var i = 0; i < resultObj.granted.length; i++) {
          var grantedPermission = resultObj.granted[i];
          console.log('已獲取的權限：' + grantedPermission);
          result = 1;
        }
        for (var i = 0; i < resultObj.deniedPresent.length; i++) {
          var deniedPresentPermission = resultObj.deniedPresent[i];
          console.log('拒絕本次申請的權限：' + deniedPresentPermission);
          result = 0;
        }
        for (var i = 0; i < resultObj.deniedAlways.length; i++) {
          var deniedAlwaysPermission = resultObj.deniedAlways[i];
          console.log('永久拒絕申請的權限：' + deniedAlwaysPermission);
          result = -1;
        }
        resolve(result);
        // 若所需權限被拒絕,則打開APP設置界面,可以在APP設置界面打開相應權限
        // if (result != 1) {
        // gotoAppPermissionSetting()
        // }
      },
      function (error) {
        console.log('申請權限錯誤：' + error.code + ' = ' + error.message);
        resolve({
          code: error.code,
          message: error.message,
        });
      }
    );
  });
}

// 使用一個方法，根據參數判斷權限
function judgeIosPermission(permissionID) {
  if (permissionID == 'location') {
    return judgeIosPermissionLocation();
  } else if (permissionID == 'camera') {
    return judgeIosPermissionCamera();
  } else if (permissionID == 'photoLibrary') {
    return judgeIosPermissionPhotoLibrary();
  } else if (permissionID == 'record') {
    return judgeIosPermissionRecord();
  } else if (permissionID == 'push') {
    return judgeIosPermissionPush();
  } else if (permissionID == 'contact') {
    return judgeIosPermissionContact();
  } else if (permissionID == 'calendar') {
    return judgeIosPermissionCalendar();
  } else if (permissionID == 'memo') {
    return judgeIosPermissionMemo();
  }
  return false;
}

// 跳轉到**應用**的權限頁面
function gotoAppPermissionSetting() {
  if (isIos) {
    var UIApplication = plus.ios.import('UIApplication');
    var application2 = UIApplication.sharedApplication();
    var NSURL2 = plus.ios.import('NSURL');
    // var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");
    var setting2 = NSURL2.URLWithString('app-settings:');
    application2.openURL(setting2);

    plus.ios.deleteObject(setting2);
    plus.ios.deleteObject(NSURL2);
    plus.ios.deleteObject(application2);
  } else {
    // console.log(plus.device.vendor);
    var Intent = plus.android.importClass('android.content.Intent');
    var Settings = plus.android.importClass('android.provider.Settings');
    var Uri = plus.android.importClass('android.net.Uri');
    var mainActivity = plus.android.runtimeMainActivity();
    var intent = new Intent();
    intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
    var uri = Uri.fromParts('package', mainActivity.getPackageName(), null);
    intent.setData(uri);
    mainActivity.startActivity(intent);
  }
}

// 檢查系統的設備服務是否開啟
// var checkSystemEnableLocation = async function () {
function checkSystemEnableLocation() {
  if (isIos) {
    var result = false;
    var cllocationManger = plus.ios.import('CLLocationManager');
    var result = cllocationManger.locationServicesEnabled();
    console.log('系統定位開啟:' + result);
    plus.ios.deleteObject(cllocationManger);
    return result;
  } else {
    var context = plus.android.importClass('android.content.Context');
    var locationManager = plus.android.importClass(
      'android.location.LocationManager'
    );
    var main = plus.android.runtimeMainActivity();
    var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
    var result = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER);
    console.log('系統定位開啟:' + result);
    return result;
  }
}

module.exports = {
  judgeIosPermission: judgeIosPermission,
  requestAndroidPermission: requestAndroidPermission,
  checkSystemEnableLocation: checkSystemEnableLocation,
  gotoAppPermissionSetting: gotoAppPermissionSetting,
};