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

在这里插入图片描述

代码如下

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/391576.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

shell编程：求稀疏数组中元素的和(下标不连续)

shell编程：求稀疏数组中元素的和(下标不连续)

#!/bin/basharr([2]3 [5]2 [6]2 [9]1)for i in "${!arr[]}" dosum$((sumarr[i])) doneecho $sumBash 脚本中&#xff0c;* 和 符号在数组上下文中有不同的用途。当使用它们来遍历数组时&#xff0c;必须了解它们之间的区别。 * (无前置感叹号 !)&#xff1a; 在索引…
阅读更多...
数据库第五次实验

数据库第五次实验

目录 1 创建数据表 2 创建多个用户 ​​​​​​​3 用户的授权 ​​​​​​​4 用户权限的回收 ​​​​​​​5 角色的创建与授权 ​​​​​​​6 回收角色的权利 ​​​​​​​7 审计的设置 1 创建数据表 SQL语句&#xff1a; use experimentfive; create table…
阅读更多...
MySQL 基础知识（九）之视图

MySQL 基础知识（九）之视图

目录 1 视图的介绍 2 视图算法 3 创建视图 4 查看视图结构 5 修改视图 6 删除视图 7 参考文档 1 视图的介绍 视图是一张并不存储数据的虚拟表&#xff0c;其本质是根据 SQL 语句动态查询数据库中的数据。数据库中只存放了视图的定义&#xff0c;通过 SQL 语句使用视图时…
阅读更多...
HarmonyOS—@State装饰器：组件内状态

HarmonyOS—@State装饰器：组件内状态

State装饰的变量&#xff0c;或称为状态变量&#xff0c;一旦变量拥有了状态属性&#xff0c;就和自定义组件的渲染绑定起来。当状态改变时&#xff0c;UI会发生对应的渲染改变。 在状态变量相关装饰器中&#xff0c;State是最基础的&#xff0c;使变量拥有状态属性的装饰器&a…
阅读更多...
C#学习(十三)——多线程与异步

C#学习(十三)——多线程与异步

一、什么是线程 程序执行的最小单元 一次页面的渲染、一次点击事件的触发、一次数据库的访问、一次登录操作都可以看作是一个一个的进程 在一个进程中同时启用多个线程并行操作&#xff0c;就叫做多线程 由CPU来自动处理 线程有运行、阻塞、就绪三态 代码示例&#xff1a; cl…
阅读更多...
AI：131- 法律文件图像中的隐含信息挖掘与敲诈勒索检测

AI：131- 法律文件图像中的隐含信息挖掘与敲诈勒索检测

🚀点击这里跳转到本专栏，可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航！ 从基础到实践，深入学习。无论你是初学者还是经验丰富的老手，对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的关键代码，详细讲解供…
阅读更多...
[AIGC ~ coze] Kafka 消费者——从源码角度深入理解

[AIGC ~ coze] Kafka 消费者——从源码角度深入理解

Kafka 消费者——从源码角度深入理解 一、引言 Kafka 是一个分布式的流处理平台&#xff0c;广泛应用于大规模数据处理和实时数据管道。在 Kafka 生态系统中&#xff0c;消费者扮演着至关重要的角色&#xff0c;它们从 Kafka 主题中读取数据并进行处理。本文将深入探讨 Kafka …
阅读更多...
七天入门大模型 ：大模型LLM 训练理论和实战最强总结！

七天入门大模型 ：大模型LLM 训练理论和实战最强总结！

本文对于想入门大模型、面试大模型岗位、大模型实具有很强的指导意义。喜欢记得收藏、关注、点赞 文章目录 技术交流群用通俗易懂方式讲解系列总览介绍预训练范式如何确定自己的模型需要做什么训练&#xff1f;模型推理的一般过程PyTorch 框架设备PyTorch基本训练代码范例Trans…
阅读更多...
自动化测试：电商管理系统元素定位练习​

自动化测试：电商管理系统元素定位练习​

本次专题我们来说一下 Python中Unittest 框架的使用及如何通过HTMLTestRunner实现自动化测试报告的自动生成。案例中的代码我们仍旧使用课堂学习中部署的“电商管理系统”来实现。本次练习包括以下几个操作&#xff1a; l 测试用例整体结构设计 l 测试用例的实现 l 测试套的…
阅读更多...
linux kernel 内存踩踏之KASAN_SW_TAGS（二）

linux kernel 内存踩踏之KASAN_SW_TAGS（二）

