vue 打开摄像头保存图片

https://blog.csdn.net/weixin_42120669/article/details/120044796?spm=1001.2014.3001.5501

引用 jszip 和 file-saver

npm install jszip --save
npm install file-saver --save

headImgSrc 点击打开摄像头

closeImgSrc 点击关闭摄像头

引用图片可以自行设置

<template><div><!--开启摄像头--><div class="imagbtn"><img@click="callCamera"style="height: 100px; width: 100px":src="headImgSrc"alt="摄像头"/><img@click="closeCamera"style="height: 100px; width: 100px":src="closeImgSrc"alt="关闭摄像头"/><!--确认--><el-buttonv-if="isnotbtn"class="querybtn"size="mini"type="primary"@click="photograph">拍照</el-button><videoref="video"v-show="isnotbtn"style="margin-left: 100px":width="imagwidth":height="imagheight"autoplay></video></div><div class="canvasimages" v-show="isnotcheckall"><div class="canvas-images" v-show="isnotbtn"><canvasv-for="item in domains"style="margin-left: 5px":ref="item":width="imagwidth":height="imagheight"></canvas></div><el-button class="iconbtn" type="primary" @click="cicnspin">下载<i class="el-icon-upload el-icon--right icnspin"></i></el-button></div></div>
</template>
<script>
import JSZip from "jszip";
import FileSaver from "file-saver";
export default {data() {return {headImgSrc: require("../../../static/img/sxt.jpg"),closeImgSrc: "../../../static/img/gbsxt.jpg",isnotbtn: false,isnotcanvas: false,imagheight: 100,imagwidth: 100,domains: [],arr: 0,onecanvas: 0,checkAll: false,checkedCities: ["上海", "北京"],isIndeterminate: true,isnotcheckall: false,icnspinimages: [],arrcont: [],};},methods: {// 调用摄像头callCamera() {// H5调用电脑摄像头APInavigator.mediaDevices.getUserMedia({video: true,}).then((success) => {this.isnotbtn = true;// 摄像头开启成功this.$refs["video"].srcObject = success;// 实时拍照效果this.$refs["video"].play();}).catch((error) => {this.$message.error("摄像头开启失败，请检查摄像头是否可用！或者打开摄影头");console.error("摄像头开启失败，请检查摄像头是否可用！");});},// 拍照photograph() {this.isnotcheckall = true;this.arr++;this.onecanvas = this.onecanvas + this.arr;this.domains.push(this.onecanvas);let dataimage = this.domains[this.domains.length - 1];this.$nextTick(() => {this.$refs[dataimage][0].getContext("2d").drawImage(this.$refs["video"],0,0,this.imagheight,this.imagwidth);this.icnspinimages.push(this.$refs[dataimage][0].toDataURL("image/jpeg", 0.7));});},// 关闭摄像头closeCamera() {if (!this.$refs["video"].srcObject) {this.dialogCamera = false;return;}let stream = this.$refs["video"].srcObject;let tracks = stream.getTracks();tracks.forEach((track) => {track.stop();});this.$refs["video"].srcObject = null;this.isnotbtn = false;this.domains = [];this.isnotcheckall = false;this.arrcont = [];},handleCheckAllChange(val) {this.checkedCities = val ? this.domains : [];this.isIndeterminate = false;},handleCheckedCitiesChange(value) {let checkedCount = value.length;this.checkAll = checkedCount === this.domains.length;this.isIndeterminate =checkedCount > 0 && checkedCount < this.domains.length;},// 下载cicnspin() {this.dialogCamera = false;var blogTitle = "图片压缩包"; //图片压缩包名称var zip = new JSZip();var imgs = zip.folder(blogTitle);var baseList = []; //需要压缩图片的路径var imgNameList = []; //单张图片名称var arr = [];let that = this;for (let i = 0; i < this.icnspinimages.length; i++) {imgNameList.push(i);let code = "";code ="data:image/svg+xml;base64," +window.btoa(unescape(encodeURIComponent(this.icnspinimages[i])));arr.push(code);let image = new Image();image.src ="data:image/svg+xml;base64," +window.btoa(unescape(encodeURIComponent(this.icnspinimages[i]))); //给图片对象写入base64编码的svg流var canvas = document.createElement("canvas"); //准备空画布canvas.width = 200;canvas.height = 200;var context = canvas.getContext("2d"); //取得画布的2d绘图上下文context.drawImage(image, 0, 0, 100, 100);let url = this.icnspinimages[i]; // 得到图片的base64编码数据canvas.toDataURL("image/png");baseList.push(url.substring(22)); // 去掉baif (baseList.length === arr.length && baseList.length > 0) {for (let k = 0; k < baseList.length; k++) {imgs.file(k + ".png", baseList[k], {//设置单张图片名称base64: true,});}zip.generateAsync({type: "blob",}).then(function (content) {that.$nextTick(() => {that.arrcont.push(content);if (i == that.icnspinimages.length - 1) {// 调用 FileSaver.jsFileSaver.saveAs(content, blogTitle + ".zip");}});});}image.src = arr[i];that.arrcont = [];}},},
};
</script>
<style scoped>
.imagbtn {display: flex;align-content: center;justify-content: start;
}
.querybtn {/* width: 50px; */height: 50px;margin: auto 0;border-radius: 15px;/* font-size:30px; */
}
.images {width: 640px;height: 480px;
}
.canvasimages {display: flex;
}
.iconbtn {margin: auto 20px;height: 50px;
}
.icnspin {transform: rotate(180deg);
}
.canvas-images {display: flex;flex-wrap: wrap;width: 100%;
}
</style>

vue 打开摄像头保存图片相关推荐

摄像头上传文件服务器失败,vue打开摄像头拍照并上传至服务器
getCompetence() { var _this = this this.thisCancas = document.getElementById('canvasCamera') this.th ...
AI 质检学习报告——实践篇——第一步：python利用OpenCV打开摄像头并截图
写在前边想要做一个AI质检的项目,一点一点来,首先:python利用OpenCV打开摄像头并拍照. 效果设摄像头像素不咋地,实际的产品肯定不会是这个像素,必须安排一个专业的. 实现代码 impor ...
Python+OpenCV教程3：打开摄像头
Python+OpenCV教程3:打开摄像头学习打开摄像头捕获照片.播放本地视频.录制视频等. 目标: 打开摄像头并捕获照片播放本地视频,录制视频 OpenCV函数:cv2.VideoCaptur ...
打开摄像头java程序_在Windows下使用java语言打开摄像头【JMF版】
由于需要做一个自动拍照系统,所以在网上学习了使用java打开摄像头,很多人推荐javaCV,但是我不小心使用了JFM,所以先这样吧~~ 在oracle网站下载window平台的JMF,如下图从图中I ...
buildroot+qt+qcamrea+opencv打开摄像头进行拍照录像保存功能
相关参考如何用FFmpeg API采集摄像头视频和麦克风音频,并实现录制文件的功能_爱写代码的自由人-CSDN博客_ffmpeg 摄像头红胖子(红模仿)的博文大全:开发技术集合(包含Qt实用技术. ...
C#打开摄像头后获取图片，调用face_recognition进行人脸识别
运行效果如截图:左边和保存的图片做对比,打印相似度,部分打印内容为python中的打印输出,可以用来做结果判断.右边打开摄像头后,可以单张图片进行人脸识别,或者一直截图镜头中的图片进行比对.期中pyt ...
【前端vue——系列6】vue连接摄像头并实现摄像头暂停，计时，截图到本地等功能
系列文章总结 [前端vue--系列1]vue的路由 [前端vue--系列2]vue中的data是函数而不是对象与computed的实现原理 [前端vue--系列3]vue框架的优缺点:vue实现双向绑 ...
OpenCV 错误：无法打开摄像头（打开摄像头卡机）
一开始的情况: 摄像头卡死了,无法打开. 错误原因:摄像头没有设置每帧的时间间隔. 设置读取帧的时间,必须要加入以下内容: # q键退出(设置读帧间隔时间)cv2.waitKey(1) # 摄像头每帧 ...
python opencv打开摄像头
opencv打开摄像头 import cv2 cap = cv2.VideoCapture(0) while True:ret, frame = cap.read()frame = cv2.flip( ...

vue 打开摄像头保存图片

vue 打开摄像头保存图片相关推荐

最新文章

热门文章