h5和微信小程序实现拍照功能（其中h5暂时无法调用闪光灯）

news/2024/7/24 11:30:57 标签: 微信小程序, 小程序

在这里插入图片描述

代码如下

<template>
	<view class="camera">
		
		<!-- #ifdef MP -->
		  <camera ref="myCamera" id="myCamera" device-position="back" :flash="flash" @error="error" style="display: block;">
		  	<view class="chejiaQie">
		  	<view @click="qie(0)" :class="cheJiaQieStatus==0?'textColorOne':'textColorTwo'" >拍车架号</view>
		  	
		  	<view @click="qie(1)" :class="cheJiaQieStatus==1?'textColorOne':'textColorTwo'" >拍行驶证</view>
		  	</view>
		  </camera>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />
			<view class="chejiaQie">
			<view @click="qie(0)" :class="cheJiaQieStatus==0?'textColorOne':'textColorTwo'" >拍车架号</view>
			
			<view @click="qie(1)" :class="cheJiaQieStatus==1?'textColorOne':'textColorTwo'" >拍行驶证</view>
			</view>
			<view style="width: 100%;height: 690px;">
			 <image mode="widthFix" :src="src" style="width: 100%; height: 100%;"></image>
			</view>
			
		</input>
	  	<!-- #endif -->
		
		<view class="footer">
					
					<view class="album" @click="toggleFlashlight">
						<view>	
						<image style="width: 42px;height: 42px;" :src="deng==1?require('../../static/imgs/shanguangdengMing.png'):require('../../static/imgs/shanguangdeng-liang.png')" mode="aspectFill" />
						<view style="text-align: center;">
						 闪光灯
						</view>
						</view>
					</view>
					
							<!-- #ifdef MP -->
						<view class="takePhoto" @click="takePhoto">
						<view>
							<image style="width: 42px;height: 42px;" :src="require('../../static/imgs/paizhao.png')" mode="aspectFill" />
							<view style="text-align: center;">
							拍照
							</view>
						</view>
						</view>
						<!--#endif-->
						<!-- #ifdef H5 -->
						<view class="takePhoto" @click="changePic">
						<view>
							<image style="width: 42px;height: 42px;" :src="require('../../static/imgs/paizhao.png')" mode="aspectFill" />
							<view style="text-align: center;">
							拍照
							</view>
						</view>
						</view>
						<!--#endif-->
					
					<view class="devPosition" @click="saoMao">
						<view>
					<!-- 		 @click="CameraPosition" -->
						
						<image style="width: 42px;height: 42px;" :src="require('../../static/imgs/tupian.png')" mode="aspectFill" />
						<view style="text-align: center;">
						相册
						</view>
						</view>
					</view>
		</view>
		

	</view>
</template>