一、背景 linux kernel 内存踩踏之KASAN&#xff08;一&#xff09;_kasan版本跟hasan版本区别-CSDN博客 上一篇简单介绍了标准版本的KASAN使用方法和实现&#xff0c;这里将介绍KASAN_SW_TAGS和KASAN_HW_TAGS 的使用和背后基本原理&#xff0c;下图是三种方式的对比&#x…
阅读更多...
线索化二叉树（先序，中序，后序）+线索化二叉树的遍历【java详解】

线索化二叉树（先序，中序，后序）+线索化二叉树的遍历【java详解】

目录 线索化二叉树的基本介绍&#xff1a; 举个栗子&#xff1a; 二叉树的中序线索化&#xff1a; 创建HeroNode类&#xff0c;表示节点信息&#xff1a; 编写中序线索化方法代码&#xff1a; 中序线索化遍历代码&#xff1a; 测试代码&#xff1a; 测试结果&#xff1a…
阅读更多...
一起学量化之RSI指标

一起学量化之RSI指标

RSI指标 Relative Strength Index，相对强弱指数（RSI），是一个衡量资产过度买入或过度卖出状态的技术指标。 1. RSI的基本概念 当RSI超过70时，通常被认为是超买状态。当RSI低于30时，通常被认为是超卖状态。RSI超过80，被认为是严重超买状态。RSI低于20，被认为是严重超卖状…
阅读更多...
微波炉维修笔记

微波炉维修笔记

微波主要是靠2.45GHz 左右的微波(12.2cm 波长)加热水分子实现食物加热 所有不要使用金属器皿进行加热&#xff0c;要么因为电磁屏蔽&#xff0c;起不到加热效果&#xff0c;要么火光四射 微波炉基本组成 借鉴姜师傅的视频 碰到不加热其它都正常的问题 1.检查高压电容 使用万…
阅读更多...
第10章 JDBC

第10章 JDBC

10.1 什么是JDBC JDBC的全称是Java数据库连接&#xff08;Java Database Connectivity&#xff09;&#xff0c;它是一套用于执行SQL语句的Java API。应用程序可通过这套API连接到关系型数据库&#xff0c;并使用SQL语句完成对数据库中数据的新增、删除、修改和查询等操作。 …
阅读更多...
Trie 字典树的两种实现方式

Trie 字典树的两种实现方式

Trie&#xff0c;又称字典树、单词查找树或键树&#xff0c;是一种树形结构&#xff0c;是一种哈希树的变种。典型应用是用于统计&#xff0c;排序和保存大量的字符串&#xff08;但不仅限于字符串&#xff09;&#xff0c;所以经常被搜索引擎系统用于文本词频统计。它的优点是…
阅读更多...
github Two-factor authentication (2FA)is required for your GitHub account

github Two-factor authentication (2FA)is required for your GitHub account

问题 github 2FA认证 详细问题 笔者使用GitKraken&#xff0c;使用github登录&#xff0c;github要去 Two-factor authentication (2FA)is required for your GitHub account&#xff0c;即进行2FA认证 解决方案 解决方案一、 微信 → \rightarrow →搜索腾讯身份验证器…
阅读更多...
内存块与内存池

内存块与内存池

&#xff08;1&#xff09;在运行过程中&#xff0c;MemoryPool内存池可能会有多个用来满足内存申请请求的内存块&#xff0c;这些内存块是从进程堆中开辟的一个较大的连续内存区域&#xff0c;它由一个MemoryBlock结构体和多个可供分配的内存单元组成&#xff0c;所有内存块组…
阅读更多...
java 培训班预定管理系统Myeclipse开发mysql数据库web结构jsp编程servlet计算机网页项目

java 培训班预定管理系统Myeclipse开发mysql数据库web结构jsp编程servlet计算机网页项目

一、源码特点 java 培训班预定管理系统是一套完善的java web信息管理系统 采用serlvetdaobean&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xf…
阅读更多...
java 宠物医院系统Myeclipse开发mysql数据库web结构jsp编程计算机网页项目

java 宠物医院系统Myeclipse开发mysql数据库web结构jsp编程计算机网页项目

一、源码特点 java 宠物医院系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&…
阅读更多...
Excel如何把窗口冻结，在下拉滚动条的时候仍然可以看到前几行数据？

Excel如何把窗口冻结，在下拉滚动条的时候仍然可以看到前几行数据？

** 共分2个情况&#xff1a; ①&#xff1a; 冻结首行&#xff1a; 作用&#xff1a;只冻结第一行的数据窗口。在下拉滚动条时&#xff0c;首行不会动&#xff0c;其他数据行会动步骤如下&#xff1a;1、鼠标放在首行的最左边&#xff0c;然后左键点一下先选中整行2、然后&am…
阅读更多...
最新文章

Copyright @ 2022~2023