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

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

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

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

(0)

相关推荐

  • 微信小程序 拍照或从相册选取图片上传代码实例

    这篇文章主要介绍了微信小程序 拍照或从相册选取图片上传代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 upload.wxml <!--pages/upload/upload.wxml--> <button bindtap='uploadPhoto'>拍照选取照片上传</button> upload.js // pages/upload/upload.js Page({ data: { imgData: [] }

  • 微信小程序开发之相册选择和拍照详解及实例代码

    微信小程序 拍照和相机选择详解 前言: 小程序中获取图片可通过两种方式得到,第一种是直接打开微信内部自己的样式,第一格就是相机拍照,后面是图片,第二种是弹框提示用户是要拍照还是从相册选择,下面一一来看. 选择相册要用到wx.chooseImage(OBJECT)函数,具体参数如下: 直接来看打开相机相册的代码: Page({ data: { tempFilePaths: '' }, onLoad: function () { }, chooseimage: function () { var t

  • 微信小程序 chooseImage选择图片或者拍照

    微信小程序 chooseImage选择图片或者拍照 一.使用API wx.chooseImage(OBJECT) var util = require('../../utils/util.js') Page({ data:{ src:"../image/pic4.jpg" }, gotoShow: function(){var _this = this wx.chooseImage({ count: 9, // 最多可以选择的图片张数,默认9 sizeType: ['original'

  • 微信小程序-拍照或选择图片并上传文件

    微信小程序-拍照或选择图片并上传文件 调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobject 上传文件API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html 主要js代码: choice: function () { var that = this wx.choose

  • 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传

    今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: 小demo,代码很简单. 1.index.wxml <!--index.wxml--> <button style="margin:30rpx;" bindtap="chooseimage">获取图片</button> <image src="{{tempFilePaths }}" mode="aspecFill"

  • 微信小程序拍照和摄像功能实现方法示例

    本文实例讲述了微信小程序拍照和摄像功能实现方法.分享给大家供大家参考,具体如下: 拍照 原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件的大小设置成根屏幕一样大,并在上面使用一个cover-image组件来给用户进行点击,可是实际上的情况是第一,cover-image组件有时候会消失,第二,整个流程实现起来很僵硬,页面跳转也是卡的要死,后来无意间发现了另一个API:wx.chooseImage,这个API会自己去调用相机和相册,之后

  • 微信小程序实现倒计时调用相机自动拍照功能

    本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下 在某些进行签到的场景,为了防止用户选择相册的照片或者不实时拍照,设置相机倒计时自动拍照. 一.首先是视图层index.wxml,视图层主要负责显示组件和图片. <!--index.wxml--> <view class="userinfo-login"> <view class="page-body"> <view class="page-

  • 微信小程序调用摄像头隐藏式拍照功能

    微信小程序最近非常火热,小编最近做了一个新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大家,具体内容如下: 问题 今天小编遇到了这么个问题,就是在用户使用App参加考试的时候调用摄像头抓拍用户是否作弊,其实这也没什么,关键在于不能打扰用户考试,不能被用户发现什么时候抓拍的,也不能给用户查看图片,只有考完是后才能查看.这系统相当于考驾照时的上机答题部分.开始经理的要求是调用小程序外部的手机拍摄功能,这

  • 微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)

    一.使用APIwx.chooseImage(OBJECT) wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 参数 类型 必填 说明 count Number 否 最多可以选择的图片张数,默认9 sizeType StringArray 否 original 原图,compressed 压缩图,默认二者都有 sourceType StringArray 否 album 从相册选图,camera 使用相机,默认二者都有 success Fun

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

    本文实例为大家分享了微信小程序使用前置摄像头拍照的具体代码,供大家参考,具体内容如下 1.拍照页面: <template> <view title="拍照"> <camera v-if="openCamera" device-position="front" frame-size="large" class="zipai" @error="error">

  • 微信小程序实现点击拍照长按录像功能的实现代码

    代码里面注释写的都很详细,直接上代码.官方的组件属性中有触摸开始和触摸结束属性.本功能依靠这些属性实现. .wxml代码: <!-- 相机 pages/camera/camera.wxml--> <!-- 相机 --> <camera wx:if="{{!videoSrc}}" device-position="back" flash="off" binderror="error" style=&

  • 微信小程序请求前置的方法详解

    问题 因为我们有的页面是在onload中去请求数据回来再渲染视图,如果我们可以将请求数据这一步提前到小程序页面跳转前做,就可以早一点把数据请求回来,优化的效果取决于页面跳转所需的时间. 需求 需要一种请求前置方法充分利用跳转的时间,预先请求接口数据,但是要尽量减少对旧项目的改造成本.因为现在我负责的小程序项目是用axios来请求接口数据,所以这里只举例axios中post的改造的思路.我这里是通过改写post方法,在请求的时候对需要预先请求的接口进行缓存,等第二次请求的时候返回第一次请求的pro

  • 微信小程序实现自定义拍摄组件

    微信小程序实现自定义摄像头(在摄像头内添加提示信息),供大家参考,具体内容如下 摄像头组件(wxml) <!-- 拍照功能 自定义摄像头           bindtap:takePhotoDepot----从图库获取           bindtap:takePhoto----拍照           bindtap:takeFrontBack---转换摄像头  --> <view wx:if="{{useCameraTakePhoto}}" class=&qu

  • 微信小程序调用摄像头实现拍照功能

    本文实例为大家分享了微信小程序调用摄像头实现拍照的具体代码,供大家参考,具体内容如下 微信小程序开发文档 首先,需要用户授权摄像头权限,这一步是必须的 具体步骤: 1.获取用户当前授权状态,看是否已经授权,如果已经授权直接显示摄像头2.如果用户还没有授权,则调起授权弹框,用户允许授权则显示摄像头3.如果用户不允许,则提示用户去设置页面打开摄像头权限 用户授权之后,就可以进行拍摄了,微信的camera组件无法显示为圆形,我这里是用一张图片遮盖了 上代码: wxml: <view class='ca

  • 微信小程序实现拍照画布指定区域生成图片

    最近写识别行驶证功能,点击拍照把指定区域截取,生成图片功能. 系统相机.该组件是原生组件,使用时请注意相关限制. 扫码二维码功能,需升级微信客户端至6.7.3. 微信小程序Camera相机地址 我们看下效果: 1.首先生成一个CanvasContext: /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { requireJs.adaptionIphoneX(this); this.ctx = wx.createCameraContext() }

  • 微信小程序实现拍照打卡功能

    本文实例为大家分享了微信小程序实现拍照打卡的具体代码,供大家参考,具体内容如下 由于拍照组件是相当于一个块,用隐藏显示的方法不太好,为了更好的用户交互,选择了在一个新的页面调用相机组件,上传图片并保存打卡数据的方式. 小程序端 签到页面wxml <view class="signBtn" bindtap="signSubmit">   <view>{{signTime}}</view>   <view>打卡签到<

随机推荐