Uni-app adds a character frame for custom camera photography

A, effects,

Effects include album selection, photo taking, and camera switching.

Second, knowledge preparation

The following components of UNI are required:

1, the camera

Address:Uniapp. Dcloud. IO/component/c…

2, cover – image

Address:Uniapp. Dcloud. IO/component/c…

Third, thinking and methods

thinking

How can I take the data back to the original page after I take the photo?

methods

vuex + onShow

Four, code,

<template>
	<view class="content" v-if="showHeader"
		style="position: fixed; top: 0; left: 0; z-index: 777; width: 100%; height: 100vh; background-color: #FFFFFF;">
		<camera :binderror="handleCameraError" :device-position="devicePosition" flash="off"
			style="width: 100%; height: 80vh;">
			<cover-image src="https://img-blog.csdnimg.cn/20210126152753150.png"
				style="width: 100%; height: 700rpx; margin-top:100rpx;"></cover-image>

		</camera>
		<view class="btns" style="width: 100%; height: 20vh; background: #3B4144;">
			<image class="item" @tap="chooseImage" src=".. /.. /static/write/photo.png"></image>
			<image class="item" @tap="takePhotoByHead" src=".. /.. /static/write/camare.png"></image>
			<image class="item" @tap="reverseCamera" src=".. /.. /static/write/change.png"></image>
		</view>
		<! -- <view class="error-handler" v-if="! <button class=" nobTN "openType="openSetting"> </button> </view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				authCamera: false.showHeader: true.ctxHeader: null.devicePosition:'front'}},watch: {showHeader(val){
				console.log(val)
				return
				var that = this;
				// Obtain the camera permission
				uni.getSetting({
					success(res) {
						console.log('Camera Permissions :', res)
						if (res.authSetting["scope.camera"]) {
							that.authCamera = true
						} else {
							that.authCamera = false
							// uni.showModal({
							// title: 'permission request ',
							// Content: 'Requires camera permissions to take photos. ',
							// success: (btn_res) => {
							// if (btn_res.confirm) {
							// uni.authorize({
							// scope: 'scope.camera',
							// success() {
							// that.authCamera = true
							/ /}
							/ /})
							// } else if (btn_res.cancel) {
				
							/ /}
							/ /}
							// });}}})}},onShow() {
			var that = this;
			// Obtain the camera permission
			uni.getSetting({
				success(res) {
					console.log('Camera Permissions :', res)
					if (res.authSetting["scope.camera"]) {
						that.authCamera = true
					} else {
						that.authCamera = false
						// uni.showModal({
						// title: 'permission request ',
						// Content: 'Requires camera permissions to take photos. ',
						// success: (btn_res) => {
						// if (btn_res.confirm) {
						// uni.authorize({
						// scope: 'scope.camera',
						// success() {
						// that.authCamera = true
						/ /}
						/ /})
						// } else if (btn_res.cancel) {

						/ /}
						/ /}
						// });}}})},onLoad() {
			// console.log(window.innerHeight)
			// if (uni.createCameraContext) {
			// setTimeout(() => {
			// this.cameraContext = uni.createCameraContext();
			/ /}, 200)
			// } else {
			// // If you want users to experiment with your applet on the latest version of the client, you can do so
			// uni.showModal({
			// title: 'prompt ',
			// Content: 'The current wechat version is too early to use this function, please upgrade to the latest wechat version and try again. '
			/ /})
			// }
		},
		methods: {
			chooseImage(){
				uni.chooseImage({
				    count: 1./ / the default 9
				    sizeType: ['original'.'compressed'].// You can specify whether the image is original or compressed. By default, both are available
				    sourceType: ['album'].// Select from the album
				    success: (res) = > {
						this.newPath = res.tempFilePaths[0]
						console.log(this.newPath)
						this.$store.commit('set_photo'.this.newPath)
						uni.navigateBack({
						    delta: 1}); }}); },// Take a picture
			takePhotoByHead() {
				this.showHeader = true // Start taking photos
				this.ctxHeader = uni.createCameraContext();
				this.ctxHeader.takePhoto({
					quality: 'high'.success: (res) = > {
						console.log(res)
						uni.compressImage({
							src: res.tempImagePath,
							quality: 90.// Compression ratio
							success: ress= > {
								this.newPath = ress.tempFilePath; / / picture
								console.log(this.newPath)
								this.$store.commit('set_photo'.this.newPath)
								uni.navigateBack({
								    delta: 1}); }}}})); },handleCameraError() {
				uni.showToast({
					title: 'User refuses to use camera'.icon: 'none'})},reverseCamera() {
				this.devicePosition = (("back"= = =this.devicePosition) ? "front" : "back")}}}</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		// align-items: center;
		justify-content: center;
		background: #fff;
		box-sizing: border-box;
		height: 100%;
		width: 100vw;

		.btns {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.item {
				width: 100rpx;
				height: 100rpx; }}}</style>
Copy the code

The above is the custom photo part of the code.