当前位置: 首页 > news >正文

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有本地上传替换部分&#xff0c;可以不看 原理&#xff1a;通过video标签对视频进行加载&#xff0c;随后使用canvas对截取的视频帧生成需要的图片 <template> <el-row :gutter"18" class"preview-video"><h4>视频预览<span&…...

STM32智能家居系统教程

目录 引言环境准备智能家居系统基础代码实现&#xff1a;实现智能家居系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;家居智能化管理问题解决方案与优化收尾与总结 1. 引言 智能家居系统通过STM32嵌入…...

uniapp 开发 App 对接官方更新功能

插件地址&#xff1a;升级中心 uni-upgrade-center - App - DCloud 插件市场 首先创建一个 uni-admin 项目&#xff0c;选择你要部署的云开发服务商&#xff1a; 然后会自动下载模板&#xff0c;部署云数据库、云函数 第二步&#xff1a;将新创建的 uni-admin 项目托管到…...

【PostgreSQL】PostgreSQL 教程

博主介绍&#xff1a;✌全网粉丝20W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

Qt类 | QLabel类详解

文章目录 一、QLabel类介绍二、Properties&#xff08;属性&#xff09;三、Public Functions&#xff08;公共函数&#xff09;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实现了一个提示工具&#xff0c;本文介绍如何利用CSS3实现提示工具以渐入的方式呈现&#xff0c;以渐出的方式消失。 CSS3主要可以通过两个样式来实现动画效果&#xff1a;animation和transition。 其中&#xff0c;animation需要自己定义一组关键帧从而实现…...

JVM 垃圾回收算法

一、如何确定为垃圾 引用计数法 在对象中添加一个引用计数器&#xff0c;每当有一个地方引用它时&#xff0c;计数器值就加一&#xff1b;当引用失效时&#xff0c;计数器值就减一&#xff0c;当引用为0&#xff0c;则认为对象可被回收。引用计数不能解决循环引用的问题 根可…...

吴恩达大模型系列课程《Prompt Compression and Query Optimization》中文学习打开方式

Prompt Compression and Query Optimization GPT-4o详细中文注释的Colab观看视频1 浏览器下载插件2 打开官方视频 GPT-4o详细中文注释的Colab 中文注释链接&#xff1a;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主要功能有&#xff1a;2)ServletRequest类的常用方法: 2.HttpServletReques…...

用C++、Python、Rust编写的有安全问题的B树

程序猿们都知道&#xff0c;B树&#xff08;B-tree&#xff09;是一种平衡的多路查找树&#xff0c;主要用于存储和检索大量数据&#xff0c;常用于数据库和文件系统中。 B树的特性包括&#xff1a; 每个节点可以包含多个关键字&#xff08;键值&#xff09;和对应的孩子指针…...

问题:当直齿圆柱齿轮的齿数少于?时,可采用 变位的办法来避免根切。 #学习方法#其他

问题&#xff1a;当直齿圆柱齿轮的齿数少于?时&#xff0c;可采用     变位的办法来避免根切。 参考答案如图所示...

请你谈谈:spring bean的生命周期 - 阶段2:Bean实例化阶段

在Spring框架中&#xff0c;Bean的实例化是Bean生命周期中的一个重要阶段。这个过程包括两个关键的子阶段&#xff1a;Bean实例化前阶段和Bean实例化阶段本身。 BeanFactoryPostProcessor&#xff1a;BeanFactoryPostProcessor是容器启动阶段Spring提供的一个扩展点&#xff0…...

【开发指南】HTML和JS编写多用户VR应用程序的框架

1.概述 Networked-Aframe 的工作原理是将实体及其组件同步到连接的用户。要连接到房间&#xff0c;您需要将networked-scene组件添加到a-scene元素。对于要同步的实体&#xff0c;请向其添加networked组件。默认情况下&#xff0c;position和rotation组件是同步的&#xff0c;…...

C语言第6天作业 7月17日

删除字符串中的空格字符 从终端输入一个字符串&#xff0c;要求删除字符串中的空格字符。提示&#xff1a;可以新建一个辅助数组 #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的使用 --(八)

&#x1f48c; 所属专栏&#xff1a;【BES2500x系列】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f49…...

vue视频、图片自动轮播并伴随进度条

废话不多说直接上代 多余没用的部分自己看着删除 <template><div class"showImg"><el-carousel ref"carousel" trigger"hover" :autoplay"false" class"dimControl" :height"${(currenInnerWith*0.37…...

Android Studio环境安装指南

一、安装前注意事项&#xff1a; 安装android studio之前&#xff0c;请先检查下操作系统中的用户名(C盘->用户或user)下是否含有中文&#xff0c;如果含有中文&#xff0c;请新建一个用户&#xff08;必须全部英文&#xff09;&#xff0c;JDK的安装和配置也请重新安装和配…...

CentOS 7 初始化环境配置详细

推荐使用xshell远程连接&#xff0c;如链接不上 请查看 CentOS 7 网络配置 修改主机名 hostname hostnamectl set-hostname xxx bash 关闭 SElinux 重启之后生效 配置yum源&#xff08;阿里&#xff09; 先备份CentOS-Base.repo&#xff0c;然后再下载 mv /etc/yum.repos…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...