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>

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

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

相关文章

【概率论三】参数估计:点估计(矩估计、极大似然法)、区间估计

文章目录 一. 点估计1. 矩估计法2. 极大似然法2.1. 似然函数2.2. 极大似然估计法 3. 评价估计量的标准3.1. 无偏性3.2. 有效性3.3. 一致性 二. 区间估计1. 区间估计的概念2. 正态总体参数的区间估计 参数估计讲什么 由样本来确定未知参数参数估计分为点估计与区间估计 一. 点估…

[iOS]浅析isa指针

[iOS]浅析isa指针 文章目录 [iOS]浅析isa指针isa指针isa的结构isa的初始化注意事项 上一篇留的悬念不止分类的实现 还有isa指针到底是什么 它是怎么工作的 class方法又是怎么运作的 class_data_bits_t bits; // class_rw_t * plus custom rr/alloc flags 这里面的class又是何方…

新华三H3CNE网络工程师认证—VLAN使用场景与原理

通过华三的技术原理与VLAN配置来学习&#xff0c;首先介绍VLAN&#xff0c;然后介绍VLAN的基本原理&#xff0c;最后介绍VLAN的基本配置。 一、传统以太网问题 在传统网络中&#xff0c;交换机的数量足够多就会出现问题&#xff0c;广播域变得很大&#xff0c;分割广播域需要…

R语言优雅的把数据基线表(表一)导出到word

基线表&#xff08;Baseline Table&#xff09;是医学研究中常用的一种数据表格&#xff0c;用于在研究开始时呈现参与者的初始特征和状态。这些特征通常包括人口统计学数据、健康状况和疾病史、临床指标、实验室检测、生活方式、社会经济等。 本人在既往文章《scitb包1.6版本发…

C++客户端Qt开发——QT初识

二、QT初识 1.helloworld示例 ①图形化的方式&#xff0c;在界面上创建出一个控件&#xff0c;显示helloworld 右侧通过树形结构&#xff0c;就会显示出当前界面上有哪些控件 此时.ui文件已发生变化 qmake就会在编译项目的时候&#xff0c;基于这个内容&#xff0c;生成一段C…

35.UART(通用异步收发传输器)-RS232(2)

&#xff08;1&#xff09;RS232接收模块visio框图&#xff1a; &#xff08;2&#xff09;接收模块Verilog代码编写: /* 常见波特率&#xff1a; 4800、9600、14400、115200 在系统时钟为50MHz时&#xff0c;对应计数为&#xff1a; (1/4800) * 10^9 /20 -1 10416 …

链接追踪系列-10.mall-swarm微服务运行并整合elk-上一篇的番外

因为上一篇没对微服务代码很详细地说明&#xff0c;所以在此借花献佛&#xff0c;使用开源的微服务代码去说明如何去做链路追踪。 项目是开源项目&#xff0c;fork到github以及gitee中&#xff0c;然后拉取到本地 后端代码&#xff1a; https://gitee.com/jelex/mall-swarm.gi…

微软研究人员为电子表格应用开发了专用人工智能LLM

微软的 Copilot 生成式人工智能助手现已成为该公司许多软件应用程序的一部分。其中包括 Excel 电子表格应用程序&#xff0c;用户可以在其中输入文本提示来帮助处理某些选项。微软的一组研究人员一直在研究一种新的人工智能大型语言模型&#xff0c;这种模型是专门为 Excel、Go…

BiLSTM 实现股票多变量时间序列预测(PyTorch版)

前言 系列专栏:【深度学习&#xff1a;算法项目实战】✨︎ 涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域&#xff0c;讨论了各种复杂的深度神经网络思想&#xff0c;如卷积神经网络、循环神经网络、生成对…

算法题目整合

文章目录 121. 小红的区间翻转142. 两个字符串的最小 ASCII 删除总和143. 最长同值路径139.完美数140. 可爱串141. 好二叉树 121. 小红的区间翻转 小红拿到了两个长度为 n 的数组 a 和 b&#xff0c;她仅可以执行一次以下翻转操作&#xff1a;选择a数组中的一个区间[i, j]&…

SpringBoot集成MQTT实现交互服务通信

引言 本文是springboot集成mqtt的一个实战案例。 gitee代码库地址&#xff1a;源码地址 一、什么是MQTT MQTT&#xff08;Message Queuing Telemetry Transport&#xff0c;消息队列遥测传输协议&#xff09;&#xff0c;是一种基于发布/订阅&#xff08;publish/subscribe&…

教大模型学数学,总共分几步?

大模型那么聪明&#xff0c;为什么数学题总是做不对、做不会&#xff1f; 从答高考数学卷难及格到普通数字比大小出错&#xff0c;大模型总算让大家觉得并非“无所不能”。这一方面让普通人开心&#xff0c;毕竟讲到AI取代人类看起来为时尚早&#xff0c;而另一方面&#xff0…

Autosar RTE配置-Assembly和Delegation的使用-基于ETAS软件

文章目录 前言Assembly和Delegation的含义Delegation的使用Assembly的使用总结 前言 RTE中的Compostion内部的SWC之间的连接使用Assembly Connector进行连接。这样的连接一般都是一个SWC的Pport对应另一个SWC的Rport。而Autosar软件中往往不只一个Composition(一般可以以核的数…

Android Toast

Toast Toast是Android常用的简单控件&#xff0c;主要用来进行简短的信息提示&#xff0c;如图1所示。 图1 Toast效果图 Toast的基本用法很简单&#xff0c;不需要设置layout&#xff0c;只需要在程序中调用即可。Toast调用makeText()方法设置需要显示的界面、显示的内容、显…

【计算机网络】学习指南及导论

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️计算机网络】 文章目录 前言我们为什么要学计算机网络&#xff1f;计算机网络概述计算机网络的分类按交换技术分类按使用者分类按传输介质分类按覆盖网络分类按覆盖网络分类 局域网的连接方式有线连接…

Lua基础知识入门

1 基础知识 标识符&#xff1a;标识符的定义和 C语言相同&#xff1a;字母和下划线_ 开头&#xff0c; 下划线_ 大写字母一般是lua保留字&#xff0c; 如_VERSION 全局变量&#xff1a;默认情况下&#xff0c;变量总是认为是全局的&#xff0c;不需要申明&#xff0c;给一个变…

河南萌新联赛2024第(一)场:河南农业大学

A.造数 题目&#xff1a; 链接&#xff1a;https://ac.nowcoder.com/acm/contest/86639/A 思路&#xff1a; 签到题&#xff0c;特判如果n0&#xff0c;输出0&#xff0c;如果n1或2&#xff0c;输出1&#xff1b;while循环&#xff0c;首先如果n%2!0&#xff0c;那么s&…

基于Web的特产美食销售系统的设计与实现

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…

Spring Web MVC(常用的注解@RequestMapping,@RequestParam,@RequestBody等)

一、Spring MVC spring的启动类 启动类是看这个 SpringBootApplication 注解&#xff0c;而不是 类的名字 这个注解在哪&#xff0c;哪个类就是启动类 1.MVC思想 举例 二、Spring MVC mvc 是一种思想&#xff0c;而spring mvc是对mvc思想的一种实现。全称是 spring web mvc…

笔记 2 : 课本第 3 章开始,记录 arm 的汇编指令的格式

&#xff08;13&#xff09; 介绍 arm 中的第一个汇编指令的用法 mov &#xff1a; &#xff08;14&#xff09;立即数的概念&#xff1a; &#xff08;15&#xff09; 汇编中的移位写法&#xff1a; 举例 &#xff1a; &#xff08;16&#xff09; 学习一个新的指令 cmp &a…