1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：内心的一片海 分类：Toy博客 阅读(56) 违法举报

这篇具有很好参考价值的文章主要介绍了h5和微信小程序实现拍照功能（其中h5暂时无法调用闪光灯）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

代码如下文章来源地址https://www.toymoban.com/news/detail-826262.html

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

到了这里，关于h5和微信小程序实现拍照功能（其中h5暂时无法调用闪光灯）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序实现拍照并拿到图片对象功能

    微信小程序实现拍照并拿到图片对象功能

    微信小程序提供了函数chooseImage 我们可以在wxml中定义一个按钮 这里绑定了一个点击事件 叫 photograph 然后 我们在js中编写代码如下 这里 我们点击后调用了wx.chooseImage 回调中接受了一个res对象 其中的tempFilePaths字段就是我们要到图片集合 我们运行代码 然后用手机真机调试 然后

    2024年02月07日
    浏览(61)
  • uniapp：h5和微信小程序文件下载方式

    uniapp：h5和微信小程序文件下载方式

    一、h5浏览器端下载方式，直接使用a标签 download属性指定下载文件的文件名，也可以不加 注意：记得一定要加ifdef注释，不然其他端也会显示a标签 二、微信小程序下载方式，通过uniapp的downloadFile和wx小程序的saveFile保存文件 wx保存文件的api只是临时保存图片文件，可以通过微

    2024年02月07日
    浏览(112)
  • 微信小程序怎么实现拍照功能，以及授权，拍完照保存到本地。

    微信小程序怎么实现拍照功能，以及授权，拍完照保存到本地。

    写微信小程序就是要不停的翻阅官方文档查阅所需要的需求。 API的使用说明 wx.getSetting 获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限 scope.camera相机 wx.authorize 提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或

    2024年02月02日
    浏览(60)

  • 【h5+微信小程序】vue2实现h5扫码登录功能

    需要实现在同域名的h5页面上增加一个微信扫码登录的功能，如果用户已经有小程序的账号，可以直接登录。 使用 ：vue2+微信小程序原生开发 可以实现上述功能的 前提 是：同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。域名已经配置。 可以用什么来区分

    2024年02月14日
    浏览(71)

  • 微信小程序内嵌h5页面，实现动态设置顶部标题的功能

    一、需求描述 使用HBuilder X作为开发工具，vue作为开发语言，开发微信小程序。微信小程序页面内嵌h5页面，即web-view/web-view标签。通过设置不同url连接地址，设置不同的标题。 二、失败做法 页面A嵌入h5页面，需要给A设置标题。最开始写法是在lonload页面内，使用如下语句实现

    2024年02月04日
    浏览(74)

  • 实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)

    微信小程序的开发框架是uniapp，使用uniapp脚手架搭建，其中有页面是展示另一个小程序，在这个页面主体内容使用了标签将H5的页面内容展示，H5中有页面存放了下载的路径。点击下载按钮下载文件，或者预览文件让用户手动保存。 如果是pc端，下载用一个 a 标签就很容易，但

    2024年02月10日
    浏览(148)
  • vue3引入JS-SDK实现h5分享小卡片、跳转微信小程序功能

    vue3引入JS-SDK实现h5分享小卡片、跳转微信小程序功能

    微信js-sdk官方文档： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 想要实现的效果： 1.登录微信公众平台，进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 2.通过npm引入js-sdk 安装成功后，可以在package.json中找到\\\"weixin-js-sdk\\\" 3.在main.js中，将js-sdk挂载

    2024年02月11日
    浏览(67)
  • 微信小程序嵌套H5页面，调用微信小程序扫码功能，并将结果传回H5页面

    微信小程序嵌套H5页面，调用微信小程序扫码功能，并将结果传回H5页面

    实现方式: 小程序嵌套h5页面，点击h5页面的扫码按钮跳转到小程序的扫码页面，进入之后会立即扫码，拿到扫码结果后，跳转到小程序定义好的webview页面，再由webview页面进入h5页面。 缺点：为了唤起扫码，会进入一个空白的扫码页面 1、小程序嵌套h5页面方法 在小程序中，创

    2024年02月12日
    浏览(53)

  • uniapp APP、H5和微信小程序 使用百度地图，H5动态加载百度地图sdk，cover-image图片不显示，标准基座模拟器地图不显示，表单校验字段[‘**‘]在数据库中不存在

    APP里面的几个注意项 在百度地图开放平台申请密匙，在manifest.json App模块配置的地图模块选择百度地图并填入申请到的appkey。 页面使用uniapp的map标签，要在地图上面覆盖图片、内容等，使用cover-image、cover-view，因为map是原生组件，覆盖的内容有时不显示，使用v-if控制（这里

    2024年02月11日
    浏览(66)

  • 基于SpringBoot和微信小程序的校园失物招领系统的设计与实现

    🍅 作者主页：超级无敌暴龙战士塔塔开 🍅 简介：Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我，都给你】 🍅文末获取源码联系🍅 基于SpringBoot和微信小程序的校园失物招领系统的设计与实现,java项目。 eclipse和idea都能打开运行。 推荐环境配置：eclip

    2024年01月16日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包