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


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 相关文章推荐
json 定义
Jun 10 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
js键盘事件的keyCode
Jul 29 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
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的FTP学习(一)[转自奥索]
2006/10/09 PHP
MVC模式的PHP实现
2006/10/09 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
学习YUI.Ext 第三天
2007/03/10 Javascript
js 表格隔行颜色
2009/12/02 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
Vue渲染函数详解
2017/09/15 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
python实现定时发送qq消息
2019/01/18 Python
Python collections模块使用方法详解
2019/08/28 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
大一学生假期实习的自我评价
2013/10/12 职场文书
记账会计岗位职责
2014/06/16 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
服务承诺书
2015/01/19 职场文书
体育教师个人工作总结
2015/02/09 职场文书
出纳试用期自我评价
2015/03/10 职场文书
社区文明倡议书
2015/04/28 职场文书
奖学金主要事迹范文
2015/11/04 职场文书