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

 更新时间:2020年10月22日 15:31:04   作者:佛佛ง  
这篇文章主要为大家详细介绍了微信小程序使用前置摄像头拍照,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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("上传失败");
 },
 });
}

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

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

相关文章

  • 详谈ES6中的迭代器(Iterator)和生成器(Generator)

    详谈ES6中的迭代器(Iterator)和生成器(Generator)

    下面小编就为大家带来一篇详谈ES6中的迭代器(Iterator)和生成器(Generator)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JavaScript实现鼠标拖拽调整div大小

    JavaScript实现鼠标拖拽调整div大小

    这篇文章主要为大家详细介绍了JavaScript实现鼠标拖拽调整div大小,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • chatGPT教我写compose函数的详细过程

    chatGPT教我写compose函数的详细过程

    这篇文章主要介绍了chatGPT教我写compose函数,文中给大家介绍了chatGPT过程概略,本文结合实例代码图文给大家讲解的非常详细,需要的朋友可以参考下
    2023-02-02
  • TypeScript中never类型的妙用详解

    TypeScript中never类型的妙用详解

    TypeScript 是一种静态类型的编程语言,它可以让我们在编写 JavaScript 代码时,提前发现并避免一些潜在的错误,本文主要为大家介绍了TypeScript中never类型的妙用,感兴趣的可以了解下
    2023-11-11
  • JavaScript 自定义属性 data-*使用介绍

    JavaScript 自定义属性 data-*使用介绍

    Html5规范中规定自定义属性需要添加前缀data-,目的是提供与渲染无关的信息,读取的时候是通过dataset对象,使用”.”来获取属性,需要去掉data-前缀
    2023-06-06
  • Javascript 一些需要注意的细节(必看篇)

    Javascript 一些需要注意的细节(必看篇)

    下面小编就为大家带来一篇Javascript 一些需要注意的细节(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • js用正则表达式来验证表单(比较齐全的资源)

    js用正则表达式来验证表单(比较齐全的资源)

    在学习网页中的表单验证,顺便学习下正则表达式,在网上找了后发现了一个比较齐全的资源,稍微进行了一下排版,喜欢的朋友可以收藏
    2013-11-11
  • JavaScript获取网页的宽高及如何兼容详解

    JavaScript获取网页的宽高及如何兼容详解

    这篇文章主要给大家介绍了关于JavaScript获取网页的宽高及如何兼容的相关资料,主要介绍了三个方式,分别是window.innerWidth / window.innerHeight、document.documentElement.clientWidth以及混杂模式/怪异模式 下的宽高的获取,需要的朋友可以参考下
    2021-05-05
  • 微信小程序实现接收验证码

    微信小程序实现接收验证码

    这篇文章主要为大家详细介绍了微信小程序实现接收验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 微信小程序实现侧边栏二级联动

    微信小程序实现侧边栏二级联动

    这篇文章主要为大家详细介绍了微信小程序实现侧边栏二级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论