js截取video视频某一帧为图片

1.代码如下

<template><div class="box"><div class="video-box"><video controls ref="videoRef" preload="true"src="https://qt-minio.ictshop.com.cn:9000/resource-management/2025/01/08/7b96ac9d957c45a7a94b355ca7a89d02.mp4"></video><a-button type="primary" @click="saveCoverImg" :loading="loading">{{ loading ? '截取中': '保存为封面' }}</a-button></div><img :src="coverImg" alt=""></div>
</template>
<script setup>
import { ref, onMounted } from 'vue';const videoRef = ref(null)
const coverImg = ref(null)
const loading = ref(false)function saveCoverImg() {videoRef.value.pause();loading.value = true;const currentTime = videoRef.value.currentTime;createVideo(currentTime)
}function createVideo(currentTime) {const videoElement = document.createElement("video");videoElement.setAttribute("crossorigin", "anonymous"); // 解决跨域问题videoElement.currentTime = currentTimevideoElement.muted = true;videoElement.autoplay = true;videoElement.oncanplay = function () {drawCoverImage(videoElement)}videoElement.src = "https://qt-minio.ictshop.com.cn:9000/resource-management/2025/01/08/7b96ac9d957c45a7a94b355ca7a89d02.mp4";
}function drawCoverImage(vEle) {const c = document.createElement("canvas");const ctx = c.getContext("2d");c.width = vEle.videoWidth;c.height = vEle.videoHeight;ctx.drawImage(vEle, 0, 0, c.width, c.height);const img = c.toDataURL("image/png");coverImg.value = img;loading.value = false;
}</script><style lang="less" scoped>
.box {.video-box {display: flex;align-items: flex-end;video {width: 490px;margin: 10px 10px 0 0;}}img {width: 300px;margin-top: 10px;}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/67732.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++语言的数据库编程

C语言的数据库编程 一、引言 数据库是现代软件应用程序中不可或缺的一部分。随着数据量的不断增长&#xff0c;如何高效地存储、管理和查询数据成为了一个重要的问题。C作为一种高效的编程语言&#xff0c;其在数据库编程中的应用越来越广泛。从嵌入式系统到大型企业级应用&a…

nacos2.3.0 接入pgsql或其他数据库

首先尝试使用官方插件进行扩展&#xff0c;各种报错后放弃&#xff0c;不如自己修改源码吧。 一、官方解决方案 1、nocos 文档地址&#xff1a;Nacos 配置中心简介, Nacos 是什么 | Nacos 官网 2、官方解答&#xff1a;nacos支持postgresql数据库吗 | Nacos 官网 3、源码下载地…

使用 ChatGPT 生成和改进你的论文

文章目录 零、前言一、操作引导二、 生成段落或文章片段三、重写段落四、扩展内容五、生成大纲内容六、提高清晰度和精准度七、解决特定的写作挑战八、感受 零、前言 我是虚竹哥&#xff0c;目标是带十万人玩转ChatGPT。 ChatGPT 是一个非常有用的工具&#xff0c;可以帮助你…

【Elasticsearch 】 聚合分析:聚合概述

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…

pyautogui自动化鼠标键盘操作

pyautogui&#xff0c;用来写自动化脚本&#xff0c;比按键精灵更方便。pyautogui.position()可以获取当前鼠标位置。pyautogui不支持中文输入&#xff0c;利用 pyperclip从剪切板粘贴输入。 # -*- coding: utf-8 -*- import time import os import traceback import logging …

python matplotlib绘图,显示和保存没有标题栏和菜单栏的图像

目录 1. 使用plt.savefig保存无边框图形 2. 显示在屏幕上&#xff0c;并且去掉窗口的标题栏和工具栏 3. 通过配置 matplotlib 的 backend 和使用 Tkinter&#xff08;或其他图形库&#xff09; 方法 1&#xff1a;使用 TkAgg 后端&#xff0c;并禁用窗口的工具栏和标题栏 …

使用 Blazor 和 Elsa Workflows 作为引擎的工作流系统开发

开发一个完整的工作流系统使用 Blazor 和 Elsa Workflows 作为引擎&#xff0c;可以实现一个功能强大的工作流管理和设计系统。下面将提供详细的步骤和代码实现&#xff0c;展示如何在 Blazor 中开发一个基于 Elsa Workflows 的工作流系统。 项目概述 我们的工作流系统将包含以…

深入探索Python人脸识别技术:从原理到实践

一、引言在当今数字化时代,人脸识别技术已然成为了计算机视觉领域的璀璨明星,广泛且深入地融入到我们生活的各个角落。从门禁系统的安全守护,到金融支付的便捷认证,再到安防监控的敏锐洞察,它的身影无处不在,以其高效、精准的特性,极大地提升了我们生活的便利性与安全性…

国内汽车法规政策标准解读:GB 44495-2024《汽车整车信息安全技术要求》

目录 背景 概述 标准适用范围 汽车信息安全管理体系要求&#xff08;第5章&#xff09; 信息安全基本要求&#xff08;第6章&#xff09; 信息安全技术要求&#xff08;第7章&#xff09; ◆ 外部连接安全要求&#xff1a; ◆通信安全要求&#xff1a; ◆软件升级安全…

Arcgis Pro安装完成后启动失败的解决办法

场景 之前安装的Arcgis Pro 今天突然不能使用了&#xff0c;之前是可以使用的&#xff0c;自从系统更新了以后就出现了这个问题。 环境描述 Arcgis Pro 3.0 Windows 10 问题描述 打开Arcgis Pro&#xff0c;页面也不弹出来&#xff0c;打开任务管理器可以看到进程创建之后&…

SAP POC 项目完工进度 - 收入确认方式【工程制造行业】【新准则下工程项目收入确认】

1. SAP POC收入确认基础概念 1.1 定义与原则 SAP POC&#xff08;Percentage of Completion&#xff09;收入确认方式是一种基于项目完工进度来确认收入的方法。其核心原则是根据项目实际完成的工作量或成本投入占预计总工作量或总成本的比例&#xff0c;来确定当期应确认的收…

Docker 学习总结(85)—— docker cp 使用总结

前言 在现代软件开发中,Docker 已成为一种流行的容器化技术。无论是在开发、测试还是生产环境中,管理容器内的文件都是一项常见且重要的任务。本文将详细介绍如何使用 docker cp 命令在 Docker 容器与宿主机之间拷贝文件和目录,并结合一些实际使用场景,帮助您更高效地管理…

使用 Box2D 库开发愤怒的小鸟游戏

使用 Box2D 库开发愤怒的小鸟游戏 Box2D 是一个开源的 2D 物理引擎&#xff0c;广泛应用于游戏开发中&#xff0c;特别是在模拟物体的运动、碰撞、重力等方面。在本文中&#xff0c;我们将利用 Box2D 库开发一个简化版的 愤怒的小鸟 游戏。我们将一步步展示如何实现物理引擎的…

mac 安装mongodb

本文分享2种mac本地安装mongodb的方法&#xff0c;一种是通过homebrew安装&#xff0c;一种是通过tar包安装 homebrew安装 brew tap mongodb/brew brew upate brew install mongodb-community8.0tar包安装 安装mongodb 1.下载mongodb社区版的tar包 mongdb tar包下载地址 2…

2023年江西省职业院校技能大赛网络系统管理赛项(Linux部分样题)

一、Linux项目任务描述 你作为一个Linux的技术工程师,被指派去构建一个公司的内部网络,要为员工提供便捷、安全稳定内外网络服务。你必须在规定的时间内完成要求的任务,并进行充分的测试,确保设备和应用正常运行。任务所有规划都基于Linux操作系统,请根据网络拓扑、基本配…

【威联通】FTP服务提示:服务器回应不可路由的地址。被动模式失败。

FTP服务器提示&#xff1a;服务器回应不可路由的地址。被动模式失败。 问题原因网络结构安全管理配置服务器配置网关![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/1500d9c0801247ec8c89db7a44907e4f.png) 问题 FTP服务器提示&#xff1a;服务器回应不可路由的地址…

Java中json的一点理解

一、Java中json字符串与json对象 1、json本质 json是一种数据交换格式。 常说的json格式的字符串 > 发送和接收时都只是一个字符串&#xff0c;它遵循json这种格式。 2、前后端交互传输的json是什么&#xff1f; 前后端交互传输的json都是json字符串 比如&#xff1a;…

大模型GUI系列论文阅读 DAY2续:《一个具备规划、长上下文理解和程序合成能力的真实世界Web代理》

摘要 预训练的大语言模型&#xff08;LLMs&#xff09;近年来在自主网页自动化方面实现了更好的泛化能力和样本效率。然而&#xff0c;在真实世界的网站上&#xff0c;其性能仍然受到以下问题的影响&#xff1a;(1) 开放领域的复杂性&#xff0c;(2) 有限的上下文长度&#xff…

农业农村大数据应用场景|珈和科技“数字乡村一张图”解决方案

近年来&#xff0c;珈和科技持续深耕农业领域&#xff0c;聚焦时空数据服务智慧农业。 珈和利用遥感大数据、云计算、移动互联网、物联网、人工智能等先进技术&#xff0c;搭建“天空地一体化”监测体系&#xff0c;并创新建设了150的全球领先算法模型&#xff0c;广泛应用于高…

中间件漏洞之redis

目录 前置知识redis持久化存储动态修改配置打redis常用命令 利用弱口令未授权访问写ssh公钥直接写ssrf 绝对路径写shell直接写ssrf 反弹shell直接写ssrf 主从复制防御措施 前置知识 redis持久化存储 RDB Redis DataBase(默认) AOF Append Only File&#xff08;会追加日志文件…