vue-h5:在h5中实现相机拍照加上身份证人相框和国徽框

参考:
https://blog.csdn.net/weixin_45148022/article/details/135696629

https://juejin.cn/post/7327353533618978842?searchId=20241101133433B2BB37A081FD6A02DA60

https://www.freesion.com/article/67641324321/

https://github.com/AlexKratky/vue-camera-lib

效果:在这里插入图片描述

调用组件的

主要组件方法:openCamera,closeCamera

Upload.vue组件

<template><div id="cameraContainer"><div ref="takePhotoDiv" class="take-photo" style="display: none"><video ref="video"  id="video-fix" :width="width" :height="height" autoplay   webkit-playsinline playsinline></video><div class="frame-container"><div class="mask" >
<!--                  头像页图标--><img v-if="props.currPhotoType=='head'" class="img-head" src="../assets/image/idcard1.svg">
<!--                  国徽页图标--><img v-if="props.currPhotoType=='mark'" class="img-mark" src="../assets/image/idcard2.svg"><div class="tips">请将{{props.currPhotoType=='head'?'身份证人像面':'身份证国徽面'}}完全置于取景框内</div></div></div></div>
<!--      拍照按钮--><div id="captureButton"  @click="takePhoto"><div class="cap-inner"></div></div></div><canvas ref="canvas" style="display: none"></canvas><img ref="photo" id="photo" alt="入职文件" style="display: none" /></template>
<script setup lang="ts">
import { showToast } from "vant/lib/toast";
import { nextTick, onMounted, ref,inject } from "vue";
import {base64ToBlob, base64ToFile, putFile} from "@/common/services/OSSFile.ts";
import {FileUploadType} from "@/common/enum/FileUploadType.ts";
import {ElLoading} from "element-plus";
const props=defineProps({currPhotoType:String
})
const emit=defineEmits(['okUploadImg'])
const video = ref<HTMLVideoElement | null>(null);
// const frame = ref<HTMLDivElement | null>(null);
const photo = ref<HTMLImageElement | null>(null);
const canvas = ref<HTMLCanvasElement | null>(null);
const mediaStream = ref<any>();
const takePhotoDiv = ref<HTMLDivElement | null>(null);const width=ref()
const height=ref()
onMounted(()=>{//设置摄像头宽高width.value=window.innerHeightheight.value=window.innerWidth})const getVideoMedia = () => {if (video.value) {// ----------兼容性代码------------// 老的浏览器可能根本没有实现 mediaDevices,所以我们可以先设置一个空的对象if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
// 因为这样可能会覆盖已有的属性。这里我们只会在没有 getUserMedia 属性的时候添加它。if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function (constraints) {// 首先,如果有 getUserMedia 的话,就获得它var getUserMedia =navigator.webkitGetUserMedia || navigator.mozGetUserMedia;// 一些浏览器根本没实现它 - 那么就返回一个 error 到 promise 的 reject 来保持一个统一的接口if (!getUserMedia) {return Promise.reject(new Error("getUserMedia is not implemented in this browser"),);}// 否则,为老的 navigator.getUserMedia 方法包裹一个 Promisereturn new Promise(function (resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});};}// ----------兼容性代码------------// 获取用户媒体设备权限navigator.mediaDevices// 强制使用后置摄像头.getUserMedia({ video: { facingMode: { exact: "environment" } }, audio: false })//前置// .getUserMedia({ video: true, audio: false }).then((stream) => {// if (video.value) {//     video.value.srcObject = stream;//     mediaStream.value = stream;// }//兼容性写法if ("srcObject" in video.value) {video.value.srcObject = stream;} else {// 防止在新的浏览器里使用它,应为它已经不再支持了video.value.src = window.URL.createObjectURL(stream);}video.value.onloadedmetadata = function (e) {video.value.play();};}).catch((error) => {console.error("获取相机权限失败:", error);showToast('获取相机权限失败');});}
}const takePhoto = () => {nextTick(async () => {console.log(video.value)if (canvas.value && video.value && photo.value) {const context = canvas.value.getContext("2d");// 设置画布尺寸与取景框相同canvas.value.width = video.value.videoWidth;canvas.value.height = video.value.videoHeight;// 绘制取景框内的画面到画布if (context) {context.drawImage(video.value, 0, 0);// 将画布内容转为图片并显示photo.value.src = canvas.value.toDataURL();photo.value.style.display = "block";// 关闭videoconsole.log('video', video.value);video.value.pause();// 关闭摄像头mediaStream.value?.getTracks().forEach((track: any) => track.stop());video.value=null}}console.log(photo.value)// console.log(photo.value.src)   将文件流传给后台上传,下列代码根据实际情况自定let file:any=photo.value.srclet idtype=props.currPhotoType=='head'?FileUploadType.BIZ_TYPE_IDCARD2:FileUploadType.BIZ_TYPE_IDCARD1//文件名:时间戳+1000以内的随机数let  fileName=new Date().getTime()+ Math.floor(Math.random()*1000)+'.jpg'const loadingInstance = ElLoading.service({ fullscreen: true, background: 'rgba(0,0,0,0.1)', text: '请求中...' });let data = await putFile(fileName,idtype, base64ToFile(file,fileName));if(data){loadingInstance.close()sendValue({file:file,type:props.currPhotoType,url:data})showToast('上传成功!')emit('okUploadImg',{status:1})}else{loadingInstance.close()showToast('上传失败!')emit('okUploadImg',{status:2})}})
}const passValue:any = inject("getIdFile")
//3.孙组件在函数中调用爷爷传递过来的函数,并在()中传递要传递的数据
const sendValue = (file) => {passValue(file)
}
//4.调用这个函数(也可以使用点击事件等方式触发)//关闭相机
const closeCamera=()=>{// 关闭摄像头mediaStream.value?.getTracks().forEach((track: any) => track.stop());video.value=null
}
//dakai相机
const openCamera=()=>{console.log('打开相机')//打开相机if (takePhotoDiv.value) {takePhotoDiv.value.style.display = 'block'getVideoMedia()}
}defineExpose({openCamera,closeCamera
})
</script>
<style scoped lang="less"></style>
#cameraContainer {position: relative;//width: 324px;//height: 216px;width:100vw;height: 100vh;background: #000;overflow: hidden;.take-photo{//height:85.6*6px;//width: 53.98*6px;height: 70%;width: 90%;overflow: hidden;background: #000;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) ;}#video-fix{position: absolute;top: 50%;left: 50%;//transform: translate(-50%, -50%) rotate(90deg);transform: translate(-50%, -50%);}
}#video {object-fit: cover;}.frame-container {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}.mask {position: absolute;height:85.6*5px;width: 53.98*5px;border: 1px solid #fdfdfd;border-radius: 5px;top: 50%;left: 50%;transform: translate(-50%, -50%);.img-head{position: absolute;bottom: 4.5%;right: 13.7%;height: 28%;width: 53%;transform: rotate(90deg);}.img-mark{position: absolute;top:7%;right: 9%;width: 37%;height: 22.5%;transform: rotate(90deg);}.tips{position: absolute;left: -50%;top: 50%;color: #fff;transform: rotate(90deg);font-size: 14px;background: #555657;border-radius: 5px;}}#frame {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 200px;height: 90px;z-index: 10;background-color: transparent;
}#photo {display: none;}
#captureButton{width: 100px;height: 100px;border-radius: 50%;background: #ffffff;position: absolute;bottom: 50px;left: 50%;transform: translateX(-50%);display: flex;justify-content: center;align-items: center;.cap-inner{background: #fff;width: 85%;height: 85%;border-radius: 50%;border: 3px solid #000;}
}

base64转文件流

/*** @description: Base64 转 File* @param {string} base64 base64格式的字符串* @param {string} fileName 文件名* @return {File}*/
export const base64ToFile = (base64: string, fileName: string): File => {const arr: string[] = base64.split(',');const type = (arr[0].match(/:(.*?);/) as string[])[1];const bstr = atob(arr[1]);let n = bstr.length;const u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], fileName, { type });
};

