【前端】上传视频,截取第一帧图片
使用input上传视频,获得视频的第一帧
参考:JavaScript获取视频的尺寸信息和第一帧图片 - 掘金 (juejin.cn)
html:
<inputbind:this={uploadRef}on:change={handleUpload}accept="video/*"type="file"/>
视频类型校验:
const VIDEO_REG =/^(?:video\/avi|video\/mpeg|video\/mp4|video\/ogg|video\/webm|video\/x-ms-wmv|video\/x-msvideo)$/i;
handleUpload:
- 校验类型
- 获得视频第一帧图片:调用
getVideoImg方法
const handleUpload=(e)=>{const files = e.target.files[0];if(VIDEO_REG.test(files.type)){const videoImg = await getVideoImg(files);}
}
相关方法:getVideoImg。
使用canvas实现:从一个视频文件中提取一帧图像,并将这个图像转换为一个可以在浏览器中使用的URL。
const getVideoImg = async (files: File): Promise<string> => {try {// 使用loadVideo函数加载视频文件,等待加载完成const video: HTMLVideoElement = await loadVideo(files);const canvasElem = document.createElement('canvas');// 设置canvas的宽度和高度与视频的宽度和高度相同canvasElem.width = video.videoWidth;canvasElem.height = video.videoHeight;// 获取canvas的2d渲染上下文,并在canvas上绘制视频的当前帧canvasElem.getContext('2d')?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);const pngFile = await new Promise<string>((resolve, reject) => {// 将canvas的内容导出成一个blob文件canvasElem.toBlob((blob) => {if (blob) {// 成功创建了blob文件,将其转换为File对象,然后创建一个指向这个File对象的URLresolve(URL.createObjectURL(toThumbFile(blob)));} else {// 创建blob文件失败,拒绝Promisereject('');}}, 'image/png');});// 返回Promise的结果,即指向File对象的URLreturn pngFile;} catch (error) {// 如果在上述过程中发生错误,打印错误信息console.error(error);}
};
其中调用了loadVideo:
const loadVideo = (file: File): Promise<HTMLVideoElement> => {return new Promise(function (resolve, reject) {const videoElem = document.createElement('video');const dataUrl = URL.createObjectURL(file);videoElem.onloadeddata = function () {// 当video元素的当前帧的数据可用时,将video元素作为Promise的结果resolve(videoElem);};// 当video元素发生错误时的处理函数videoElem.onerror = function () {reject('video error');};// 设置video元素的preload属性为'auto',这样video元素会预加载数据// 如果不设置这个属性,可能会导致截图为黑色图片的情况videoElem.setAttribute('preload', 'auto');// 设置video元素的src属性为指向File对象的URLvideoElem.src = dataUrl;});
};// 输入的Blob对象,文件名是'video_img.png'
const toThumbFile = (blob) => new File([blob], 'video_img.png');
调用:
videoImg = await getVideoImg(files);
得到的videoImg 可以在<img src={videoImg }/> 中显示。
不用videoImg 后,要使用URL.revokeObjectURL释放:URL.createObjectURL生成的链接以blob:开头。一般来说在 销毁 的生命周期调用。
if (/^blob:/.test(videoImg)) {URL.revokeObjectURL(videoImg);}
相关文章:
【前端】上传视频,截取第一帧图片
使用input上传视频,获得视频的第一帧 参考:JavaScript获取视频的尺寸信息和第一帧图片 - 掘金 (juejin.cn) html: <inputbind:this{uploadRef}on:change{handleUpload}accept"video/*"type"file"/>视频类型校验&a…...
Redis-GEO数据结构的基本用法
GEO就是Geolocation的简写形式,代表地理坐标。Redis在3.2版本中加入了对GEO的支持,允许存储地理坐标信息,帮助我们根据经纬度来检索数据。常见的命令有: GEOADD:添加一个地理空间信息,包含:经度…...
【Linux C | 网络编程】进程池大文件传输的实现详解(三)
上一篇实现了进程池的小文件传输,使用自定义的协议,数据长度数据本身,类似小火车的形式,可以很好的解决TCP“粘包”的问题。 【Linux C | 网络编程】进程池小文件传输的实现详解(二) 当文件的内容大小少于…...
Mac如何通过SSH连接Github
目录 前言 一、实现步骤 1.生成 SSH 密钥对 2.添加 SSH 密钥到 GitHub: 3.配置 SSH 连接 1.更新远程仓库 URL 2.测试 SSH 连接 前言 GitHub 在 2021 年 8 月 13 日停止了对使用密码进行身份验证的支持。因此,你需要使用其他认证方式,如…...
成就巴西休闲游戏如何借助Google谷歌广告投放优势
在探讨巴西休闲游戏如何借助谷歌广告投放优势实现市场扩张的过程中,我们不得不深入分析巴西市场的独特属性、休闲游戏的兴起背景,以及谷歌广告平台在全球范围内的强大影响力。近年来,随着移动游戏市场的快速发展,特别是中轻度休闲…...
利用python检查磁盘空间使用情况
目录 一.前言 二.使用的库介绍 三.代码实现以及解析 3.1导入模块 3.2邮件发送函数 send_email 3.3检查磁盘空间函数 check_and_clean_disk 3.4主程序逻辑 四.致谢 一.前言 在信息技术飞速发展的今天,数据量的激增使得磁盘空间管理成为系统运维中的一项基…...
卷积神经网络(五)---图像增强的方法
前面的部分专注于卷积神经网络的层结构介绍,同时还介绍了到目前为止比较出名的卷积神经网络,接着使用比较复杂的卷积神经网络提高了 MNIST 数据集的准确率。下面将从另外的角度——图像增强的方面入手,提高模型的准确率和泛化能力。 一直以来…...
矩阵常见分解算法及其在SLAM中的应用
文章目录 常见特殊矩阵定义Cholesky分解(正定Hermittian矩阵,分解结果唯一)Cholesky分解应用 SVD分解(将singularvalues排序后分解唯一)SVD 分解的应用(任意矩阵) QR分解(任意矩阵&a…...
【排序】快速排序详解
✨✨欢迎大家来到Celia的博客✨✨ 🎉🎉创作不易,请点赞关注,多多支持哦🎉🎉 所属专栏:排序 个人主页:Celias blog~ 一、快速排序的思想 快速排序的核心思想是: 选定一个…...
贪心算法总结(2)
一、买卖股票的最佳时机 . - 力扣(LeetCode) class Solution { public:int maxProfit(vector<int>& prices) {int miniINT_MAX;int ret0;for(int&price:prices){//遍历的时候,我们随时去更新最小的值,然后让每一位…...
弘景光电:技术实力与创新驱动并进
在光学镜头及摄像模组产品领域,广东弘景光电科技股份有限公司(以下简称“弘景光电”)无疑是一颗耀眼的明星。自成立以来,弘景光电凭借其强大的研发实力、卓越的产品性能、精密的制造工艺以及严格的质量管理体系,在光学…...
2024年7月23日~2024年7月29日周报
目录 一、前言 二、完成情况 2.1 一种具有边缘增强特点的医学图像分割网络 2.2 融合边缘增强注意力机制和 U-Net 网络的医学图像分割 2.3 遇到的困难 三、下周计划 一、前言 上周参加了一些师兄师姐的论文讨论会议,并完成了初稿。 本周继续修改论文࿰…...
M3U8流视频数据爬虫
M3U8流视频数据爬虫 HLS技术介绍 现在大部分视频客户端都采用HTTP Live Streaming(HLS,Apple为了提高流播效率开发的技术),而不是直接播放MP4等视频文件。HLS技术的特点是将流媒体切分为若干【TS片段】(比如几秒一段…...
保护您的数字财富:模块化沙箱在源代码防泄露中的突破
在数字化浪潮中,企业面临着前所未有的数据安全挑战。源代码、商业机密、客户数据……这些宝贵的数字资产一旦泄露,后果不堪设想。SDC沙盒防泄密系统,以其卓越的技术实力和创新的解决方案,为企业提供了一个坚不可摧的安全屏障。 核…...
FFmpeg源码:avio_r8、avio_rl16、avio_rl24、avio_rl32、avio_rl64函数分析
一、引言 AVIOContext是FFmpeg(本文演示用的FFmpeg源码版本为5.0.3)中的字节流上下文结构体,用来管理输入输出数据。打开一个媒体文件的时候,需要先把数据从硬盘读到缓冲区,然后会用到AVIOContext中的如下成员&#x…...
如何使用 API 查看极狐GitLab 镜像仓库中的镜像?
GitLab 是一个全球知名的一体化 DevOps 平台,很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab :https://gitlab.cn/install?channelcontent&utm_sourcecsdn 是 GitLab 在中国的发行版,专门为中国程序员服务。可以一键式部署…...
软件-vscode-plantUML-IDEA
文章目录 vscode基础命令 实操1. vscode实现springboot项目搭建 (包括spring data jpa和sqlLite连接) PlantUMLIDEA下载及安装Eval Reset插件配置修改IDEA创建项目的默认目录IDEA配置gitIDEA翻译插件translationIDEA断点调试IDEA全局搜索快捷键不能使用代…...
ES6语法详解,面试必会,通俗易懂版
目录 Set的基本使用WeakSet 使用Set 和 WeakSet 区别内存泄漏示例:使用普通 Set 保存 DOM 节点如何避免这个内存泄漏MapWeakMap 的使用 Set的基本使用 在ES6之前,我们存储数据的结构主要有两种:数组、对象。 在ES6中新增了另外两种数据结构&a…...
CTFshow--Web--代码审计
目录 web301 web302 web303 web304 web305 web306 web307 web308 web309 web310 web301 开始一个登录框, 下意识sql尝试一下 发现 1 的时候会到一个 checklogin.php 的路径下, 但啥也没有 好吧, 这是要审计代码的 ,下载好源码, 开始审计 看了一下源码 , 应该就是sql…...
Java语言程序设计——篇十(1)
🌿🌿🌿跟随博主脚步,从这里开始→博主主页🌿🌿🌿 接口介绍 接口概述接口定义接口的实现实战演练 👅接口的继承实战演练实战演练 接口的类型常量实战演练 静态方法默认方法解决默认方…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
centos 7 部署awstats 网站访问检测
一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言: 在人工智能快速发展的浪潮中,快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型(LLM)。该模型代表着该领域的重大突破,通过独特方式融合思考与非思考…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
