微信小程序拍照页面自定义demo-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序拍照页面自定义demo。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

api文档文章来源地址https://www.toymoban.com/news/detail-725304.html

<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>