uniapp使用camera完成指定区域大小扫描拍照功能--自定义拍照区域，相册选择剪裁 打开闪光灯

1.代码可以直接用，剪裁功能使用uniapp的插件图片裁剪插件 - DCloud 插件市场

<template>
	<view>
		<camera class="camera-box" style="position: relative;" resolution="high" @initdone="initdone" :flash='flash'
			:style='{width:windowWidth+"px",height:windowHeight+"px"}'>
			<cover-view class='camerabgImage'>
				<cover-view class="active">
					<cover-image class="active-image"
						src="https://oss.nodekoa.com/blog/2020/12/0716073342969601272.png"></cover-image>
 
					<cover-view class="text">将OE码放入框内</cover-view>
 
				</cover-view>
				<cover-view @click="openlamp"
					style="display: flex;flex-direction: column;justify-content: center;align-items: center;color: #fff;margin-top: 130%;">
					<cover-image class="img" src="../../static/off.png" v-if="flash=='off'"></cover-image>
					<cover-image class="img" src="../../static/open.png" v-else></cover-image>
					<!-- <cover-view class="font" style="font-size: 26rpx;margin-top: 20rpx;">打开闪光灯</cover-view> -->
				</cover-view>
				<cover-view
					style="position: absolute;bottom: 0;left: 0;width: 100%;height: 300rpx;display: flex;z-index:999;">
					<cover-view class="icon_flex" @click="takealbum">
						<cover-image class="img" src="../../static/photo.png"></cover-image>
						<cover-view class="font"> 相册 </cover-view>
					</cover-view>
					<cover-view class="icon_flex" @click="takePhoto">
						<cover-view
							style="display: flex;background-color: #fff;align-items: center;justify-content: center;padding: 30rpx;border-radius: 50%;">
							<cover-image class="img" src="../../static/camera.png"></cover-image>
						</cover-view>
						<cover-view class="font">拍照</cover-view>
					</cover-view>
					<cover-view class="icon_flex" @click="manualInput">
						<cover-image class="img" src="../../static/pen.png"></cover-image>
						<cover-view class="font"> 手动输入 </cover-view>
					</cover-view>
				</cover-view>
 
			</cover-view>
		</camera>
		<canvas class="cop" canvas-id="image-canvas"></canvas>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				flash: 'off',
				screenWidth: '', //屏幕宽度
				setData: {
					src: ''
				},
				scanShow: true,
				isShowImage: false,
				windowWidth: '',
				windowHeight: '',
				canvas: '',
				img: '',
				maxZoom: null,
				currentZoom: 1,
			}
		},
		onLoad() {
 
			let getWindowInfo = uni.getWindowInfo()
			this.screenWidth = getWindowInfo.screenWidth
			console.log(this.screenWidth, '---------53');
			this.authorize()
			let {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync()
			this.windowWidth = windowWidth
			this.windowHeight = windowHeight
 
		},
		onShow() {
			this.currentZoom = 1
		},
		methods: {
			manualInput() {
				uni.navigateTo({
					url: `/pages_my/tally/getOe?false=false`
				})
 
			},
			inputCode(e) {
				console.log(e, '---------90');
			},
			//关闭输入框
			handleCancel() {
				this.showInput = false;
				this.inputVal = ""
			},
			handleConfirm() {
				let _value = this.inputVal.replace(/[, ]/g, '')
				if (_value && _value.length === 17) {
					uni.redirectTo({
						url: `/pages_my/shoplist?vinCode=${_value}`
					});
					this.inputVal = ""
					this.showInput = false
 
				} else {
					uni.showToast({
						title: '请输入正确的17位VIN码！',
						icon: 'none',
						duration: 3000
					});
				}
 
			},
			//开灯
			openlamp() {
				let flag = this.flash
				if (flag == 'off') {
					this.flash = 'on'
				} else {
					this.flash = 'off'
				}
			},
			// 授权
			authorize() {
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.camera']) {
							uni.authorize({
								scope: 'scope.camera',
								success: () => {
									console.log('授权成功');
								},
								fail: () => {
									uni.showModal({
										title: '提示',
										content: '尚未进行授权，该功能将无法使用',
										success: (res1) => {
											if (res1.confirm) {
												uni.openSetting({
													success: (setting) => {
														// console.log(setting);
														if (setting
															.authSetting[
																'scope.camera'
															]) {
															uni.showToast({
																title: '授权成功!'
															})
														} else {
															uni.showToast({
																title: '授权失败!',
																icon: 'none'
															})
															setTimeout(
																() => {
																	uni.navigateBack()
																}, 1000
															)
														}
													}
												})
											} else {
												uni.navigateBack()
											}
										}
									})
								}
							})
						}
					}
				})
			},
			takePhoto() {
				uni.showLoading({
					title: '上传中...'
				})
				const ctx = wx.createCameraContext()
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						this.loadTempImagePath(res.tempImagePath)
					}
				})
			},
			chooseImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						this.loadTempImagePath(res.tempImagePath)
					}
				})
			},
			takealbum() {
				const that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ["album"],
					success: (res) => {
						uni.navigateTo({
							url: "/pages_my/tally/imageCrop?img=" + res.tempFilePaths[0]
						})
						console.log(res.tempFilePaths[0], '-------------175')
					}
				});
			},
			chooseImage(sourceType) {
				const that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: [sourceType],
					success: (res) => {
						console.log(res, '-------------175');
						if (res.tempFiles[0]['size'] > 20 * 1024 * 1024) {
							uni.showToast({
								title: '图片大小不能超过20M',
								icon: 'none',
								duration: 3000
							});
							return;
						}
						uni.showLoading({
							title: '上传中...'
						})
						if (res.tempFiles[0]['size'] < 5 * 1024 * 1024) {
							that.loadTempImagePath(res.tempFilePaths[0])
						} else {
							uni.compressImage({
								src: res.tempFilePaths[0],
								quality: 80,
								success: res => {
									that.loadTempImagePath(res.tempFilePath, that)
								}
							})
						}
 
					}
				});
			},
			initdone({
				detail: {
					maxZoom
				}
			}) {
				// 最大放大倍速
				this.maxZoom = maxZoom / 2
 
			},
			setZoom(zoom) {
				console.log(this.currentZoom);
				const ctx = uni.createCameraContext()
				if (zoom) {
					// console.log(this.maxZoom);
					if (this.currentZoom >= this.maxZoom) return false
					// console.log(size);
					ctx.setZoom({
						zoom: this.currentZoom += 1
					})
				} else {
					if (this.currentZoom <= 1) return false
					// console.log(size);
					ctx.setZoom({
						zoom: this.currentZoom -= 1
					})
				}
 
			},
			//rpx转px
			rpx2px(rpx) {
				const screenWidth = uni.getSystemInfoSync().screenWidth
				return (screenWidth * Number.parseInt(rpx)) / 750
			},
			loadTempImagePath(url) {
				let {
					windowWidth,
					windowHeight
				} = uni.getSystemInfoSync()
				let x = (windowWidth - this.rpx2px(300)) / 2
				let y = windowHeight * 0.2
				let testc = uni.createCanvasContext('image-canvas');
				testc.drawImage(url, 0, 0, windowWidth, windowHeight)
				testc.draw(false, () => {
					uni.canvasToTempFilePath({
						x: 0,//设置图片x轴起始点
						y: y,//设置图片y轴起始点
						width: this.windowWidth,
						height: this.rpx2px(300),
						canvasId: 'image-canvas',
						fileType: 'jpg',
						quality: 1,
						complete: (res2) => {
							uni.uploadFile({
								url: `${process.uniEnv.baseUrl}/baseVinCode/getVinCodeByImg`,
								filePath: res2.tempFilePath,
								name: 'file',
								formData: {
									file: res2.tempFilePath
								},
								header: {
									'Content-Type': 'multipart/form-data',
								},
								success: response => {
									let res = JSON.parse(response.data.toString("utf8"));
									const {
										data,
										code
									} = res;
									let value = {
										img: res2.tempFilePath,
										font: data
									}
									console.log(res2.tempFilePath,'----------截取后的图片地址');
									if (code == 200) {
										uni.navigateTo({
											url: `/pages_my/tally/getOe?data=${JSON.stringify(value)}`
										})
 
									} else {
										uni.showToast({
											title: res.msg,
											duration: 3000
										});
									}
								},
 
								complete: () => {
									uni.hideLoading()
								}
 
							});
 
						}
					})
				})
			}
		},
 
	}
