1. 需求描述

在视频中选定部分区域，然后将左上角坐标百分比和选定区域宽高所占百分比传给后端

2. 实现思路

播放 flv 格式视频
点击“截取”按钮，将视频当前画面截取为一张图片并回显图片，
使用 Cropper 插件截取图片部分区域（可以获取到截取图片左上角点坐标和截取部分的宽高）

3. 效果图展示

4. 代码

<!-- 标定识别区域 -->
<template><el-dialogtitle="标定识别区域":visible.sync="dialogVisible"width="50%"@close="closeHandler"append-to-body:close-on-click-modal="false"><videov-show="!imgSrc.length"id="videoElement"class="video-component"ref="videoElement"controlsmuted>不支持</video><div v-if="!!imgSrc.length" class="imgBox"><img id="image" :src="imgSrc" alt="" /></div><div class="btns"><el-button :disabled="!!imgSrc.length" type="primary" size="mini" @click="interceptHandler">截图</el-button><el-button :disabled="!imgSrc.length" type="primary" size="mini" @click="imgSrc = ''">重新截图</el-button><el-button :disabled="!imgSrc.length" type="primary" size="mini" @click="sureHandler">确定</el-button></div></el-dialog>
</template><script>
import flvjs from 'flv.js' // 用来处理 flv 格式视频
import html2canvas from 'html2canvas' // 用来截取视频当前画面为图片
import Cropper from 'cropperjs' // 截取图片部分区域工具
import 'cropperjs/dist/cropper.css' // 截取图片部分区域工具样式
import { updateRectf } from '@/api/video-intelligent-analysis.js' // 给后端传参接口export default {name: 'SignAreaDialog',components: {},data() {return {dialogVisible: false,imgSrc: '', // 图片地址screenshotInfo: {// 裁剪信息x: 0, // 左上角点x轴坐标y: 0, // 左上角点y轴坐标width: 0, // 图片截取部分宽height: 0 // 图片截取部分高},rowData: {}, // 给后端接口传参时用到其中参数pRowData: {} // 给后端接口传参时用到其中参数}},computed: {},watch: {imgSrc: {handler(val) {let _this = thissetTimeout(() => {if (!val) return/**** 【3】有图片 - 图片部分设定裁剪框 - 使用Cropper工具截取图片 ****/const image = document.getElementById('image')const cropper = new Cropper(image, {// aspectRatio: 839 / 473,// autoCropArea: 1, // 设置裁剪区域占图片的大小 值为 0-1 默认 0.8 表示 80%的区域// viewMode: 3, // 视图控制： 0 无限制；1 限制裁剪框不能超出图片的范围；2 限制裁剪框不能超出图片的范围 且图片填充模式为 cover 最长边填充；3 限制裁剪框不能超出图片的范围 且图片填充模式为 contain 最短边填充scalable: false, // 是否可以缩放图片（可以改变长宽） 默认truezoomable: false, // 是否可以缩放图片（改变焦距） 默认truezoomOnWheel: false, // 是否可以通过鼠标滚轮缩放图片 默认truecrop(event) {Object.keys(_this.screenshotInfo).forEach((key) => {// 获取截取部分信息（event.detail中有左上角坐标、宽、高等属性）_this.screenshotInfo[key] = event.detail[key] < 0 ? 0 : event.detail[key]})// _this.screenshotInfo = event.detail}})}, 50)},deep: true,immediate: true}},mounted() {},created() {},methods: {open(type, rowData, pRowData, videoUrl) {this.rowData = rowDatathis.pRowData = pRowData// 用 setTimeout 延迟一下，否则获取不到 domsetTimeout(() => {/**** 【1】播放 flv 格式视频 ****/if (flvjs.isSupported()) {var videoElement = document.getElementById('videoElement')var flvPlayer = flvjs.createPlayer({type: 'flv',isLive: true,// url: 'ws://192.168.11.169:8866/live?url=D:/xgplayer-demo-720p.flv' // flv 视频地址url: videoUrl // flv 视频地址})flvPlayer.attachMediaElement(videoElement) // 获取不到 dom 的话这里会报错，使用延时器延时一下就好了flvPlayer.load()flvPlayer.play()}}, 50)this.dialogVisible = true},/**** 【2】点击“截取”按钮，将视频当前画面截取为一张图片 并 显示出来 ****/interceptHandler(event, ownerInstance) {html2canvas(document.getElementById('videoElement'), {backgroundColor: null,useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题}).then((canvas) => {let url = canvas.toDataURL('image/png')this.imgSrc = url})},sureHandler() {const container = document.querySelector('.cropper-container')const containerWidth = container.offsetWidthconst containerHeight = container.offsetHeightlet params = {sfbh: this.pRowData.id,znfxbh: this.rowData.znfxbh,// *1 是为了确保是数字之间进行运算，避免运算结果为 NANrectfX: (((this.screenshotInfo.x * 1) / containerWidth) * 1).toFixed(7) * 1, // 识别区域 X 轴位置 百分比rectfY: (((this.screenshotInfo.y * 1) / containerHeight) * 1).toFixed(7) * 1, // 识别区域 Y 轴位置 百分比rectfW: (((this.screenshotInfo.width * 1) / containerWidth) * 1).toFixed(7) * 1, // 识别区域宽度百分比rectfH: (((this.screenshotInfo.height * 1) / containerHeight) * 1).toFixed(7) * 1 // 识别区域高度百分比}for (let key in params) {if (params[key] > 1) params[key] = 1}// returnupdateRectf(params).then((res) => {this.$common.CheckCode(res, '标定成功', () => {this.dialogVisible = falsethis.$emit('update')})})},closeHandler() {this.imgSrc = ''document.getElementById('videoElement').pause() // 暂停视频播放for (let key in this.screenshotInfo) {this.screenshotInfo[key] = 0}}}
}
</script><style lang='scss' scoped>
::v-deep .el-dialog__body {// display: flex;// justify-content: center;padding: 20px !important;
}
#videoElement {width: 100%;
}
// ::v-deep .cropper-bg {//   width: 100% !important;
// }.btns {margin-top: 10px;text-align: right;
}
</style>

