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.hqwc.cn/news/473689.html

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

相关文章

Vue2：组件间通信框架Vuex

Vue2：组件间通信框架Vuex

一、原理图及作用 功能介绍&#xff1a; 简单说就是Vue项目中&#xff0c;各个组件间通信的一种框架 相较于之前的全局事件总线&#xff0c;该框架更实用&#xff01; 提高了代码的复用率&#xff0c;把核心业务代码&#xff0c;集中到store中&#xff0c;这样&#xff0c;一处…
阅读更多...
Java Lambda表达式：简化编程，提高效率

Java Lambda表达式：简化编程，提高效率

Java Lambda表达式&#xff1a;简化编程&#xff0c;提高效率 1. 使用Lambda表达式进行集合遍历1.1 未使用Lambda表达式&#xff1a;1.2 使用Lambda表达式&#xff1a; 2. 使用Lambda表达式进行排序2.1 未使用Lambda表达式&#xff1a;2.2 使用Lambda表达式&#xff1a; 3. 使用…
阅读更多...
市场复盘总结 20240208

市场复盘总结 20240208

仅用于记录当天的市场情况&#xff0c;用于统计交易策略的适用情况&#xff0c;以便程序回测 短线核心&#xff1a;不参与任何级别的调整&#xff0c;采用龙空龙模式 一支股票 10%的时候可以操作&#xff0c; 90%的时间适合空仓等待 二进三&#xff1a; 进级率中 25% 最常用的…
阅读更多...
Practical User Research for Enterprise UX

Practical User Research for Enterprise UX

2.1 Why It’s Hard to Get Support for Research in Enterprises 2.1.1 Time and Budget Instead of answering the question “What dowe gain if we do this research?”, ask instead “What do we stand to lose if we don’t do the research?” 2.1.2 Legacy Thinkin…
阅读更多...
Mysql第二关之存储引擎

Mysql第二关之存储引擎

简介 所有关于Mysql数据库优化的介绍仿佛都有存储引擎的身影。本文介绍Mysql常用的有MyISAM存储引擎和Innodb存储引擎&#xff0c;还有常见的索引。 Mysql有两种常见的存储引擎&#xff0c;MyISAM和Innodb&#xff0c;它们各有优劣&#xff0c;经过多次优化和迭代&#xff0c;…
阅读更多...
数据结构对链表的初步认识（一）

数据结构对链表的初步认识（一）

已经两天没有更新了&#xff0c;今天就写一篇数据结构的链表吧&#xff0c;巩固自己也传授知识&#xff0c;不知道各位是否感兴趣看看这一篇有关联表的文章。 目录 链表的概念与结构 单向链表的实现 链表各个功能函数 首先我在一周前发布了一篇有关顺序表的文章&#xff0c;…
阅读更多...
漏洞原理 | CORS跨域学习篇

漏洞原理 | CORS跨域学习篇

本文由掌控安全学院 - 帆先生 投稿 0x01&#xff1a;原理 1、 什么是CORS 全称跨域资源共享&#xff0c;用来绕过SOP(同源策略)来实现跨域访问的一种技术。 CORS漏洞利用CORS技术窃取用户敏感信息 2、 同源策略简介 同源策略是浏览器最核心也是最基本的安全功能&#xff0…
阅读更多...
Netty中的内置通信模式、Bootstrap和ChannelInitializer

Netty中的内置通信模式、Bootstrap和ChannelInitializer

内置通信传输模式 NIO:io.netty.channel.socket.nio 使用java.nio.channels包作为基础–基于选择器的方式Epoll:io.netty.channel.epoll由JNI驱动的epoll()和非阻塞IO.这个传输支持只有在Linux上可用的多种特性&#xff0c;如果SO_REUSEPORT&#xff0c;比NIO传输更快&#xf…
阅读更多...
layui表格中使用cascader后导致表格滚动条消失

layui表格中使用cascader后导致表格滚动条消失

修改前&#xff0c;受影响页面 修改后最终想要的效果 修改方法
阅读更多...
TIM编码器接口（编码器测速）

TIM编码器接口（编码器测速）

定时器编码器接口自动计次--------->对应手册14.3.12编码器接口模式 应用场景&#xff1a; 电机控制PWM驱动电机&#xff0c;编码器测电机速度&#xff0c;PID算法闭环控制 ------------------------------------------------------------------------------------------…
阅读更多...
Java IO详解

Java IO详解

一、流的概念与作用 流(Stream)&#xff1a; 在Java IO中&#xff0c;流是一个核心的概念。流从概念上来说是一个连续的数据传输过程。人们根据数据传输特性将流抽象为各种类&#xff0c;方便更直观的进行数据操作。你既可以从流中读取数据&#xff0c;也可以往流中写数据。流的…
阅读更多...
计算机毕业设计SSM基于的高校学习资源共享系统

计算机毕业设计SSM基于的高校学习资源共享系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; vue mybatis Maven mysql5.7或8.0等等组成&#xff0c;B…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023