微信小程序拍照页面自定义demo

api文档

<template>
  <div>
    <image
      mode="widthFix"
      style="width: 100%; height: 300px"
      :src="imageSrc"
      v-if="imageSrc"
    ></image>
    <camera
      v-else
      :device-position="devicePosition"
      :flash="flash"
      @error="cameraError"
      style="width: 100%; height: 300px"
    ></camera>
    <div class="buttons flex justify-between" v-if="!imageSrc">
      <div class="button" @click="openFlash">
        {{ flash === "off" ? "闪光关闭" : "闪光打开" }}
      </div>
      <div class="button cameral" @click="takePhoto"></div>
      <div class="button" @click="frontAndAfter">
        {{ devicePosition === "back" ? "后置" : "前置" }}
      </div>
    </div>
    <div class="buttons flex justify-between" v-else>
      <div class="resetPhoto" @click="resetPhoto">重新拍照</div>
      <div class="confirmPhoto" @click="confirmPhoto">确认</div>
    </div>
  </div>
</template>
<script>
import meServiceApi from "@/service/me.js";

export default {
  data() {
    return {
      imageSrc: "",
      flash: "off",
      devicePosition: "back",
    };
  },
  methods: {
    takePhoto() {
      const ctx = wx.createCameraContext();
      const that = this;
      ctx.takePhoto({
        quality: "high",
        success: (res) => {
          that.imageSrc = res.tempImagePath;
          console.log("拍照的路径", res.tempImagePath);
        },
      });
    },
    cameraError(e) {
      console.log(e.detail);
    },
    openFlash() {
      switch (this.flash) {
        case "off":
          this.flash = "on";
          break;

        default:
          this.flash = "off";
          break;
      }
    },
    frontAndAfter() {
      switch (this.devicePosition) {
        case "back":
          this.devicePosition = "front";
          break;

        default:
          this.devicePosition = "back";
          break;
      }
    },
    async confirmPhoto() {
      // 上传到服务器
      console.log(this.imageSrc, "this.imageSrc");
      const res = await meServiceApi.upFileImg(this.imageSrc);
      console.log("上传的图片", res);
    },
    resetPhoto() {
      this.imageSrc = "";
    },
  },
  mounted() {},
};
</script>
<style scoped lang='scss'>
.buttons {
  position: fixed;
  bottom: 20rpx;
  left: 0;
  width: 100%;
  height: 144rpx;
  padding: 20rpx 0;
  color: #fff;
  background-color: #000;
  .cameral {
    position: absolute;
    top: 10rpx;
    left: 40%;
    width: 144rpx;
    height: 140rpx;
    border-radius: 50%;
    border: 3px solid #f5222d;
  }
}
</style>