cropperjs 参数配置文档
cropperjs npm官方地址

在视频中选定/截取部分区域画面，然后将左上角坐标百分比和选定区域宽高所占百分比传给后端相关推荐

antd 中 Upload 上传图片宽高限制以及上传文件的格式限制
一.上传图片的宽高限制在组件Upload中有一个beforeUpload的API,是文件上传之前的钩子函数,我们需要在这个API中做限制 beforeUpload: file => {this ...
批量剪辑，截取视频中某一帧画面保存为图片
平时刷视频的时候看到好看的画面就想截图保存,那么如何批量提取视频中的某一帧画面呢?不知道怎么操作的朋友走过路过不要错过,小编分享一个方法演示具体的操作步骤,一起来看看. 运行[媒体梦工厂]这款软件中有 ...
python一帧一帧读取视频_用Python从视频中提取每一帧的图片
大家应该都有这样的情况:在看到某些视频的画面时感觉美如画,想截取下来却又烦于截图的繁琐,现在我就教大家使用Python提取视频中每一帧的画面,让大家不错过每一个精彩的瞬间! •语言:Python •所 ...
同一个按钮点击多次不同效果_教大家如何用狸窝视频转换器一次性截取多次片段并保存起来...
运行狸窝视频转换器软件,首先点击"添加视频",多次添加同一个视频文件,小编想截取同一个视频的三个片段,这里就添加了三次同一个视频.选中第一个视频,点击"视频编辑" ...
dataV中重置边框组件的宽高的initWH方法的使用
先说下我遇到的情况,项目就是很经典的后台管理系统,菜单在左侧,并且可以收缩,首页是个可视化页面,用到了dataV边框组件,但是收缩菜单的时候问题出现了,边框无法自适应父容器,下面是效果图: 可以很明显 ...
Android 获取视频宽高
关于获取视频宽高最近一次需求是上传视频,并根据上传视频的宽高展示横屏或者竖屏的video控件,最初是用MediaMetadataRetriever类来获取视频的宽高 // An highlighte ...
视频编辑利器，截取视频中指定区域并实现静音操作
视频编辑中的常见需求之一就是截取视频中的指定区域,使用moviepy这个库可以轻松地实现这个目的. 需要确定我们要截取的视频区间,然后使用moviepy中的函数来实现截取操作.同时需要实现静音操作,可 ...
php 提取视频中的声音,如何提取视频中的声音，并把画面改成文字内容
现在越来越多的人会在网络平台分享小视频,看到影视剧中的精彩片段就可以截取下载分享到视频平台,当然还可以对下载的视频进行二次创作再分享.小编之前就看到一个小视频效果挺好,视频播放的声音是影视剧某片段的原 ...
【网课视频提取ppt】【原创好用】如何自动提取视频中的PPT画面？网课视频提取ppt教程
本文介绍了一款名为"Gleamoe Peanut 2023"的软件,可用于自动从网课视频中提取PPT画面. 软件手册:https://gleamore.feishu.cn/docx ...

在视频中选定/截取部分区域画面，然后将左上角坐标百分比和选定区域宽高所占百分比传给后端

在视频中截取部分区域画面

1. 需求描述

2. 实现思路

3. 效果图展示

4. 代码

在视频中选定/截取部分区域画面，然后将左上角坐标百分比和选定区域宽高所占百分比传给后端相关推荐

最新文章

热门文章