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

api文档

<template>
  <div class="device-cameral">
    <div class="top-device">
      <image style="width: 100%" class="topHeight" :src="imageSrc" v-if="imageSrc">
      </image>
      <camera v-else :device-position="devicePosition" :flash="flash" @error="cameraError" style="width: 100%"
        class="topHeight">
      </camera>
      <i class="icon i-close-bold" @click="goBackPage"></i>
    </div>
    <div class="buttons flex justify-between align-center" v-if="!imageSrc">
      <div class="button" @click="openFlash">
        <image :src="flash === 'off'
          ? cameralImage.FLASH_IMAGE
          : cameralImage.FLASH_IMAGE
          " class="flash-image"></image>
      </div>
      <div class="button cameral flex align-center justify-center" @click="takePhoto">
        <div class="button-inner" :class="clickPhoto ? 'scale-button' : ''"></div>
      </div>
      <div class="button" @click="frontAndAfter">
        <image :src="cameralImage.DEVICEPOSITION_IMAGE" class="flash-image"></image>
      </div>
    </div>
    <div class="buttons flex justify-between align-center text-16 padding-btnTwo" v-else>
      <div class="resetPhoto buttonPhoto" @click="resetPhoto">重新拍照</div>
      <div class="confirmPhoto buttonPhoto" @click="confirmPhoto">确认</div>
    </div>
    <div class="tap-photo" :class="showText ? '' : 'fade-opacity'">
      {{ textSteer }}
    </div>
  </div>
</template>
<script>
import meServiceApi from "@/service/me.js";
import cameralImage from "@/static/images/batteryImage.js";
import { imageFormat } from "@/utils/utils.js";

export default {
  data() {
    return {
      imageSrc: "",
      flash: "off",
      devicePosition: "back",
      cameralImage,
      textSteer: "轻触拍照",
      showText: true,
      time: null,
      clickPhoto: false,
      item: '',
      itemIndex: '',
      type: '',
      imageFormat,
    };
  },
  onShow() {
    this.closeSteer();
  },
  onLoad(option) {
    this.item = JSON.parse(decodeURIComponent(option.item)),
      this.itemIndex = option.itemIndex
    this.type = option.type
  },
  methods: {
    goBackPage() {
      uni.navigateBack({
        delta: 1
      })
    },
    // 两秒后关闭引导
    closeSteer() {
      clearTimeout(this.time);
      const that = this;
      that.time = setTimeout(() => {
        that.showText = false;
      }, 2000);
    },
    // 动态添加动画类
    addAnimation() {
      this.showText = true;
      this.closeSteer();
    },
    takePhoto() {
      const ctx = wx.createCameraContext();
      const that = this;
      this.clickPhoto = true;
      ctx.takePhoto({
        quality: "high",
        success: (res) => {
          that.imageSrc = res.tempImagePath;
          this.clickPhoto = false;
          console.log("拍照的路径", res.tempImagePath);
        },
      });
    },
    cameraError(e) {
      console.log(e.detail);
    },
    openFlash() {
      switch (this.flash) {
        case "off":
          this.flash = "on";
          this.textSteer = "闪光灯打开";
          this.addAnimation();
          break;

        default:
          this.flash = "off";
          this.textSteer = "闪光灯关闭";
          this.addAnimation();
          break;
      }
    },
    frontAndAfter() {
      switch (this.devicePosition) {
        case "back":
          this.devicePosition = "front";
          this.textSteer = "前置打开";
          this.addAnimation();
          break;

        default:
          this.devicePosition = "back";
          this.textSteer = "后置打开";
          this.addAnimation();
          break;
      }
    },
    async confirmPhoto() {
      // 上传到服务器
      console.log(this.imageSrc, "this.imageSrc");
      const res = await meServiceApi.upFileImg(this.imageSrc);
      console.log("上传的图片", res, imageFormat(res.data), this.item, this.item.image);
      this.item.image = imageFormat(res.data)
      let newObject = { ...this.item, itemIndex: this.itemIndex, type: this.type }
      uni.$emit("confirmPhoto", newObject);
      uni.navigateBack({ delta: 1 })
    },
    resetPhoto() {
      this.imageSrc = "";
    },
  },
  mounted() { },
};
</script>
<style scoped lang='scss'>
.device-cameral {
  position: relative;

  .top-device {
    width: 100%;
    height: calc(100vh - 316rpx);

    .topHeight {
      height: calc(100vh - 316rpx);
      width: 100%;
    }

    .i-close-bold {
      position: absolute;
      top: 136rpx;
      left: 48rpx;
      z-index: 555;
    }
  }

  .tap-photo {
    position: absolute;
    color: #fff;
    bottom: 400rpx;
    left: 43%;
    opacity: 1;
  }

  .buttons {
    width: 100%;
    height: 316rpx;
    line-height: 316rpx;
    box-sizing: border-box;
    color: #fff;
    background-color: #000;
    padding: 0 88rpx;
  }

  .padding-btnTwo {
    padding: 20rpx 24rpx;
  }

  .flash-image {
    width: 68rpx;
    height: 68rpx;
  }

  .cameral {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    border: 3px solid #f5222d;

    .button-inner {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background-color: #fff;
    }

    .scale-button {
      transition: transform 0.2s ease;
      /* 定义过渡效果 */
      transform: scale(0.9);
    }
  }

  .buttonPhoto {
    width: 336rpx;
    height: 88rpx;
    box-sizing: border-box;
    text-align: center;
    line-height: 88rpx;
    border-radius: 8rpx;
  }

  .resetPhoto {
    color: #f5222d;
    border: 2rpx solid #f5222d;
    background: #fff;
  }

  .confirmPhoto {
    background: #f5222d;
    color: #fff;
  }

  .fade-opacity {
    opacity: 0;
  }
}
</style>