通过Canvas获得视频某一帧

server/2024/12/23 23:08:39/

        原生js的video标签并没有直接获得某一个时间视频内容的功能,但我们可以结合画布canvas来提取视频内容。这样也能用于获得视频封面等等功能

        

<template><div><!-- 视频文件上传输入框 --><video ref="videoEle" src="视频链接" @canplay="getVideoThumbnail" :style="{'display':'none'}"></video><!-- 显示视频封面 --><img v-if="thumbnailUrl" :src="thumbnailUrl" alt="Video Thumbnail" class="video-cover-img" /></div>
</template><script setup>
import { ref } from 'vue';const thumbnailUrl = ref(null);
const videoEle = ref(null)
const getVideoThumbnail = () => {// 获取视频元素const video = videoEle.value// 设置到视频的1秒时获取封面图video.currentTime = 0.1; // 创造画布元素 获取2dconst canvas = document.createElement('canvas');const context = canvas.getContext('2d');// 设置画布和视频的宽高英语canvas.width = video.videoWidthcanvas.height = video.videoHeight// 绘制视频的当前帧context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); // 获取图片的base64编码const thumbnail = canvas.toDataURL('image/png'); // 获取图片的base64编码// 赋值给字符变量thumbnailUrl.value = thumbnail
};
</script><style scoped>
.video-cover-img {width: 300rem;height: auto;
}
</style>


http://www.ppmy.cn/server/152602.html

相关文章

基于koa服务端脚手架搭建(文件加载器) --【elpis全栈项目笔记】

基于koa服务端脚手架(文件加载器) --【elpis-core】 前言&#xff1a; elpis-core 是一个项目文件加载器。基于一定的约定&#xff0c;将功能不同的代码分类放置到不同的目录下管理。适用于项目代码规范化、减少维护成本、沟通成本&#xff0c;易于扩展。&#xff08;简易版的 …

PHP医院安全(不良)事件管理系统源码,通过运用RCA分析工具,借助柏拉图、鱼骨图等分析工具,分析问题产生的根本原因

医院安全&#xff08;不良&#xff09;事件管理系统采用无责的、自愿的填报不良事件方式&#xff0c;有效地减轻医护人员的思想压力&#xff0c;实现以事件为主要对象&#xff0c;可以自动、及时、实际地反应医院的安全、不良、近失事件的情况&#xff0c;更好地掌握不良事件的…

彭绍亮教授课题组在人工智能图像分析算法用于从肺癌组织病理图像中预测STAS取得重要进展|文献分享·24-12-22

小罗碎碎念 近日&#xff0c;湖南大学信息科学与工程学院彭绍亮教授课题组与中南大学湘雅二医院胸外科、病理科合作&#xff0c;联合在Nature 子刊npj Precision Oncology发表了题为Feature-interactive Siamese graph encoder-based image analysis to predict STAS from his…

使用 Elasticsearch 查询和数据同步的实现方法

在开发过程中&#xff0c;将数据从数据库同步到 Elasticsearch (ES) 是常见的需求之一。本文将重点介绍如何通过 Python 脚本将数据库中的数据插入或更新到 Elasticsearch&#xff0c;并基于多字段的唯一性来判断是否执行插入或更新操作。此外&#xff0c;我们还将深入探讨如何…

【图形渲染】【Unity Shader】【Nvidia CG】有用的参考资料链接

【背景】 学Shader和学其他任何IT技能一样&#xff0c;需要备有合适的查阅资料的池子&#xff0c;本文就将这些池子一站式备齐给到大家。 【Unity Shader相关学习参考文档链接】 Unity Shader官方文档&#xff1a; http://docs.unity3d.com/Manual/SL-Reference.html 官方…

【软件工程】第一章·软件工程概述

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;软件开发必练内功_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前…

FFmpeg 框架简介和文件解复用

文章目录 ffmpeg框架简介libavformat库libavcodec库libavdevice库 复用&#xff08;muxers&#xff09;和解复用&#xff08;demuxers&#xff09;容器格式FLVScript Tag Data结构&#xff08;脚本类型、帧类型&#xff09;Audio Tag Data结构&#xff08;音频Tag&#xff09;V…

第三章线性判别函数(二)

文章目录 一、基于梯度的方法二、均方误差最小算法三、支持向量机 (SVM) 一、基于梯度的方法 梯度概念 设函数 f ( Y ) f(Y) f(Y) 是向量 Y [ y 1 , y 2 , … , y n ] T Y [y_1, y_2, \dots, y_n]^T Y[y1​,y2​,…,yn​]T 的函数&#xff0c;则 f ( Y ) f(Y) f(Y) 的梯…