uniapp自定义相机拍照截取指定区域

原创已于 2024-06-28 16:27:03 修改 · 2.2k 阅读
7 ·
CC 4.0 BY-SA版权
文章标签：
#前端 #vue
于 2022-07-27 08:55:10 首次发布
该博客介绍了如何在微信小程序中集成摄像头和图片处理功能，通过选择图片或拍照，实现文字识别。用户可以调整摄像头焦距，并从相册选取图片。识别后的文字可以进一步处理，例如通过API进行识别。此外，还涉及到图片的裁剪操作，以确保文字区域准确无误。最后，识别的文字会通过API进行识别并展示结果。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<template>
	<view>	
		<camera  class="camera-box" resolution="high"  @initdone="initdone"
			: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">请将文字放入框中，点击拍照进行识别</cover-view>
				<cover-view class="zoom">
					<button @click="setZoom(false)">-</button>
					<button @click="setZoom(true)">+</button>
				</cover-view>
					<cover-view class="beat" @click="scan">
						<cover-image class="beatImg" src="@/static/index/album.png"></cover-image>
						<cover-view> 相册 </cover-view>
					</cover-view>
					<cover-view class="btn" @click="takePhoto">
						<cover-view class="button"></cover-view>
					</cover-view>
					<!-- <cover-view class="btn2" @click="chooseImg">
						<cover-view class="button2"></cover-view>
					</cover-view> -->
				</cover-view>
			</cover-view>
		</camera>
		<canvas class="cop" canvas-id="image-canvas"></canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scanShow: true,
				isShowImage: false,
				windowWidth: '',
				windowHeight: '',
				canvas: '',
				img: '',
				maxZoom:null,
				currentZoom:1,
			}
		},
		onLoad() {
			this.authorize()
			let {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync()
			this.windowWidth = windowWidth
			this.windowHeight = windowHeight
			
		},
		onShow() {
			this.currentZoom=1
		},
		methods: {
			// 授权
			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()
												}
											}
										})
								 }
							 })
						 }
					 }
				})
			},
			scan(){
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						
						const tempFilePaths = res.tempFilePaths[0];
						this.tui.nav('../cropper/cropper?src=' + tempFilePaths);
					}
				})
			},
			chooseImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						this.loadTempImagePath(res.tempImagePath)
					}
				})
			},
			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
					})
				}
				
			},
			takePhoto() {
				const ctx = uni.createCameraContext()
				ctx.takePhoto({
					quality: 'high',

					success: (res) => {
						
						this.loadTempImagePath(res.tempImagePath)
					
					}
				})
			},
			//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: x,
						y: y,
						width: this.rpx2px(300),
						height: this.rpx2px(300),
						canvasId: 'image-canvas',
						fileType: 'jpg',
						quality: 1,
						complete: (res2) => {
							this.http.uploadFile('/api/front/word/recognition', res2.tempFilePath).then(j=>{
								const {code,data,msg} = j
								if (code === 200) {
										data.push({
										 	 img:res2.tempFilePath
										  })
									uni.navigateTo({
									url:'../verify/verify?item='+encodeURIComponent(JSON.stringify(data))
								 })
								} else {
									this.tui.toast(msg)
								}
							})
							
							
							// uni.previewImage({
							// 	urls: [res2.tempFilePath]
							// })
							// this.tui.nav('')
							// uni.navigateTo({
							// 	url: 'test?img=' + res2.tempFilePath
							// })
							this.img = res2.tempFilePath
							console.log(res2.tempFilePath);
						}
					})
				})
			}
		},

	}
</script>

<style>
	page {
		/* background-color: red; */
		/* background: #fbfbfb; */
		height: auto;
		overflow: hidden;
	}
</style>
<style scoped lang="scss">
	.zoom {
		width: 300rpx;
		display: flex;
		margin-bottom: 200rpx;
		justify-content: space-around;
		button {
			width: 100rpx;
		}
	}
	.beat {
					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 {
		width: 100vw;
		height: 100vh
	}

	.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: 300rpx;
		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;
		margin: 0 auto
	}

	.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;
		margin-left: 60rpx;
	}

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