<script>
	import store from '@/store';
	import {
	selectReleaseVehicles,
	selectFactoryNameplate
		} from '@/api/index.js';
	export default {
		data() {
			return {
				  
				deng:0,
				flash: 'off',
				cheJiaQieStatus:0,
				src:"",
				back:false,
				//是否重复拍照
				isReward:1,
			};
		},
		// onShow() {
		
		// 	var input = document.querySelector("input[type=file]");
		// 	input.addEventListener("change", function(e) {
		// 	  var file = e.target.files[0];
		// 	  var reader = new FileReader();
		// 	  reader.onload = function(e) {
		// 	    var dataURL = e.target.result;
		// 	    // 在此处对 dataURL 进行操作，例如显示图片
		// 	  };
		// 	  reader.readAsDataURL(file);
		// 	});
		// },
		methods: {
			handlerSuccess(img) {
                this.img = img
            },
			changePic(e) {
				let thit=this;
				uni.chooseImage({
					
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'],   //album 从相册选图，camera 使用相机
					success: function (res) {
					console.log(res,"777777")
						 uni.uploadFile({
							url: store.state.baseUrl + '/web/common/upload',  
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
									const userInfo=	uni.getStorageSync("userinfo");
								console.log(JSON.parse(uploadFileRes.data).data.src,"00999899")
							     thit.src=JSON.parse(uploadFileRes.data).data.src;
								res={image:JSON.parse(uploadFileRes.data).data.src,userId:userInfo.id}
								console.log(res,"2222222")
								
								if(thit.cheJiaQieStatus==1){
						
								selectReleaseVehicles(res).then(res=>{
												uni.setStorageSync(
												"saomiaoPai",res.data.data
												)
										   
										uni.showToast({
											title: '识别成功',
											mask: true,
											icon: 'none'
										})
										console.log("返回上个页面之前")
											uni.navigateBack()
											console.log("返回上个页面之后")
								}).catch((err)=>{
									uni.showToast({
										title: '识别失败',
										mask: true,
										icon: 'none'
									})
								})}else{
									
									//
									selectFactoryNameplate(res).then(res => {
										// thit.hao = res.data.data.carno;
										
										uni.setStorageSync(
										"saomiaoPai",res.data.data
										)
										// thit.car_hao = res.data.data.carno;
										// thit.pin_name = res.data.data.carModel;
										// thit.plaecr_pai = res.data.data.licenseAddress;
										// thit.plaecr = res.data.data.carAddress;
										uni.showToast({
											title: '识别成功',
											mask: true,
											icon: 'none'
										})
										uni.navigateBack(-1)
									}).catch((err)=>{
										uni.showToast({
											title: '识别失败',
											mask: true,
											icon: 'none'
										})
									})
									
									
								}
								
								},
								fail(err) {
									uni.showToast({
										title: '识别失败',
										mask: true,
										icon: 'none'
									})
									console.log("识别失败",err)
								}
								}
							)
						 
					}
				});
			},
			
			
			//选择相册
			saoMao(){
		
			let thit=this
			
					uni.chooseImage({
						count: 6, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'],   //album 从相册选图，camera 使用相机
						success: function (res) {
						console.log(res,"777777")
							 uni.uploadFile({
								url: store.state.baseUrl + '/web/common/upload',  
								filePath: res.tempFilePaths[0],
								name: 'file',
								success: (uploadFileRes) => {
										const userInfo=	uni.getStorageSync("userinfo");
									console.log(JSON.parse(uploadFileRes.data).data.src,"00999899")
								
									res={image:JSON.parse(uploadFileRes.data).data.src,userId:userInfo.id}
									console.log(res,"2222222")
									
									if(thit.cheJiaQieStatus==1){
							
									selectReleaseVehicles(res).then(res=>{
													uni.setStorageSync(
													"saomiaoPai",res.data.data
													)
											   
											uni.showToast({
												title: '识别成功',
												mask: true,
												icon: 'none'
											})
											console.log("返回上个页面之前")
												uni.navigateBack()
												console.log("返回上个页面之后")
									}).catch((err)=>{
										uni.showToast({
											title: '识别失败',
											mask: true,
											icon: 'none'
										})
									})}else{
										
										//
										selectFactoryNameplate(res).then(res => {
											// thit.hao = res.data.data.carno;
											
											uni.setStorageSync(
											"saomiaoPai",res.data.data
											)
											// thit.car_hao = res.data.data.carno;
											// thit.pin_name = res.data.data.carModel;
											// thit.plaecr_pai = res.data.data.licenseAddress;
											// thit.plaecr = res.data.data.carAddress;
											uni.showToast({
												title: '识别成功',
												mask: true,
												icon: 'none'
											})
											uni.navigateBack(-1)
										}).catch((err)=>{
											uni.showToast({
												title: '识别失败',
												mask: true,
												icon: 'none'
											})
										})
										
										
									}
									
									},
									fail(err) {
										uni.showToast({
											title: '识别失败',
											mask: true,
											icon: 'none'
										})
										console.log("识别失败",err)
									}
									}
								)
							 
						}
					});
				},
			
			//切换灯光
			 toggleFlashlight() {
			   let flag = this.flash
			   				if (flag == 'off') {
								this.deng=1
			   					this.flash = 'torch'
			   				} else {
								this.deng=0
			   					this.flash = 'off'
			   				}

			    },
			 
			qie(val){
				
				this.cheJiaQieStatus=val;
			},
			//拍照
			async takePhoto() {
				if(this.isReward==0){
					uni.showToast({
						title: '识别中，请稍等！',
						mask: true,
						icon: 'none'
					})
				};
				this.isReward=0;
			           const ctx = uni.createCameraContext();
			          await ctx.takePhoto({
			               quality: 'high',
			               success: (res) => {
			                   this.src = res.tempImagePath
			               }
			           }).catch((err)=>{
						   this.isReward=1;
						   

					   });
					await   this.shibie();
			       },
				   shibie(){
					   let thit=this;
					   	const userInfo=	uni.getStorageSync("userinfo");
					  uni.uploadFile({
					  	url: store.state.baseUrl + '/web/common/upload',
					  	filePath:this.src,
					  	name: 'file',
					  	success: (uploadFileRes) => {
					  		console.log(JSON.parse(uploadFileRes.data).data.src, "00999899")
					  
					  	let	res = {
					  			image: JSON.parse(uploadFileRes.data).data.src,
					  			userId: userInfo.id
					  		}
					  		console.log(res, "2222222")
							if(this.cheJiaQieStatus==1){
								selectReleaseVehicles(res).then(res => {
									uni.setStorageSync(
									"saomiaoPai",res.data.data
									)
								  this.isReward=1;									   
									// // thit.hao = res.data.data.carno;
									// thit.car_hao = res.data.data.carno;
									// thit.pin_name = res.data.data.carModel;
									// thit.plaecr_pai = res.data.data.licenseAddress;
									// thit.plaecr = res.data.data.carAddress;
									uni.showToast({
										title: '识别成功',
										mask: true,
										icon: 'none'
									})
							        uni.navigateBack()
								}).catch((err)=>{
									this.isReward=1;	
									uni.showToast({
										title: '识别失败',
										mask: true,
										icon: 'none'
									})
								})
							}else{
								selectFactoryNameplate(res).then(res => {
									uni.setStorageSync(
									"saomiaoPai",res.data.data
									)
									this.isReward=1;	
									// thit.hao = res.data.data.carno;
									// thit.car_hao = res.data.data.carno;
									// thit.pin_name = res.data.data.carModel;
									// thit.plaecr_pai = res.data.data.licenseAddress;
									// thit.plaecr = res.data.data.carAddress;
									uni.showToast({
										title: '识别成功',
										mask: true,
										icon: 'none'
									})
									uni.navigateBack()
								}).catch((err)=>{
									this.isReward=1;	
									uni.showToast({
										title: '识别失败',
										mask: true,
										icon: 'none'
									})
								})
							}
					  		
					  	}
					  }) 
				   }
		}
	}
