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

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

一、效果

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

image.gif

二、知识预备

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

1、camera

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

7ef853bc9c17404db0d24d2ef82f62ef.png

2、cover-image

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

f88fa5e0f5e5460991b07835b6e868f0.png

三、思考和方法

思考

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

方法

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://ucc.alicdn.com/images/user-upload-01/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)
        return
        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) {
              //    }
              //  }
              // });
            }
          }
        })
      }
    },
    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, //默认9
            sizeType: ['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>

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



相关文章
|
8月前
|
XML Java Android开发
Android Studio App开发中改造已有的控件实战(包括自定义支付宝月份选择器、给翻页栏添加新属性、不滚动的列表视图 附源码)
Android Studio App开发中改造已有的控件实战(包括自定义支付宝月份选择器、给翻页栏添加新属性、不滚动的列表视图 附源码)
150 1
|
8月前
|
XML 搜索推荐 Java
Android App开发之自定义图形中位图与图形互转、剪裁图形内部区域、给图形添加部件的讲解及实战(附源码 简单易懂)
Android App开发之自定义图形中位图与图形互转、剪裁图形内部区域、给图形添加部件的讲解及实战(附源码 简单易懂)
86 0
|
8月前
|
XML 前端开发 Java
Android Studio App自定义控件中自定义视图的绘制讲解及实战(附源码 包括自定义绘制各种图形)
Android Studio App自定义控件中自定义视图的绘制讲解及实战(附源码 包括自定义绘制各种图形)
116 1
|
7天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
104 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
5天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
5月前
|
安全 前端开发 API
【Azure 应用服务】Azure Web App 服务默认支持一些 Weak TLS Ciphers Suite,是否有办法自定义修改呢?
【Azure 应用服务】Azure Web App 服务默认支持一些 Weak TLS Ciphers Suite,是否有办法自定义修改呢?
|
5月前
|
Java 应用服务中间件 Windows
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
|
3月前
|
移动开发 小程序 测试技术
自定义多级联动选择器指南(uni-app)
在本文中,探讨了如何在uni-app中创建自定义多级联动选择器组件。这个组件具有强大的多端支持,可适用于H5、APP、微信小程序、支付宝小程序等多种平台。
221 1
自定义多级联动选择器指南(uni-app)
|
3月前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
280 9
|
5月前
|
Java 应用服务中间件 Windows
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境

热门文章

最新文章

  • 1
    DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
  • 2
    圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
  • 3
    【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
  • 4
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 5
    电竞陪玩系统架构优化设计,陪玩app如何提升系统稳定性,陪玩小程序平台的测试与监控
  • 6
    京东商品详情数据接口(H5、APP 端)
  • 7
    年轻人如何运用圈子系统进行扩列,社交圈子论坛app扩列的好处,兴趣行业圈子提升社交技能
  • 8
    【Azure App Service】对App Service中CPU指标数据中系统占用部分(System CPU)的解释
  • 9
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 10
    app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