uni-app自定义摄像头拍照添加人物框

一、效果

效果种包含相册选择，拍照，切换摄像头。

二、知识预备

需要用到uni的以下几个组件：

1、camera

地址：https://uniapp.dcloud.io/component/camera

2、cover-image

地址：https://uniapp.dcloud.io/component/cover-view?id=cover-image

三、思考和方法

思考

我实在新页面调用的摄像头拍照，那我拍了照片后怎么把数据带回原来的页面？

方法

vuex + onShow

四、代码

<template><view class="content" v-if="showHeader"style="position: fixed;top: 0;left: 0;z-index: 777;width: 100%;height: 100vh;background-color: #FFFFFF;"><camera :binderror="handleCameraError" :device-position="devicePosition" flash="off"style="width: 100%; height: 80vh;"><cover-image src="https://img-blog.csdnimg.cn/20210126152753150.png"style="width: 100%;height: 700rpx;margin-top:100rpx;"></cover-image></camera><view class="btns" style="width: 100%;height: 20vh;background: #3B4144;"><image class="item" @tap="chooseImage" src="../../static/write/photo.png"></image><image class="item" @tap="takePhotoByHead" src="../../static/write/camare.png"></image><image class="item" @tap="reverseCamera" src="../../static/write/change.png"></image></view><!-- <view class="error-handler" v-if="!authCamera"><button class="nobtn" openType="openSetting">打开相机授权</button></view> --></view>
</template><script>export default {data() {return {authCamera: false,showHeader: true,ctxHeader: null,devicePosition:'front'}}, watch:{showHeader(val){console.log(val)returnvar that = this;//获取相机权限uni.getSetting({success(res) {console.log('相机权限:', res)if (res.authSetting["scope.camera"]) {that.authCamera = true} else {that.authCamera = false// uni.showModal({//    title: '权限申请',//  content: '需要摄像头权限，以拍摄照片。',//   success: (btn_res) => {//       if (btn_res.confirm) {//            uni.authorize({//               scope: 'scope.camera',//              success() {//                   that.authCamera = true//               }//             })//        } else if (btn_res.cancel) {//      }//     }// });}}})}},onShow() {var that = this;//获取相机权限uni.getSetting({success(res) {console.log('相机权限:', res)if (res.authSetting["scope.camera"]) {that.authCamera = true} else {that.authCamera = false// uni.showModal({//   title: '权限申请',//  content: '需要摄像头权限，以拍摄照片。',//   success: (btn_res) => {//       if (btn_res.confirm) {//            uni.authorize({//               scope: 'scope.camera',//              success() {//                   that.authCamera = true//               }//             })//        } else if (btn_res.cancel) {//      }//     }// });}}})},onLoad() {// console.log(window.innerHeight)// if (uni.createCameraContext) {//    setTimeout(() => {//        this.cameraContext = uni.createCameraContext();//  }, 200)// } else {//    // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示//     uni.showModal({//       title: '提示',//        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'//    })// }},methods: {chooseImage(){uni.chooseImage({count: 1, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: (res)=> {this.newPath = res.tempFilePaths[0]console.log(this.newPath)this.$store.commit('set_photo', this.newPath)uni.navigateBack({delta: 1});}});},//拍摄头像takePhotoByHead() {this.showHeader = true //开启拍照this.ctxHeader = uni.createCameraContext();this.ctxHeader.takePhoto({quality: 'high',success: (res) => {console.log(res)uni.compressImage({src: res.tempImagePath,quality: 90, //压缩比例success: ress => {this.newPath = ress.tempFilePath; //图片console.log(this.newPath)this.$store.commit('set_photo', this.newPath)uni.navigateBack({delta: 1});}})}});},handleCameraError() {uni.showToast({title: '用户拒绝使用摄像头',icon: 'none'})},reverseCamera() {this.devicePosition = (("back" === this.devicePosition) ? "front" : "back")},}}
</script><style lang="scss" scoped>.content {display: flex;flex-direction: column;// align-items: center;justify-content: center;background: #fff;box-sizing: border-box;height: 100%;width: 100vw;.btns {display: flex;justify-content: space-around;align-items: center;.item {width: 100rpx;height: 100rpx;}}}
</style>

以上为自定义拍照部分代码。

uni-app自定义摄像头拍照添加人物框相关推荐

uni app 自定义头部组件（2）局部右侧按钮
上一篇为完全的自定义头部链接:https://blog.csdn.net/qq_37403179/article/details/102955419 本片则是使用uniapp已有的自定义方法给头部添 ...
uniapp微信小程序自定义相机，给相机添加辅助框，解决拒绝相机默认授权后无法再次拉起相机授权问题
微信小程序自定义相机效果文章目录微信小程序自定义相机效果需求一.小程序自定义相机 1.使用uniapp的camera组件二.使用cover-view,cover-image加辅助边框三 ...
R语言ggplot2在可视化图像中添加横线并在横线中添加文本、为横线中添加的文本添加文本框、自定义文本框的填充色（background color for a text annotation）
R语言ggplot2在可视化图像中添加横线并在横线中添加文本.为横线中添加的文本添加文本框.自定义文本框的填充色(background color for a text annotation) 目录
如何在SAP UI5应用里添加使用摄像头拍照的功能
昨天Jerry的文章纯JavaScript实现的调用设备摄像头并拍照的功能介绍了纯JavaScript借助WebRTC API来开发支持调用设备的摄像头拍照的web应用.而我同事遇到的实际情况是, ...
uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
树莓派摄像头拍照上传阿里云自定义OCR识别
树莓派加按钮,实现每次按下按钮摄像头拍照上传OCR识别.本次使用的是自定义识别. 主函数主要是拍照和自定义OCR两个板块 # -*- coding: utf-8 -*- ""&q ...
Android自定义相机拍照、图片裁剪的实现
原文:Android自定义相机拍照.图片裁剪的实现最近项目里面又要加一个拍照搜题的功能,也就是用户对着不会做的题目拍一张照片,将照片的文字使用ocr识别出来,再调用题库搜索接口搜索出来展示给用户,类 ...
利用摄像头拍照并保存照片的程序（python实现，含UI界面）
摘要:许多情况下我们需要用到摄像头获取图像,进而处理图像,这篇博文介绍利用pyqt5.OpenCV实现用电脑上连接的摄像头拍照并保存照片.为了使用和后续开发方便,这里利用pyqt5设计了个相机界面,后 ...
ios识别人脸自动拍照_求助，使用APP开发自动拍照及标记脸部，可以付费
自动拍照并标记需求说明: 背景:由于需要做一个人脸识别功能,需要打开摄像头自动拍照,并且用方框标记出人脸的位置,采用uni app后发现目前还不支持这个功能,需要开发第三方插件.人脸识别的功能类似与钉 ...