精华内容
下载资源
问答
  • 最近在项目遇到了一个问题,用uniapp的框架做一个功能,就是打开平板自带的前置摄像头拍照,uniapp上的功能只有打开默认相机的功能,但是前置摄像头需要你自己去手动转换一下,客户体验感很不好,产品经理要求必须要...

    最近在项目遇到了一个问题,用uniapp的框架做一个功能,就是打开平板自带的前置摄像头拍照,uniapp上的功能只有打开默认相机的功能,但是前置摄像头需要你自己去手动转换一下,客户体验感很不好,产品经理要求必须要打开就是前置摄像头~~~~~~~~~~~~~

    这可愁坏了我,于是各种百度,小伙伴球高人指点,uniapp的官方群也问了,都么有用,其中群里有个人给了一个方法,但是调用腾讯云的接口,但是小编开发的是本地开发~

    网上有个input方法,但是要在https环境下才能用。小编没用过,不知道有么有用~

    好了废话不多

    直接上代码

    html部分

    <template>
    	<view class="content">
    		<!-- 顶部tab -->
    		<uni-nav-bar class="nav-tab" left-icon="back" color="#FFFFFF" backgroundColor="#3f62f6" statusBar="true"
    			@clickLeft="tapBackIdColle">
    			<template v-slot:left>
    				<view class=" uni-flex uni-row" style="text-align: center;padding-top: 3px;">
    					<text class="px14">面部采集</text>
    				</view>
    			</template>
    			<!-- 	<view class=" uni-flex uni-row" style="text-align: center;position: absolute;right: 40px;" @tap="submit">
    				<text style="font-size: 16px;">提交</text>
    			</view> -->
    		</uni-nav-bar>
    		<view class="up-img ">
    			<span class="up-span">点击采集面部照片</span>
    			<view class="img-picker">
    				<!-- 第一次采集 -->
    				<view class="first">
    					<image :class="imgFlag==true?'up-img-after':'up-img-box'" @click="takePhoto" :src="up_img" mode="">
    					</image>
    					<view class="btns" v-if="imgFlag==true">
    						<button class="btn1" type="default" @click="retakePhoto" size="mini">重新采集</button>
    						<button class="btn2" type="default" @click="confirm" size="mini">确定</button>
    					</view>
    				</view>
    
    			</view>
    		</view>
    
    
    	</view>
    </template>
    
    <script>
    	import {
    		pathToBase64,
    		base64ToPath
    	} from 'image-tools';
    	export default {
    		data() {
    			return {
    				up_img: '../../../static/img/tzcj/up_img.png',
    				// up_img:'file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/doc/camera/1633765326477.jpg',
    				imgBase64: '',
    				src: '',
    				imgFlag: false
    			}
    		},
    		onLoad() {
    			let Camera = plus.camera.getCamera();
    			console.log(Camera);
    		},
    		methods: {
    			confirm(){//确定事件
    			uni.showModal({
    			    title: '提示',
    			    content: '是否确定使用当前的图片',
    			    success: function (res) {
    			        if (res.confirm) {
    			            console.log('用户点击确定');
    						uni.navigateTo({
    							url:'./tzcj?imgBase64='+that.imgBase64
    						})
    						
    			        } else if (res.cancel) {
    			            console.log('用户点击取消');
    			        }
    			    }
    			});
    				
    			},
    			retakePhoto(){//重新采集
    			this.takePhoto();
    				
    			},
    			tapBackIdColle() {//返回上一页
    				uni.navigateTo({
    					url: './tzcj'
    				})
    			},
    			takePhoto() {// 拍照   
    								  
    				var cmr = plus.camera.getCamera(1);
    				let that = this;
    				cmr.captureImage(function(p) {
    					//alert(p);//_doc/camera/1467602809090.jpg 
    					console.log(p);
    					plus.io.resolveLocalFileSystemURL(p, function(entry) {
    						//alert(entry.toLocalURL());//file:///storage/emulated/0/Android/data/io.dcloud...../doc/camera/1467602809090.jpg   
    						that.$nextTick(function() {
    							that.up_img = entry.toLocalURL();
    						})
    						that.imgFlag = true;
    						that.compressImage(entry.toLocalURL(), entry.name);
    
    
    					}, function(e) {
    						plus.nativeUI.toast("读取拍照文件错误:" + e.message);
    					});
    				}, function(e) {}, {
    					filename: "_doc/camera/",
    					index: 1
    				});
    
    			},
    			//压缩图片   
    			compressImage(url, filename) {
    				let name = "_doc/upload/-" + filename; //_doc/upload/F_ZDDZZ-1467602809090.jpg   
    				plus.zip.compressImage({
    						src: url, //src: (String 类型 )压缩转换原始图片的路径   
    						dst: name, //压缩转换目标图片的路径   
    						quality: 20, //quality: (Number 类型 )压缩图片的质量.取值范围为1-100   
    						overwrite: true //overwrite: (Boolean 类型 )覆盖生成新文件   
    					},
    					function(event) {
    						//uploadf(event.target,divid);   
    						var path = name; //压缩转换目标图片的路径   
    						//event.target获取压缩转换后的图片url路   
    						//filename图片名称   
    
    						pathToBase64(path).then(p => {
    
    							that.imgBase64 = p;
    						}).catch(error => {
    							console.error(error)
    						});
    					},
    					function(error) {
    						plus.nativeUI.toast("压缩图片失败,请稍候再试");
    					});
    			},
    
    
    
    
    
    		}
    	}
    </script>
    
    <style>
    	.content {
    		width: 100%;
    		height: 100%;
    		position: relative;
    	}
    
    	.up-img {
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    	}
    
    	.up-span {
    		/* position: absolute;
    		top: 80px;		
    		left: 40%;
    		right: 30%; */
    
    		color: #B23C3C;
    		margin: 0 auto;
    		margin-top: 15px;
    		font-size: 20px;
    
    	}
    
    	.btns {
    		transform: translateX(36%);
    		margin-top: 20px;
    	}
    
    	.btn1 {
    		background-color: #B13C3C !important;
    		color: #FFFFFF !important;
    
    	}
    
    	.btn2 {
    		background-color: #B13C3C !important;
    		margin-left: 25px;
    		color: #FFFFFF !important;
    	}
    
    	.up-img-box {
    		width: 160px;
    		height: 160px;
    		border-radius: 25px;
    		margin-left: 50%;
    		margin-top: 15px;
    		transform: translateX(-80px);
    	}
    
    	.up-img-after {
    		width: 300px;
    		height: 180px;
    		border-radius: 25px;
    		margin-left: 50%;
    		margin-top: 15px;
    		transform: translateX(-150px);
    	}
    </style>
    

    展开全文
  • 主要介绍了Html5调用手机摄像头并实现人脸识别的实现,混合App开发,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 调取手机摄像头 &l...

    调取手机摄像头

    <view @click="scan">扫码验证</view>
    scan() { //扫码验证
        var _this = this;
        uni.scanCode({
          onlyFromCamera: true, //为true只允许相机扫码,不加允许相册扫码
            success: function(res) {
                uni.showToast({
                    title: '扫码成功'
                })
            },
            fail: function(err) {
                console.log('扫码失败', err)
            }
        })
    },
    

    扫码成功的参数在res.result里面 。

    生成二维码图片

    下载qrcode.js文件

    GitHub: https://github.com/davidshimjs/qrcodejs

    <view class="qrcode">
    <canvas style="width: 200upx;height: 200upx;" canvas-id="couponQrcode"></canvas>
    </view>
    
    <script>
        const qrCode = require('../../libs/qrcode.js')
            methods: {
                //二维码生成工具
                couponQrCode() {
                    new qrCode('couponQrcode', {
                        text: "加入你所需要的参数",
                        width: 100,
                        height: 100,
                        showLoading: true, // 是否显示loading
                        loadingText: '二维码生成中', // loading文字
                        colorDark: "#333333",
                        colorLight: "#FFFFFF",
                        correctLevel: qrCode.CorrectLevel.H
                    })
                },
    
    
            }
    </script>    
    

     

    展开全文
  • 一:前端代码 image.vue <template> <view> <view class="uni-common-mt"> <form> <view class="uni-list"> <view class="uni-list-cell...view class="uni-label

    一:前端代码 image.vue

    <template>
    	<view>
    		<view class="uni-common-mt">
    			<form>
    				<view class="uni-list">
    					<view class="uni-list-cell">
    						<view class="uni-list-cell-left">
    							<view class="uni-label">图片来源</view>
    						</view>
    						<view class="uni-list-cell-right">
    							<picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex" mode="selector">
    								<view class="uni-input">{{sourceType[sourceTypeIndex]}}</view>
    							</picker>
    						</view>
    					</view>
    
    					<view class="uni-list-cell">
    						<view class="uni-list-cell-left">
    							<view class="uni-label">图片质量</view>
    						</view>
    						<view class="uni-list-cell-right">
    							<picker :range="sizeType" @change="sizeTypeChange" :value="sizeTypeIndex" mode="selector">
    								<view class="uni-input">{{sizeType[sizeTypeIndex]}}</view>
    							</picker>
    						</view>
    					</view>
    
    					<view class="uni-list-cell">
    						<view class="uni-list-cell-left">
    							<view class="uni-label">数量限制</view>
    						</view>
    						<view class="uni-list-cell-right">
    							<picker :range="count" @change="countChange" mode="selector">
    								<view class="uni-input">{{count[countIndex]}}</view>
    							</picker>
    						</view>
    					</view>
    				</view>
    
    
    				<view class="uni-list list-pd">
    					<view class="uni-list-cell cell-pd">
    						<view class="uni-uploader">
    							<view class="uni-uploader-head">
    								<view class="uni-uploader-title">选择图片</view>
    								<view class="uni-uploader-info">{{imageList.length}}/9</view>
    							</view>
    							<view class="uni-uploader-body">
    								<view class="uni-uploader__files">
    									<block v-for="(image,index) in imageList" :key="index">
    										<view class="uni-uploader__file">
    											<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
    										</view>
    									</block>
    									<view class="uni-uploader__input-box">
    										<view class="uni-uploader__input" @tap="chooseImage"></view>
    									</view>
    								</view>
    							</view>
    						</view>
    					</view>
    				</view>
    			
    			<view>
    				<button type="default" @click="uploadImage()">上传</button>
    			</view>
    			</form>
    		</view>
    	</view>
    </template>
    <script>
    	import permision from "@/common/permission.js"
    	var sourceType = [
    		['camera'],
    		['album'],
    		['camera', 'album']
    	]
    	var sizeType = [
    		['compressed'],
    		['original'],
    		['compressed', 'original']
    	]
    	export default {
    		data() {
    			return {
    				title: 'choose/previewImage',
    				imageList: [],
    				sourceTypeIndex: 2,
    				sourceType: ['拍照', '相册', '拍照或相册'],
    				sizeTypeIndex: 2,
    				sizeType: ['压缩', '原图', '压缩或原图'],
    				countIndex: 8,
    				count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    			}
    		},
    		onUnload() {
    			this.imageList = [],
    				this.sourceTypeIndex = 2,
    				this.sourceType = ['拍照', '相册', '拍照或相册'],
    				this.sizeTypeIndex = 2,
    				this.sizeType = ['压缩', '原图', '压缩或原图'],
    				this.countIndex = 8;
    		},
    		methods: {
    			uploadImage:function(){
    				
    				let imgs = this.imageList.map((value, index) => {
    				    return {
    				            name: "image" + index
    				        }
    				});
    					/* 上传图片 */
    					const uploadTask = uni.uploadFile({
    						  url : 'http://10.48.2.19:20010/phone/uploadImage',
    						  files: imgs,
    						  formData: {
    								'userId': 'test'
    						  },
    						  success: function (res) {
    						   let toJsonRes = JSON.parse(res.data) //获取到后台处理过的地址
    
    						  }
    					});
    			},
    			sourceTypeChange: function(e) {
    				this.sourceTypeIndex = parseInt(e.detail.value)
    			},
    			sizeTypeChange: function(e) {
    				this.sizeTypeIndex = parseInt(e.detail.value)
    			},
    			countChange: function(e) {
    				this.countIndex = e.detail.value;
    			},
    			chooseImage: async function() {
    				// #ifdef APP-PLUS
    				// TODO 选择相机或相册时 需要弹出actionsheet,目前无法获得是相机还是相册,在失败回调中处理
    				if (this.sourceTypeIndex !== 2) {
    					let status = await this.checkPermission();
    					if (status !== 1) {
    						return;
    					}
    				}
    				// #endif
    
    				if (this.imageList.length === 9) {
    					let isContinue = await this.isFullImg();
    					console.log("是否继续?", isContinue);
    					if (!isContinue) {
    						return;
    					}
    				}
    				uni.chooseImage({
    					sourceType: sourceType[this.sourceTypeIndex],
    					sizeType: sizeType[this.sizeTypeIndex],
    					count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
    					success: (res) => {
    						this.imageList = this.imageList.concat(res.tempFilePaths);
    					},
    					fail: (err) => {
    						// #ifdef APP-PLUS
    						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
    							this.checkPermission(err.code);
    						}
    						// #endif
    						// #ifdef MP
    						uni.getSetting({
    							success: (res) => {
    								let authStatus = false;
    								switch (this.sourceTypeIndex) {
    									case 0:
    										authStatus = res.authSetting['scope.camera'];
    										break;
    									case 1:
    										authStatus = res.authSetting['scope.album'];
    										break;
    									case 2:
    										authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
    										break;
    									default:
    										break;
    								}
    								if (!authStatus) {
    									uni.showModal({
    										title: '授权失败',
    										content: 'Hello uni-app需要从您的相机或相册获取图片,请在设置界面打开相关权限',
    										success: (res) => {
    											if (res.confirm) {
    												uni.openSetting()
    											}
    										}
    									})
    								}
    							}
    						})
    						// #endif
    					}
    				})
    			},
    			isFullImg: function() {
    				return new Promise((res) => {
    					uni.showModal({
    						content: "已经有9张图片了,是否清空现有图片?",
    						success: (e) => {
    							if (e.confirm) {
    								this.imageList = [];
    								res(true);
    							} else {
    								res(false)
    							}
    						},
    						fail: () => {
    							res(false)
    						}
    					})
    				})
    			},
    			previewImage: function(e) {
    				var current = e.target.dataset.src
    				uni.previewImage({
    					current: current,
    					urls: this.imageList
    				})
    			},
    			async checkPermission(code) {
    				let type = code ? code - 1 : this.sourceTypeIndex;
    				let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
    					await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
    						'android.permission.READ_EXTERNAL_STORAGE');
    
    				if (status === null || status === 1) {
    					status = 1;
    				} else {
    					uni.showModal({
    						content: "没有开启权限",
    						confirmText: "设置",
    						success: function(res) {
    							if (res.confirm) {
    								permision.gotoAppSetting();
    							}
    						}
    					})
    				}
    
    				return status;
    			}
    		}
    	}
    </script>
    
    <style>
    	.cell-pd {
    		padding: 22rpx 30rpx;
    	}
    
    	.list-pd {
    		margin-top: 50rpx;
    	}
    </style>
    

    二、后台接收代码 springboot项目Contriller

        @RequestMapping(value = "/uploadImage")
        @ApiAnnotation(description = "上传照片")
        public void uploadImage(MultipartHttpServletRequest request,User user){
            System.out.println("1111");
        }

     

    展开全文
  • 一直以来在微信里面始终无法用&lt;input id="videofile" name="videofile" type="...实现调用摄像头拍视频,后来在网上看到一个网友推荐的博文https://blog.csdn.net/u0147187

    一直以来在微信里面始终无法用<input id="videofile" name="videofile" type="file"  accept="video/*" multiple="" οnchange="uploadFile(this,3)">实现调用摄像头拍视频,后来在网上看到一个网友推荐的博文https://blog.csdn.net/u014718731/article/details/53156186。

    根据博文提示加上capture="camera",属性后果然可以在微信实现调用摄像头拍视频了,非常感谢推荐的网友“别了_不想说”的推荐和博客主的文章,纪录下来方便以后自己使用,也方便别人。

    修改后的内容如下:

    <input id="videofile" name="videofile" type="file" capture="camera" accept="video/*" multiple="" οnchange="uploadFile(this,3)">



    展开全文
  • plus.camera.getCamera()调用相机、摄像头

    千次阅读 2019-12-17 14:40:53
    plus.camera.getCamera()调用相机、摄像头 <div style="line-height: 1.5rem;" class="image-item space" onclick="getImage()">拍照 </div> <div style="line-height: 1.5rem;" class="image-item ...
  • 离线打包相机无法使用问题解决 项目中使用到了相机功能 , 从相册直接选取是可以的 , 但是使用拍照就无法唤起相机,于是查找原因 , 看见了官方的介绍 离线打包Android 10上无法启动相机 要在你的工程目录里面加上...
  • 获取微信绑定的手机号【繁琐】 前言 微信获取用户手机号,和用户名以及头像,在微信api更新后,都需要用户主动触发授权事件!!!...!!...!...去微信公众平台拿到你的小程序的 AppID 和 AppSecret ...调用 uni.login方法获取
  • App端如需要更丰富的相机拍照API(如直接调用前置摄像头),参考plus.camera OBJECT 参数说明 参数名 类型 必填 说明 平台差异说明 count Number 否 最多可以选择的图片张数,默认9 见...
  • uni-app运行小程序的前置设置开放端口设置小程序appID 开放端口 如果不开放端口。微信开发者工具将无法启动。 提示错误信息:工具的服务端口已关闭。要使用命令行调用工具,请在下方输入 y 以确认开启,或手动打开...
  • -- 输出识别的文字 --> <div id="ztext"></div> let constraints = {//摄像头参数 // audio: true, video: { width: 100, height: 300, // facingMode: 'user', //前置摄像头 ...
  • uniapp

    2021-11-18 15:47:49
    基础知识 目录结构 一个uni-app工程,默认包含如下目录及文件: ┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcbuniCloud) │─components 符合vue组件规范的uni-app组件目录 ...
  • camera前后摄像头切换原理

    千次阅读 2014-08-10 22:12:10
    比如camera的初始化流程,HAL接口主要工作如下: 1、调用系统调用open()打开camera设备节点,前后摄像头一般是/dev/video0或/dev/video1,这样会调用到内核的v4l2子系统里面的open函数,这个函数将会注册camera模组...
  • uniapp---app端实现刷脸功能

    千次阅读 2020-11-29 00:20:13
    App端常用的刷脸验证功能,实现界面如下,当执行某操作时(如点击按钮),首先调用前置摄像头进行扫脸操作,拍照后上传到后台进行身份验证。 解决方案: 参考文章:...
  • 自定义Camera系列之:TextureView + Camera

    千次阅读 2018-12-26 22:11:13
    // 如果摄像头不支持这些参数都会出错的,所以设置的时候一定要判断是否支持 List < String > supportedFlashModes = mParameters . getSupportedFlashModes ( ) ; if ( supportedFlashModes != null &...
  • 调用手机的相机功能并实现拍照和录像是很多APP与插件都必不可少的一个功能,今天智密科技就来分享一下如何基于uniapp + vue实现自定义相机界面,并且实现: 1: 自定义拍照 2: 自定义录像 3: 时长控制 4: 闪光灯...
  • App端如需要更丰富的相机拍照API(如直接调用前置摄像头),参考plus.camera OBJECT 参数说明 提示:  count 值在 H5 平台的表现,基于浏览器本身的规范。目前测试的结果来看,只能限制单选/多选,并不能限制数量...
  • "后置" : "前置"); }, camera() { let { ctx, type, startRecord } = this.data; // 拍照 if (type == "takePhoto") { console.log("拍照"); ctx.takePhoto({ quality: "normal", success: (res) => { //...
  • } }, error(e) { this.scanTip = "访问用户媒体失败" + e.name + "," + e.message }, playVideo() { this.getUserMedia({ video: { width: 1920, height: 1080, facingMode: "user" } /* 前置优先 */ }, this....
  • uni-app实现图片和视频上传功能

    千次阅读 2019-10-18 10:59:00
    前置摄像头 ' }, ], } }, 3.通过使用uni-app提供的api​显示操作菜单,在methods写这个方法,通过判断来,选择的是图片还是视频,根据选择的tabindex选择,然后调用对应的方法即可 chooseVideoImage()...
  • 在uni-app框架中,Android端调用前置摄像头有些设备会无法指定使用前置相机(不清楚目前有没有优化,我开发过程中遇到过)。 打开原生相机页面不属于应用内页面,使用割裂感强。 原生相机照片分辨率无法非常方便的...
  • 这样做可以满足功能需求,当时使用体验上并不好,各家相机的功能优化及风格各不相同,甚至还会出现无法指定使用前置摄像头的问题。 用推流来做头像拍摄功能 优化方案: 用户人脸页面点击注册按键,直接将空头像区域...
  • javaScript基础

    2021-11-25 21:42:55
    与app交互:uniapp调用摄像头、蓝牙等 等等 变量 什么事变量? 是计算机内存储数据的标识符,根据变量名可以获取到内存中存储的数据 为什么使用变量? 1.为存储数据 2.改变数据 变量的声明: 关键字var a 变量的...
  • uni-app入门

    2020-12-30 15:58:26
    uni-app入门uni-app的基本使用uni-app介绍 [官方网页](https://uniapp.dcloud.io/resource)环境搭建利用HbuilderX初始化项目运行项目介绍项目目录和文件作用全局配置和页面配置通过globalStyle进行全局配置创建新的...
  • HbuilderX 2.6.15 版本说明

    千次阅读 2020-04-25 10:36:13
    修复 Mac 内置浏览器分离后,点击关闭按钮,编辑器崩溃的Bug 修复 Mac 导入vue课程源码时,提示npm install失败的Bug 新增 uni-app 支持自定义uniapp编译器node启动内存(菜单【设置】【运行配置】) 【uni-app插件...
  • uniapp介绍 什么是uniapp uniapp是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。 截止2020年8...

空空如也

空空如也

1 2
收藏数 28
精华内容 11
关键字:

uniapp调用前置摄像头