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,
};