调用组件:

<script setup lang="ts">
import {onMounted, ref} from "vue";
import Upload from "@/components/Upload.vue";const props=defineProps({currPhotoType:String
})
const _show=ref(false)
const uploadRef=ref()const goBack =()=> {// window.history.back() // 删掉van-popup打开时添加的history_show.value = false//关闭相机uploadRef.value.closeCamera()
}const openModal=()=>{_show.value=truesetTimeout(()=>{//打开相机uploadRef.value.openCamera()},500)}
onMounted(()=>{})const  okUpload=(e)=>{if(e.status==1){//上传成功,关闭弹框,关闭相机goBack()}if(e.status==2){//上传失败,关闭弹框,关闭相机goBack()}
}defineExpose({openModal
})
</script><template>
<!--全屏弹框组件--><!--  @close="selectProjectCloseHandler"   @open="selectProjectOpenHandler"--><van-popup v-model:show="_show"    :overlay="false"  position="bottom" :style="{ width: '100%', height: '100%'}"><div class="header"><van-nav-bar class="title" left-arrow title="身份证头像页上传" :safe-area-inset-top="true" :fixed="true"@click-left="goBack" /></div><div style="color: red">{{props}}</div><Upload  ref="uploadRef" @okUploadImg="okUpload" :currPhotoType="props.currPhotoType"></Upload></van-popup>
</template><style scoped lang="less"></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/12173.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

国标GB28181视频平台EasyCVR私有化部署视频平台对接监控录像机NVR时,录像机“资源不足”是什么原因?

EasyCVR视频融合云平台&#xff0c;是TSINGSEE青犀视频“云边端”架构体系中的“云平台”系列之一&#xff0c;是一款针对大中型项目设计的跨区域、网络化、视频监控综合管理系统平台&#xff0c;通过接入视频监控设备及视频平台&#xff0c;实现视频数据的集中汇聚、融合管理、…

【Android、IOS、Flutter、鸿蒙、ReactNative 】标题栏

Android 标题栏 参考 Android Studio版本 配置gradle镜像 阿里云 Android使用 android:theme 显示标题栏 添加依赖 dependencies {implementation("androidx.appcompat:appcompat:1.6.1")implementation("com.google.android.material:material:1.9.0")…

歌尔微拟赴港IPO,揭示AI+终端升级的供给革命

1959年&#xff0c;美国物理学家理查德费曼在他著名的演讲“底部有足够的空间”中&#xff0c;首次提出了将机器小型化到原子和分子尺度的想法。这个充满想象力的观点&#xff0c;为世界科技发展开启了一扇新的窗口。 时至今日&#xff0c;应这一理念而生的MEMS产品已经成为各…

ROS第七梯:ROS+VSCode+Python环境配置

第一步:Python版本的ROS项目和C++版本的ROS项目前期创建功能包的步骤基本一致,具体可参考第二章。 第二步:在功能包的目录下创建一个与src目录平级的文件夹,名称写作scripts: 第三步:在scripts文件夹下创建python的节点代码文件,此处以一个订阅节点代码文件为例:

洛谷解题日记||基础篇3

#include <iostream> #include <iomanip> // 用于设置输出格式 using namespace std;double a, b, c, d;// 定义方程 f(x) ax^3 bx^2 cx d double fc(double x) {return a * x * x * x b * x * x c * x d; }int main() {double l, r, m, x1, x2;int s 0;/…

软件测试学习记录 Day1

根据黑马程序员最新版的软件测试课程所做的笔记&#xff0c;需要原件后台私信&#xff1a; 练习提取测试点&#xff1a; 博主的答案&#xff0c;有不一样看法的可评论区讨论&#xff1a;

代码随想录刷题记录(二十七)——55. 右旋字符串

&#xff08;一&#xff09;问题描述 55. 右旋字符串&#xff08;第八期模拟笔试&#xff09;https://kamacoder.com/problempage.php?pid1065字符串的右旋转操作是把字符串尾部的若干个字符转移到字符串的前面。给定一个字符串 s 和一个正整数 k&#xff0c;请编写一个函数&…

FreeRTOS 24:事件组EventGroup等待、清零、获取操作

等待事件标志位xEventGroupWaitBits() 既然标记了事件的发生&#xff0c;那么我怎么知道他到底有没有发生&#xff0c;这也是需要一个函数来获 取 事 件 是 否 已 经 发 生 &#xff0c; FreeRTOS 提 供 了 一 个 等 待 指 定 事 件 的 函 数 — — xEventGroupWaitBits()&…

信息安全数学基础(47)域的结构

一、域的定义 设F为一个非空集合&#xff0c;在其上定义两种运算&#xff1a;加法和乘法。如果这两种运算在集合上封闭&#xff0c;且满足以下条件&#xff0c;则称F对于规定的乘法和加法构成一个域&#xff1a; F中所有元素对于加法形成加法交换群&#xff0c;即加法满足交换律…

#渗透测试#SRC漏洞挖掘#CSRF漏洞的防御

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

HarmonyOS 沉浸式状态实现的多种方式

1. HarmonyOS 沉浸式状态实现的多种方式 HarmonyOS 沉浸式状态实现的多种方式 1.1. 方法一 1.1.1. 实现讲解 &#xff08;1&#xff09;首先设置setWindowLayoutFullScreen(true)&#xff08;设置全屏布局&#xff09;。   布局将从屏幕最顶部开始到最底部结束&#xff0c…

在API接口数据获取过程中,如何确保数据的安全性和隐私性?

在API接口数据获取过程中&#xff0c;确保数据的安全性和隐私性至关重要。以下是一些关键措施&#xff0c;可以帮助开发者和管理者保护API接口的数据安全和隐私性&#xff1a; 身份认证和授权 身份认证&#xff1a;确认用户身份的过程&#xff0c;常用的身份认证方式包括用户…

C++常用的特性-->day05

友元的拓展语法 声明一个类为另外一个类的友元时&#xff0c;不再需要使用class关键字&#xff0c;并且还可以使用类的别名&#xff08;使用 typedef 或者 using 定义&#xff09;。 #include <iostream> using namespace std;// 类声明 class Tom; // 定义别名 using …

python-27-Python ORM系列之彻底搞明白ORM概念,对ORM进行封装结合FastAPI实现数据库的增删改查,联表查询等接口

python-27-Python ORM系列之彻底搞明白ORM概念&#xff0c;对ORM进行封装结合FastAPI实现数据库的增删改查&#xff0c;联表查询等接口 一.简介 在Python基础系列ORM部分为大家介绍了如何搭建MySQL数据和MySQL一些访问配置&#xff0c;同时也介绍了pymysql库的封装来实现对数…

从哈佛哲学系到蛋白质设计大师,David Baker:AlphaFold令我深刻认识到深度学习的力量

要说谁是引领蛋白质设计的世界级大师&#xff0c;美国华盛顿大学的 David Baker 教授可谓是当之无愧&#xff0c;作为该领域的顶级专家&#xff0c;Baker 在蛋白质方向发表研究论文 700 余篇&#xff0c;引用量累计超 17.7 万。今年 10 月&#xff0c;因其在蛋白质设计方面的卓…

【测试框架篇】单元测试框架pytest(2):用例编写

一、 前言 前面一章我们介绍了pytest环境安装和配置&#xff0c;并在pycharm里面实现了我们第一个pytest脚本。但是有些童鞋可能在编写脚本的时候遇到了问题&#xff0c;本文会讲一下我们编写pytest用例时需要遵守哪些既定的规则&#xff0c;同时这个规则也是可以修改的。 二…

实现LiDAR和多视角摄像头数据的对齐、可控X-DRIVE:用于驾驶场景的跨模态一致多传感器数据合成

Abstract 近年来&#xff0c;扩散模型在合成驾驶场景中的LiDAR点云或摄像头图像数据方面取得了进展。尽管这些模型在单一模态数据的边际分布建模方面取得成功&#xff0c;但对不同模态之间互相依赖关系的探索仍然不足&#xff0c;而这种依赖关系能够更好地描述复杂的驾驶场景。…

稳恒磁场(1)

物理概念 磁场是物质性的。 地磁场&#xff08;与地磁场正负极相反&#xff09;与磁偏角&#xff08;一般为0到11度&#xff09; 磁感应强度&#xff1a; 单位为特斯拉&#xff08;T&#xff09;&#xff0c;另一个常用单位是高斯&#xff08;G&#xff09;且1T 10^4 G 物…

自动驾驶系列—自动驾驶中的短距离感知:超声波雷达的核心技术与场景应用

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

多语言爬取淘宝价格信息 python 比价api接入指南

以下是爬取淘宝价格信息及接入淘宝比价 API 的一般步骤&#xff1a; 传统爬虫方式获取价格信息&#xff08;不建议大量使用&#xff0c;可能违反淘宝规定&#xff09;&#xff1a; 分析目标页面 URL&#xff1a;在淘宝搜索框输入关键词后&#xff0c;观察页面的 URL 结构。例如…