全国服务热线:4008-888-888

公司新闻

小程序在线设计_微信小程序使用前置摄像头摄影

微信小程序使用前置摄像头拍照       这篇文章主要为大家详细介绍了微信小程序使用前置摄像头拍照,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

1、拍照页面:

 template 
 view title="拍照" 
 camera v-if="openCamera" device-position="front" frame-size="large" @error="error" /camera 
 cover-image src="/static/image/renzheng_zz.png" /cover-image 
 cover-view 请将正面人脸放在识别框中,进行拍摄 /cover-view 
 cover-image 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" /image 
 view 
 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;
 mon.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("上传失败");
}

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

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




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服