</script>

<style lang="scss" scoped>
	.textColorOne{
		width: 70px;text-align: center;
		background-color: red;
		color: white;
	}
	.textColorTwo{
		width: 70px;text-align: center;
		background-color: white;
		color: red;
	}
	.chejiaQie{
		display: flex;top: 28px; margin: 0 auto;width: 140px;
		border: 1px solid red;
		height: 28px;
		line-height: 26px;
		margin-top: 30px;
	}
	.camera {
		width: 100%;
		height: 100%;
		position: relative;
 
		.preview-img {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
	}
 
	.camera camera {
		height: 100vh;
	}
 
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFF;
		border-radius: 10rpx 10rpx 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 20rpx;
		padding-bottom: 30rpx;
		box-shadow: 0 0 15rpx rgba(244, 244, 244, 0.4);
		z-index: 5;
 
		.back,
		.album,
		.takePhoto,
		.devPosition {
			margin: auto;
 
			image {
				width: 75rpx;
				height: 75rpx;
			}
		}
 
		.album {
			image {
				width: 85rpx;
				height: 85rpx;
			}
		}
 
		.takePhoto {
			image {
				width: 120rpx;
				height: 120rpx;
			}
		}
 
	}
</style>

http://www.niftyadmin.cn/n/5379326.html

