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=thisuni.chooseImage({count: 6, //默认9sizeType: ['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.flashif (flag == 'off') {this.deng=1this.flash = 'torch'} else {this.deng=0this.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.mzph.cn/news/686210.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

《中国教育报》2024投稿攻略

《中国教育报》2024投稿攻略

《中国教育报》2024投稿攻略 《中国教育报》普通版&#xff0c;1800字符1/4版&#xff0c;2300字符1/3版&#xff1b;周期1-2个月 《中国教育报》理论版 收中小学&#xff0c;全包1800字符&#xff1b;2500字符。收高校 2000-2300字符&#xff0c;六个月周期。 《中国教育…
阅读更多...
人工智能学习与实训笔记（一）：零基础理解神经网络

人工智能学习与实训笔记（一）：零基础理解神经网络

人工智能专栏文章汇总&#xff1a;人工智能学习专栏文章汇总-CSDN博客 本篇目录 一、什么是神经网络模型 二、机器学习的类型 2.1 监督学习 2.2 无监督学习 2.3 半监督学习 2.4 强化学习 三、网络模型结构基础 3.1 单层网络 ​编辑 3.2 多层网络 3.3 非线性多层网络…
阅读更多...
C++11---(1)

C++11---(1)

目录 一、C11简介 二、列表初始化 2.1、{ } 初始化 三、变量类型推导 3.1、auto 3.2、decltype 为什么需要decltype 四、final和override 4.1、final 4.2、override 五、默认成员函数控制 5.1、default修饰函数 5.2、delete修饰函数 六、nullptr 一、C11简介 C11是…
阅读更多...
【STM32 CubeMX】STM32中断体系结构

【STM32 CubeMX】STM32中断体系结构

文章目录 前言一、中断体系的比喻二、中断的内部结构2.1 EXTI触发方式 2.2 NVIC2.3 cpu与中断2.4 外部中断控制器框图上升沿触发选择寄存器屏蔽/使能寄存器等待处理寄存器 2.5 中断优先级 总结 前言 一、中断体系的比喻 STM32中断体系如下图所示&#xff1a; 一座大型建筑物…
阅读更多...
STM32F1 - 系统时钟SysTick

STM32F1 - 系统时钟SysTick

SysTick 1> SysTick硬件框图2> SysTick的时钟源3> 1ms定时_中断方式4> 思考&#xff1a;无符号数 0 - 255 ?相关资料 1> SysTick硬件框图 SysTick属于Cotex-M3&#xff0c;是CPU外设&#xff1b; SysTick: 位宽24bit&#xff0c; 递减计数&#xff0c;自动重装…
阅读更多...
让你的资金运动起来，金钱的聪明处理方式

让你的资金运动起来，金钱的聪明处理方式

一、教程描述 本套教程主要讲解了金融思维和财务思维&#xff0c;常见投资工具的实操技巧&#xff0c;资产配置方案的制定方法&#xff0c;等等&#xff0c;将会重构你现有的投资观念&#xff0c;提升你认知的宽度和深度&#xff0c;可以轻松读懂财经新闻&#xff0c;不仅学会…
阅读更多...
spring boot3登录开发-2(1图形验证码接口实现)

spring boot3登录开发-2(1图形验证码接口实现)

⛰️个人主页: 蒾酒 &#x1f525;系列专栏&#xff1a;《spring boot实战》 &#x1f30a;山高路远&#xff0c;行路漫漫&#xff0c;终有归途。 目录 前置条件 内容简介 图形验证码接口实现 导入糊涂工具依赖 接口分析 编写验证码接口 测试验证码接口 前置条件 …
阅读更多...
2024年通信安全员ABC证证模拟考试题库及通信安全员ABC证理论考试试题

2024年通信安全员ABC证证模拟考试题库及通信安全员ABC证理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年通信安全员ABC证证模拟考试题库及通信安全员ABC证理论考试试题是由安全生产模拟考试一点通提供&#xff0c;通信安全员ABC证证模拟考试题库是根据通信安全员ABC证最新版教材&#xff0c;通信安全员ABC证大纲整理…
阅读更多...
【Linux 04】编辑器 vim 详细介绍

【Linux 04】编辑器 vim 详细介绍

文章目录 &#x1f308; Ⅰ 基本概念&#x1f308; Ⅱ 基本操作1. 进入 / 退出 vim2. vim 模式切换 &#x1f308; Ⅲ 命令模式1. 光标的移动2. 复制与粘贴3. 剪切与删除4. 撤销与恢复 &#x1f308; Ⅳ 底行模式1. 保存文件2. 查找字符3. 退出文件4. 替换内容5. 显示行号6. 外…
阅读更多...
ElementUI Form：Cascader 级联选择器

ElementUI Form：Cascader 级联选择器

ElementUI安装与使用指南 Cascader 级联选择器 点击下载learnelementuispringboot项目源码 效果图 el-cascader.vue&#xff08;Select选择器&#xff09;页面效果图 项目里el-cascader.vue代码 <script> let id 0; export default {name: el_cascader,data() {re…
阅读更多...
线性代数的本质 2 线性组合、张成的空间、基

线性代数的本质 2 线性组合、张成的空间、基

基于3Blue1Brown视频的笔记 一种新的看待方式 对于一个向量&#xff0c;比如说&#xff0c;如何看待其中的3和-2&#xff1f; 一开始&#xff0c;我们往往将其看作长度&#xff08;从向量的首走到尾部&#xff0c;分别在x和y上走的长度&#xff09;。 在有了数乘后&#xff0…
阅读更多...
Netty中的适配器、Handler共享和资源管理

Netty中的适配器、Handler共享和资源管理

ChannelHandler的适配器 有一些适配器类可以将编写自定义的ChannelHandler所需要的工作降到最低限度&#xff0c; 因为它们提供了定义在对应接口中的所有方法的默认实现。因为有时会忽略那些不感兴趣的 事件&#xff0c;所以Netty提供了抽象积累ChannelInboundHandlerAdapter(…
阅读更多...
OpenCV 4基础篇| OpenCV简介

OpenCV 4基础篇| OpenCV简介

目录 1. 什么是OpenCV2. OpenCV的发展历程3. 为什么用OpenCV4. OpenCV应用领域5. OpenCV的功能模块5.1 基本模块5.2 扩展模块5.3 常用函数目录 1. 什么是OpenCV OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源的计算机视觉和机器学习软件库。它…
阅读更多...
BUGKU-WEB bp

BUGKU-WEB bp

题目描述 题目截图如下&#xff1a; 进入场景看看&#xff1a; 解题思路 提示说&#xff1a;弱密码top1000&#xff1f;z???(爆破?)先看看源码有没有提示 相关工具 Burp Suit 爆破top1000字典&#xff0c;点击下载 解题步骤 随便测试账号密码admin、admin 得到提…
阅读更多...
【AIGC】Stable Diffusion之模型微调工具

【AIGC】Stable Diffusion之模型微调工具

推荐一款好用的模型微调工具&#xff0c;cybertron furnace 是一个lora训练整合包&#xff0c;提供训练 lora 模型的工具集或环境。集成环境包括必要的依赖项和配置文件、预训练脚本&#xff0c;支持人物、二次元、画风、自定义lora的训练&#xff0c;以简化用户训练 lora 模型…
阅读更多...
【刷题】牛客— NC21 链表内指定区间反转

【刷题】牛客— NC21 链表内指定区间反转

链表内指定区间反转 题目描述思路一&#xff08;暴力破解版&#xff09;思路二&#xff08;技巧反转版&#xff09;思路三&#xff08;递归魔法版&#xff09;Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读&#xff01;&#xff01;&#xff01;下一篇文章见&…
阅读更多...
LV.23 D2 开发环境搭建及平台介绍 学习笔记

LV.23 D2 开发环境搭建及平台介绍 学习笔记

一、Keil MDK-ARM简介及安装 Keil MDK&#xff0c;也称MDK-ARM&#xff0c;Realview MDK &#xff08;Microcontroller Development Kit&#xff09;等。目前Keil MDK 由三家国内代理商提供技术支持和相关服务。 MDK-ARM软件为基于Cortex-M、Cortex-R4、ARM7、ARM9处理器设备…
阅读更多...
选择排序和快速排序（1）

选择排序和快速排序（1）

目录 选择排序 基本思想 选择排序的实现 图片实现 代码实现 快速排序 基本思想 快速排序的实现 图片实现 代码实现 选择排序 基本思想 每一次从待排序的数据元素中选出最小&#xff08;最大&#xff09;的元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部…
阅读更多...
网络原理-TCP/IP(7)

网络原理-TCP/IP(7)

目录 网络层 路由选择 数据链路层 认识以太网 以太网帧格式 认识MAC地址 对比理解MAC地址和IP地址 认识MTU ARP协议 ARP协议的作用 ARP协议工作流程 重要应用层协议DNS(Domain Name System) DNS背景 NAT技术 NAT IP转换过程 NAPT NAT技术的优缺点 网络层 路由…
阅读更多...
《Go 简易速速上手小册》第4章：接口与抽象（2024 最新版）

《Go 简易速速上手小册》第4章：接口与抽象（2024 最新版）

文章目录 4.1 接口的定义与实现 - Go 语言的多面手4.1.1 基础知识讲解4.1.2 重点案例&#xff1a;动物乐队功能描述实现代码 4.1.3 拓展案例 1&#xff1a;通用支付系统拓展案例 1&#xff1a;通用支付系统功能描述实现代码 4.1.4 拓展案例 2&#xff1a;动物园管理器拓展案例 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023