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


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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
javascript中的继承实例代码
Apr 27 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
canvas 实现中国象棋
Feb 17 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 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
2.PHP入门
2006/10/09 PHP
文章推荐系统(二)
2006/10/09 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
动态控制Table的js代码
2007/03/07 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
django中使用POST方法获取POST数据
2019/08/20 Python
Python批量启动多线程代码实例
2020/02/18 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
电子商务专业学生职业生涯规划
2014/03/07 职场文书
关于安全演讲稿
2014/05/09 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
教师节倡议书2015
2015/04/27 职场文书
运动会宣传语
2015/07/13 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书