相关文章

CSS篇--transform

CSS篇--transform

CSS篇–transform 使用transform属性实现元素的位移、旋转、缩放等效果 位移 // 语法 transform:translate(水平移动距离&#xff0c;垂直移动距离) translate() 如果只给一个值&#xff0c;表示x轴方法移动距离 单独设置某个方向的移动距离&#xff1a;translateX() transla…
阅读更多...
leetcode hot100爬楼梯

leetcode hot100爬楼梯

在本题目中&#xff0c;要求爬第n阶有多少种爬法&#xff0c;并且每次只能爬1个或者2个&#xff0c;这明显是动态规划的问题&#xff0c;我们需要用动态规划的解决方式去处理问题。动态规划就是按照正常的顺序由前向后依次推导。而递归则是从结果往前去寻找&#xff08;个人理解…
阅读更多...
【Linux】程序地址空间 -- 详解 Linux 2.6 内核进程调度队列 -- 了解

【Linux】程序地址空间 -- 详解 Linux 2.6 内核进程调度队列 -- 了解

一、程序地址空间回顾 在学习 C/C 时&#xff0c;我们知道内存会被分为几个区域&#xff1a;栈区、堆区、全局/静态区、代码区、字符常量区等。但这仅仅是在语言层面上的理解&#xff0c;是远远不够的。 如下空间布局图&#xff0c;请问这是物理内存吗&#xff1f; 不是&…
阅读更多...
php基础学习之可变函数（web渗透测试关键字绕过rce和回调函数）

php基础学习之可变函数（web渗透测试关键字绕过rce和回调函数）

可变函数 看可变函数的知识点之前&#xff0c;蒟蒻博主建议你先去看看php的可变变量&#xff0c;会更加方便理解&#xff0c;在本篇博客中的第五块知识点->php基础学习之变量-CSDN博客 描述 当一个变量所保存的值刚好是一个函数的名字&#xff08;由函数命名规则可知该值必…
阅读更多...
神经网络学习小记录78——Keras CA（Coordinate attention）注意力机制的解析与代码详解

神经网络学习小记录78——Keras CA（Coordinate attention）注意力机制的解析与代码详解

神经网络学习小记录78——Keras CA&#xff08;Coordinate attention&#xff09;注意力机制的解析与代码详解 学习前言代码下载CA注意力机制的概念与实现注意力机制的应用 学习前言 CA注意力机制是最近提出的一种注意力机制&#xff0c;全面关注特征层的空间信息和通道信息。…
阅读更多...
鸿蒙开发系列教程（二十三）--List 列表操作（2）

鸿蒙开发系列教程（二十三）--List 列表操作（2）

列表样式 1、设置内容间距 在列表项之间添加间距&#xff0c;可以使用space参数&#xff0c;主轴方向 List({ space: 10 }) { … } 2、添加分隔线 分隔线用来将界面元素隔开&#xff0c;使单个元素更加容易识别。 startMargin和endMargin属性分别用于设置分隔线距离列表侧…
阅读更多...
【编程】Rust语言入门第4篇 字符串

【编程】Rust语言入门第4篇 字符串

Rust 中的字符是 Unicode 类型&#xff0c;因此每个字符占据 4 个字节内存空间&#xff0c;但字符串不一样&#xff0c;字符串是 UTF-8 编码&#xff0c;也就是字符串中的字符所占的字节数是变化的(1 - 4)。 常见的字符串有两种: str&#xff0c;通常是引用类型&#xff0c;&a…
阅读更多...
vivim复习

vivim复习

vi/vim常用命令 vi&vim常用命令 set nu 显示行号 gg 跳转到文件开头 / 向后搜索 ? 向前搜索 n 查找下一处N 查找上一处 | 光标所在行行首L 屏幕所显示的底行{ 段首} 段尾- 前一行行首 后一行行首 ( 句首 ) 下一句首 $ 行末 M 屏…
阅读更多...
最新文章

Copyright @ 2022~2023