vue 微信小程序 相机自定义

	<view>
		<view class="cameraBox">
			<!-- 	<text class="text1">为保证是本人操作</text>
			<text class="text2">需采集你的人脸信息以核实身份</text> -->
			<camera :device-position="device" output-dimension="max" flash="off">
				<cover-image src="" class="shibie" bindtap="changePos"></cover-image>
			</camera>
			<text class="text3">请确保正脸出现在取景框中，以便识别</text>
			<text class="text4">一旦提交后则不能更改，错误信息会影响正常参加会议</text>
			<view class="cameraBox_btn" @click="getPhoto">点击开始拍摄</view>
		</view>
	</view>
	<view class="">
		<button @click="btnDevice">翻转镜头</button>
	</view>
</template>

js

import { ref } from "vue";
const image = ref("");
const device = ref("front");
const btnDevice = () => {
	device.value === "front" ? (device.value = "back") : (device.value = "front");
};
const getPhoto = () => {
	uni.showLoading();
	// 创建相机上下文对象,获取唯一的相机对象
	const context = uni.createCameraContext();
	// 照相功能
	context.takePhoto({
		quality: "high",
		success: (res) => {
			console.log("0000000000", res);
			console.log("123", res.tempImagePath);
			// 照相成功的回调
			// upload(res.tempImagePath);
			saveImage(res.tempImagePath);
			uni.hideLoading();
		},
		fail: () => {
			uni.showToast({
				title: "拍摄失败"
			});
			uni.hideLoading();
		}
	});
};
// 上传图片
const upload = (filePath) => {
	uni.uploadFile({
		url: "https://xxxxxxx", // 上传接口
		filePath: filePath,
		name: "file",
		header: {
			"content-type": "multipart/form-data",
			Authorization: "Bearer " + uni.getStorageSync("token")
		},
		success: (res) => {
			const data = JSON.parse(res.data);
			if (data.code == 200) {
				image.value = data.data.path;
			} else {
				uni.hideLoading();
				uni.showToast({
					title: data.message || "上传失败",
					icon: "none"
				});
			}
		},
		fail: (err) => {
			uni.hideLoading();
			uni.showToast({
				title: "上传失败",
				icon: "none"
			});
		}
	});
};
const saveImage = (url) => {
	uni.saveImageToPhotosAlbum({
		filePath: url,
		success() {
			uni.showToast({
				position: "center",
				icon: "none",
				title: "图片保存成功，请到手机相册查看"
			});
		},
		fail(e) {
			uni.showModal({
				content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg + "，errSubject：" + e.errSubject,
				showCancel: false
			});
		}
	});
};
</script>

css

page {
	background-color: #fff;
}
.cameraBox {
	display: flex;
	align-items: center;
	flex-direction: column;
	camera {
		width: 100vw;
		height: 1000rpx;
	}
	text {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}
	.text1 {
		font-size: 40rpx;
		margin-top: 70rpx;
	}
	.text2 {
		font-size: 32rpx;
		margin: 24rpx 0 72rpx 0;
	}
	.text3 {
		color: #5c74ff;
		margin: 56rpx 0 24rpx 0;
	}
	.text4 {
		color: #ff0000;
		margin: 24rpx 0 72rpx 0;
	}
	&_btn {
		width: 590rpx;
		text-align: center;
		line-height: 88rpx;
		background: linear-gradient(90deg, #ff232c 0%, #ff571b 100%);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
	}
	&_btnB {
		width: 590rpx;
		text-align: center;
		line-height: 88rpx;
		background: #fff4f3;
		border: 2rpx solid #f30100;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #ff0000;
		margin-bottom: 30rpx;
	}
}
.shibie {
	width: 600rpx;
	height: 600rpx;
}
.imageBox {
	width: 600rpx;
	height: 600rpx;
	position: relative;
}
.imageBox image:last-child {
	position: absolute;
	top: 0;
	left: 0;
}
</style>