前端如何对视频进行截屏加标注

最经我也是收到了这样一个需求，对监控进行截图加标注的需求，

我将自己的方法写在这里，希望能帮助各位小伙伴

1.首先监控类似于正在播放的视频，视频播放的帧太快了，所以一般直接使用插件进行截图会出现白屏或者，黑屏的情况，

2.所以只能是先对视频进行截图，然后再去加标注，或者使用canvas，绘画，来实现，但是如果标注方法过多，自己写不太现实，所以标注环节，我们使用插件，来完成，

1.先截屏，上代码

 <template><div><div><div><video id="myPlayer1" width="70%" height="70%" controls><source src="../assets/video/movie.mp4" type="video/mp4" /></video></div><div><el-button @click="getCurPic">截屏</el-button></div></div><!-- //绘制的地方 --><el-dialog :fullscreen="true" :visible.sync="cropperModel" width="80%"><div class="cur_canvas_container"><canvasid="myCanvas":width="canvasWidth":height="canvasHeight"class="cur_canvas"></canvas><div><el-button @click="screenShot">批注</el-button></div></div></el-dialog><div><canvas id="loadingbar" style="width:200px; height:100px"></canvas></div></div>
</template>

  methods: {// 第一步截图getCurPic() {// 裁剪图片this.cropperModel = true;this.$nextTick(() => {//需要使用nextTick 不然DOM渲染过快导致初次无法进行渲染-或者使用SetTomeOut(()=>{},200)this.photograph();});},photograph() {// 把当前视频帧内容渲染到canvas上let img = document.getElementById("myPlayer1"); //获取标签let width = img.clientWidth; //获取屏幕尺寸let height = img.clientHeight;this.canvasWidth = width;this.canvasHeight = height;//getContext方法返回一个用于在画布上绘图的环境。let canvas = document.getElementById("myCanvas");// canvas.setAttribute("crossOrigin",'Anonymous')let ctx = canvas.getContext("2d");this.$nextTick(() => {ctx.drawImage(img, 0, 0, width, height); //在画布上定位图像//加标注this.screenShot();});},}

2.加标注

下载插件

yarn add js-web-screen-shot# ornpm install js-web-screen-shot --save

下载完看看依赖包，是否有它

import ScreenShort from "js-web-screen-shot";

    screenShot() {const screenShotHandler = new ScreenShort({enableWebRtc: false, //是否显示选项框level: 99999, //层级级别completeCallback: this.callback,//标注完成的回调closeCallback: this.closeFn,//取消标注的方法//  downLoadCallback: this.closeFn,  自己需要改的插件源码});},

标注完成，上传至后端

    <!-- 模态框canvas --><MaskModal :visible="isMask"><div class="teacherDetails" v-show="flage"><canvasid="myCanvas":width="canvasWidth":height="canvasHeight"class="cur_canvas"></canvas></div><div class="teacherDetails" v-show="!flage"><div class="img_header"><div>截图预览</div><div><iclass="el-icon-close"size="medium "@click="isMask = false;flage = true;"></i></div></div><div class="Pictureannotation"><canvas id="loadingbar"></canvas></div><div class="photonote"><div>备注：<inputtype="text"class="annotation"v-model="remarks"placeholder="请添加图片备注(最多二十字)"maxlength="20"/></div><div><el-button type="primary" @click="ScreenshotRemarksComplete">完成</el-button></div></div></div><!-- <div></div> --></MaskModal>

    callback(base64data) {var image = new Image();image.src = base64data;image.onload = () => {this.convertImageToCanvas(image);this.flage = false;};},convertImageToCanvas(image) {var canvas = document.getElementById("loadingbar");canvas.width = image.width;canvas.height = image.height;canvas.getContext("2d").drawImage(image, 0, 0);return canvas;},

    ScreenshotRemarksComplete() {this.isMask = false;this.flage = true;if (this.network) {var canvas = document.getElementById("loadingbar");var url = canvas.toDataURL("image/jpeg");let fil = this.base64toFile(url, "filename");let formData = new FormData();formData.append("img", fil);const PictureInformation = {desc: this.remarks,imgHolder: JSON.parse(this.userData).userName,roomName: this.videoRoomName,};//调接口RoomPictureUpload(PictureInformation, formData).then((res) => {this.$message({type: "success",message: "截图成功",});this.remarks = "";});} else {this.UploadFailed = true;// const TIME_COUNT = 3;if (!this.timer) {// this.countDown = TIME_COUNT;this.timer = setInterval(() => {if (this.countDown > 1 && this.countDown <= 3) {//限制倒计时区间this.countDown--;} else {clearInterval(this.timer); //删除定时器this.timer = null;this.UploadFailed = false;this.countDown = 3;}}, 1000);}}},base64toFile(base, filename) {var arr = base.split(",");var mime = arr[0].match(/:(.*?);/)[1];var suffix = mime.split("/")[1];var bstr = atob(arr[1]);var n = bstr.length;var u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}//转换成file对象return new File([u8arr], `${filename}.${suffix}`, { type: mime });},

前端如何对视频进行截屏加标注相关推荐

记一次前端性能优化——vue-cli4优化首屏加载
记一次前端性能优化--vue-cli4优化首屏加载一.前言 vue.js是一款时下非常流行的前端框架,很多公司,例如阿里.腾讯.字节等都在积极应用vue作为前端开发框架.这就说明,熟练使用vue开发 ...
用Python编写录屏程序将播放的视频用截屏方法转换为多帧图像编辑后保存为GIF格式动图文件
有时编写游戏后发博文,为使读者有一个直观的游戏效果,会把游戏运行动画转换GIF格式动图发到博文中.本文介绍如何用python PIL库ImageGrab.grab()函数截屏,编写录屏程序,将视频转换 ...
简易的视频随机截屏程序
由于笔者在b站投稿MMD视频时,经常会遇到不知道用什么封面的情况,而b站的随机截屏有时候比我人工截的还好,但有时候也并没好看的.所以我便想自己写一个视频随机截屏的程序.截的多了,总归会有好看的. 然后 ...
Android 真正实现对网络视频进行截屏
最近因为项目需要,要实现对网络视频任意帧进行截屏的功能,本着"拿来主义"的精神,开始在网上进行搜索,并进行测试,然而事实再一次告诉我,度娘不是万能的, 下面给出一个真实有效的方法, ...
android图片视频图片封装,Android中的图片截屏和视频截屏
各位看官老爷先看这里!!!!! 这篇文章的截屏有前提条件的: ①.代码中的截屏均是以全屏模式下,即图片再展示的时候是全屏,视频在播放的时候是全屏. ②.视频的截屏并不能算的上是真正意义上的截屏,而是抽 ...
截屏时不显示鼠标的位置_东东教大家如何使用（截屏）的方法，许多朋友经常问这个怎么弄？...
作者:图文设计师东东东东的讲课的时候,不管是图文教程,还是视频课程,经常会用到截屏保存图片.视频里截屏讲重点,那么需要朋友粉丝会问到这个是怎么弄的,求解?其实非常的简单,今天就告诉大家几种使用截屏的 ...
截屏工具Snipaste使用指南
Snipaste 是一个简单但强大的贴图工具,同时也可以执行截屏.标注等功能. 开始截图快捷键(默认为 F1) 鼠标左键单击托盘图标何为一次成功的截图保存到剪贴板 ( Ctrl + C / E ...
js截屏 video_canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频在使用canvas制作这个截图功能时,首先必须保证页面上 ...
c语言如何编写截屏程序_截屏视频：为Optimus Mini三键盘编写托管的.NET插件
c语言如何编写截屏程序 Here's a screencast demoing writing Managed .NET Plugins for the Optimus Mini Three Keyb ...

前端如何对视频进行截屏加标注

最经我也是收到了这样一个需求，对监控进行截图加标注的需求，

我将自己的方法写在这里，希望能帮助各位小伙伴

1.先截屏，上代码

前端如何对视频进行截屏加标注相关推荐

最新文章

热门文章