微信小程序使用前置摄像头拍照


Posted in Javascript onOctober 22, 2020

本文实例为大家分享了微信小程序使用前置摄像头拍照的具体代码,供大家参考,具体内容如下

微信小程序使用前置摄像头拍照

1、拍照页面:

<template>
 <view title="拍照">
 <camera v-if="openCamera" device-position="front" frame-size="large" class="zipai" @error="error"> </camera>
 <cover-image src="/static/image/renzheng_zz.png" class="zhezhao"></cover-image>
 <cover-view class="wenzi fint34">请将正面人脸放在识别框中,进行拍摄</cover-view>
 <cover-image class="paizhao" src="/static/image/renzheng_pz.png" @click="takePhoto"></cover-image>
 </view>
</template>
 
<script>
 export default {
 data() {
 return {
 openCamera:true
 }
 },
 
 methods: {
 takePhoto() {
 const ctx = wx.createCameraContext()
 ctx.takePhoto({
  quality: 'high',
  success: (res) => {
  let tempFilePath = res.tempImagePath
  uni.navigateTo({
  url:'/pages/renzhengwxtu/renzhengwxtu?src='+tempFilePath
  })
  }
 })
 },
 //用户拒绝授权摄像头
 error(e) {
 this.openCamera=false
 wx.showModal({
  title: '警告',
  content: '若不授权使用摄像头,将无法使用拍照功能!',
  cancelText: '不授权',
  cancelColor: '#1ba9ba',
  confirmText: '授权',
  confirmColor: '#1ba9ba',
  success:(res)=> {
  if (res.confirm) {//允许打开授权页面
  //调起客户端小程序设置界面,返回用户设置的操作结果
  wx.openSetting({
  success:(res)=> {
   res.authSetting = {
   "scope.camera": true
   }
   this.openCamera=true
  },
  })
  } else if (res.cancel) {//拒绝打开授权页面
  wx.navigateBack({delta:1})
  }
  }
 })
 },
 
 }
 }
</script>

2、预览图片页面:

<template>
 <view title="预览图片">
 <image mode="widthFix" :src="src" class="renlian"></image>
 <view class="btns">
 <text @click="takePhoto">重拍</text>
 <text @click="usePhoto">使用照片</text>
 </view>
 </view>
</template>
 
<script>
 export default {
 data() {
 return {
 src: '',
 timeId:null,
 }
 },
 onLoad(option) {
 this.src=option.src
 },
 onHide() {
 clearTimeout(this.timeId);
 this.timeId=null;
 },
 methods: {
 takePhoto() {
 uni.navigateBack({delta: 1});
 },
 usePhoto() {
 this.$request.uploadFileMinipro(this.src,this.retoRenzheng);
 },
 retoRenzheng(){
 this.timeId=setTimeout(()=>{
  var pages = getCurrentPages();
  var prevPage = pages[pages.length - 3]; //上一个页面
  prevPage.fromTu= true;
  uni.navigateBack({delta: 2});
 },200);
 },
 }
 }
</script>

3、上传图片方法:

// uploadFileMinipro
function uploadFileMinipro(tempFilePath,callback){
 // 1.2 上传头像
 let uin =common.getGlobalUserInfo().id;
 let reurl=common.ip;
 uni.uploadFile({
 url: reurl,
 filePath: tempFilePath,
 name: "file",
 formData:{uin:uin},
 success:(res)=>{
 console.log("res=",res);
 // 注意,这里获得是一个string,需要转换一下
 let resData = JSON.parse(res.data);
 if (resData.status == 1) {//<=0:人工返回的错误信息
 setErrorMessage("上传成功");
 if (typeof callback === "function"){
  callback();//刷新当前页面
 }
 
 } else if (resData.status < 1) {
  setErrorMessage(resData.msg)
 } else {
  setErrorMessage()
 }
 },
 fail:(res)=>{
 console.log("上传失败");
 },
 });
}

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript结合ajax读取txt文件内容
Dec 05 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
搞定immutable.js详细说明
May 02 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 #jQuery
jQuery实现计算器功能
Oct 19 #jQuery
vue3为什么要用proxy替代defineProperty
Oct 19 #Javascript
jQuery实现推拉门效果
Oct 19 #jQuery
小程序实现左滑删除的效果的实例代码
Oct 19 #Javascript
jQuery实现图片切换效果
Oct 19 #jQuery
jQuery实现回到顶部效果
Oct 19 #jQuery
You might like
PHP新手上路(六)
2006/10/09 PHP
php cli 小技巧
2013/06/03 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
CI框架Session.php源码分析
2014/11/03 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python实现包含min函数的栈
2016/04/29 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
python日志模块logbook使用方法
2019/09/19 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
铭立家具面试题
2012/12/06 面试题
软件工程师面试题
2012/06/25 面试题
园林技术个人的自我评价
2014/02/15 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
网站出售协议书范文
2014/10/10 职场文书
教师求职自荐信范文
2015/03/04 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书