VUE3拍照+上传服务器

最新推荐文章于 2024-09-19 16:38:09 发布

原创

最新推荐文章于 2024-09-19 16:38:09 发布 · 1.3k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#服务器 #javascript #运维

经过一周的奥里给终于磕出来了，废话不多说代码见。

WEB前端

这是 Template的

<template>

<div class="camera_outer">



<video

id="videoCamera"

:width="videoWidth"

:height="videoHeight"

autoplay

poster="https://ts1.cn.mm.bing.net/th/id/R-C.23034dbcaded6ab4169b9514f76f51b5?rik=mSGADwV9o%2fteUA&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f40%2f9640_1.jpg&ehk=RYei4n5qyNCPVysJmE2a3WhxSOXqGQMGJcvWBmFyfdg%3d&risl=&pid=ImgRaw&r=0"

/>

<canvas

style="display: none"

id="canvasCamera"

:width="videoWidth"

:height="videoHeight"

></canvas>

<el-button @click="getCompetence()">打开摄像头</el-button>

<el-button @click="stopNavigator()">关闭摄像头</el-button>

<el-button @click="setImage()">拍照</el-button>

<div v-if="imgSrc" class="img_bg_camera">

<img :src="imgSrc" alt="" class="tx_img" />