vue、js截取视频任意一帧图片

html有本地上传替换部分,可以不看
原理:通过video标签对视频进行加载,随后使用canvas对截取的视频帧生成需要的图片
<template>
<el-row :gutter="18" class="preview-video"><h4>视频预览<span>系统默认选中第一帧为封面</span></h4><div class="screenshot-box"><video:class="`screenshot-video screenshot-video${id}`":src="videoUrl"controlscrossorigin="anonymous"/></div><div class="preview-btn"><el-button size="small" type="primary" class="set-btn" @click="setWidthHeight">截取封面</el-button><el-uploadaction="":key="componentImgKey":on-change="handleAddLocalImage"accept=".jpg,.png,.jpeg,.JPG,.PNG,.JPEG":auto-upload="false":show-file-list="false":limit="1":multiple="false"ref="uploads"><el-button @click.native="handleAddLocalImageBefore" size="small" type="primary">本地上传</el-button></el-upload></div><canvas:class="`myCanvas${id}`"class="myCanvas":width="isWidth":height="isHeight"/></el-row></template>
<script>
export default {data(){return {videoUrl:"",id: 0,isWidth: 320,isHeight: 180,imgSrc:"",},methods:{setWidthHeight() {if (true) {this.$nextTick((_) => {var v = document.querySelector(`.screenshot-video${this.id}`);this.isWidth = v.offsetWidth;this.isHeight = v.offsetHeight;this.cutPicture();});}},//截取当前帧的图片cutPicture() {if (process.browser) {this.$nextTick((_) => {var v = document.querySelector(`.screenshot-video${this.id}`);let canvas = document.querySelector(`.myCanvas${this.id}`);var ctx = canvas.getContext("2d");ctx.drawImage(v, 0, 0, this.isWidth, this.isHeight);var oGrayImg = canvas.toDataURL("image/png");this.imgSrc = oGrayImg;this.file_ext="png"let size=this.imageSize(oGrayImg)/1024/1024if(size>2){this.$message.error("图片大小不能超过2MB!")return}});}},imageSize(base64Str) {const indexBase64 = base64Str.indexOf('base64,');if (indexBase64 < 0) return -1;const str = base64Str.substr(indexBase64 + 6);return (str.length * 0.75).toFixed(2);},}
}
</script>相关文章:
vue、js截取视频任意一帧图片
html有本地上传替换部分,可以不看 原理:通过video标签对视频进行加载,随后使用canvas对截取的视频帧生成需要的图片 <template> <el-row :gutter"18" class"preview-video"><h4>视频预览<span&…...
STM32智能家居系统教程
目录 引言环境准备智能家居系统基础代码实现:实现智能家居系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景:家居智能化管理问题解决方案与优化收尾与总结 1. 引言 智能家居系统通过STM32嵌入…...
uniapp 开发 App 对接官方更新功能
插件地址:升级中心 uni-upgrade-center - App - DCloud 插件市场 首先创建一个 uni-admin 项目,选择你要部署的云开发服务商: 然后会自动下载模板,部署云数据库、云函数 第二步:将新创建的 uni-admin 项目托管到…...
【PostgreSQL】PostgreSQL 教程
博主介绍:✌全网粉丝20W,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...
Qt类 | QLabel类详解
文章目录 一、QLabel类介绍二、Properties(属性)三、Public Functions(公共函数)1.构造函数2.alignment与setAlignment函数 -- 标签内容的对齐方式3.buddy与setBuddy函数 -- QLabel关联的伙伴控件4.hasScaledContents与setScaledC…...
深入剖析 Android 开源库 EventBus 的源码详解
文章目录 前言一、EventBus 简介EventBus 三要素EventBus 线程模型 二、EventBus 使用1.添加依赖2.EventBus 基本使用2.1 定义事件类2.2 注册 EventBus2.3 EventBus 发起通知 三、EventBus 源码详解1.Subscribe 注解2.注册事件订阅方法2.1 EventBus 实例2.2 EventBus 注册2.2.1…...
End-to-End Object Detection with Transformers【目标检测-方法详细解读】
摘要 我们提出了一种新的方法,将目标检测视为一个直接的集合预测问题。我们的方法简化了检测流程,有效地消除了许多手工设计的组件,如非极大值抑制程序或锚生成,这些组件显式编码了我们关于任务的先验知识。新框架的主要成分,称为DEtection TRansformer或DETR,是一个基于…...
CSS3实现提示工具的渐入渐出效果及CSS3动画简介
上一篇文章用CSS3实现了一个提示工具,本文介绍如何利用CSS3实现提示工具以渐入的方式呈现,以渐出的方式消失。 CSS3主要可以通过两个样式来实现动画效果:animation和transition。 其中,animation需要自己定义一组关键帧从而实现…...
JVM 垃圾回收算法
一、如何确定为垃圾 引用计数法 在对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加一;当引用失效时,计数器值就减一,当引用为0,则认为对象可被回收。引用计数不能解决循环引用的问题 根可…...
吴恩达大模型系列课程《Prompt Compression and Query Optimization》中文学习打开方式
Prompt Compression and Query Optimization GPT-4o详细中文注释的Colab观看视频1 浏览器下载插件2 打开官方视频 GPT-4o详细中文注释的Colab 中文注释链接:https://github.com/Czi24/Awesome-MLLM-LLM-Colab/tree/master/Courses/Prompt-Compression-and-Query-Op…...
2.javaWeb_请求和响应的处理(Request,Response)
2.请求和响应的处理 文章目录 2.请求和响应的处理一、动态资源和静态资源javax.servlet(包) 二、Servlet体系1.简介2.HttpServlet3.Servlet生命周期 三、Request对象1.ServletRequest1)ServletRequest主要功能有:2)ServletRequest类的常用方法: 2.HttpServletReques…...
用C++、Python、Rust编写的有安全问题的B树
程序猿们都知道,B树(B-tree)是一种平衡的多路查找树,主要用于存储和检索大量数据,常用于数据库和文件系统中。 B树的特性包括: 每个节点可以包含多个关键字(键值)和对应的孩子指针…...
问题:当直齿圆柱齿轮的齿数少于?时,可采用 变位的办法来避免根切。 #学习方法#其他
问题:当直齿圆柱齿轮的齿数少于?时,可采用 变位的办法来避免根切。 参考答案如图所示...
请你谈谈:spring bean的生命周期 - 阶段2:Bean实例化阶段
在Spring框架中,Bean的实例化是Bean生命周期中的一个重要阶段。这个过程包括两个关键的子阶段:Bean实例化前阶段和Bean实例化阶段本身。 BeanFactoryPostProcessor:BeanFactoryPostProcessor是容器启动阶段Spring提供的一个扩展点࿰…...
【开发指南】HTML和JS编写多用户VR应用程序的框架
1.概述 Networked-Aframe 的工作原理是将实体及其组件同步到连接的用户。要连接到房间,您需要将networked-scene组件添加到a-scene元素。对于要同步的实体,请向其添加networked组件。默认情况下,position和rotation组件是同步的,…...
C语言第6天作业 7月17日
删除字符串中的空格字符 从终端输入一个字符串,要求删除字符串中的空格字符。提示:可以新建一个辅助数组 #include <stdio.h> #include <string.h> int main(int argc, const char *argv[]) {char str[100];char str1[100];gets(str);for(in…...
【BES2500x系列 -- RTX5操作系统】深入探索CMSIS-RTOS RTX -- 配置篇 -- flash的使用 --(八)
💌 所属专栏:【BES2500x系列】 😀 作 者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! Ὁ…...
vue视频、图片自动轮播并伴随进度条
废话不多说直接上代 多余没用的部分自己看着删除 <template><div class"showImg"><el-carousel ref"carousel" trigger"hover" :autoplay"false" class"dimControl" :height"${(currenInnerWith*0.37…...
Android Studio环境安装指南
一、安装前注意事项: 安装android studio之前,请先检查下操作系统中的用户名(C盘->用户或user)下是否含有中文,如果含有中文,请新建一个用户(必须全部英文),JDK的安装和配置也请重新安装和配…...
CentOS 7 初始化环境配置详细
推荐使用xshell远程连接,如链接不上 请查看 CentOS 7 网络配置 修改主机名 hostname hostnamectl set-hostname xxx bash 关闭 SElinux 重启之后生效 配置yum源(阿里) 先备份CentOS-Base.repo,然后再下载 mv /etc/yum.repos…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中,可以通过监听键盘的显示和隐藏事件,动态调整弹窗的位置。关键点在于获取键盘高度,并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798, 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
