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

api文档

<template><div><imagemode="widthFix"style="width: 100%; height: 300px":src="imageSrc"v-if="imageSrc"></image><camerav-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>