</script>
 
<style>
	page {
		/* background-color: red; */
		/* background: #fbfbfb; */
		height: auto;
		overflow: hidden;
	}
</style>
<style scoped lang="scss">
	.yulan-box {
		position: relative;
		width: 100%;
		height: 100%;
 
 
	}
 
	.img {
		width: 60rpx;
		height: 60rpx;
	}
 
	.icon_flex {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
 
		.font {
			font-size: 26rpx;
			color: #fff;
			margin-top: 30rpx;
		}
	}
 
	.beat {
		width: 33%;
		position: absolute;
		bottom: 0rpx;
		left: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #ffffff;
 
		.beatImg {
			width: 88rpx;
			height: 88rpx;
			margin-bottom: 30rpx;
		}
	}
 
	.cop {
		width: 100%;
		height: 100vh;
	}
 
	.camera-box {
		position: relative;
		width: 100vw;
		height: 300rpx;
	}
 
	.camera-box .camerabgImage {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0
	}
 
	.camera-box .camerabgImage .active {
		box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 20%;
		left: 0;
		right: 0;
	}
 
	.camera-box .camerabgImage .active-image {
		box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.2);
		// align-items: center;
		display: block;
		width: 100%;
		height: 300rpx;
	}
 
	.camera-box .camerabgImage .text {
		text-align: center;
		// margin-top: 56rpx;
		// line-height: 100rpx;
 
		font-size: 28rpx;
		font-weight: 400;
		color: #fff;
		line-height: 100rpx
	}
 
	.camera-box .camerabgImage .btn {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		background: #fff;
		border: 6rpx solid#fff;
 
		position: absolute;
		bottom: 0;
		left: 0;
	}
 
	.camera-box .camerabgImage .btn .button {
		width: 102rpx;
		height: 102rpx;
		border-radius: 50%;
		border: 4rpx solid#000
	}
 
	.camera-box .camerabgImage .btn2 {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		background: #fff;
		border: 6rpx solid#fff;
 
		position: absolute;
		bottom: 0;
		left: 0;
	}
 
	.camera-box .camerabgImage .btn2 .button2 {
		width: 102rpx;
		height: 102rpx;
		border-radius: 50%;
		border: 4rpx solid#000
	}
 
	.abc {
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		background: #000000;
		left: 117.9px;
		top: 209.6px;
	}
</style>