js获取上传视频的封面第一帧
代码如下:粘贴到这个在线编辑器里,可以测试效果。
菜鸟教程在线编辑器
<div><div style="flex: 1;border: 1px solid #999; position:relative;color: #333;background-color:#FFF2B8;"><span style="position: absolute;top:45%;left:45%;">点此选择文件</span><input id="a5" type="file" accept="video/*" style="opacity:0.5;width: 100%;height: 200px;"></div><br><div style="width: 70px;text-align: center;">预览:</div><div id="b5" style="min-width: 300px;min-height: 300px;"></div></div><script>const a5=document.getElementById("a5");const b5=document.getElementById("b5");a5.onchange=(event)=>{if (!event) return;let fileList= event.target.files;if (fileList.length <= 0) return;let reader = new FileReader();reader.onload = function (event) {var listHtml = '<video id="video" style="display: none;" class="video" controls="controls">'+'<source src="'+event.target.result+'">'+'</video>'+'<div class="output"></div>';b5.innerHTML=listHtml;//创建画布var canvas = document.createElement('canvas')var video = document.getElementById("video");video.preload = true;video.autoplay = true;video.muted = true;video.setAttribute('crossOrigin', 'anonymous');//设置画布的宽和高,canvas.width = 800;canvas.height = 400;video.onloadeddata = (() => {canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)var dataURL = canvas.toDataURL('image/png')b5.innerHTML=`<img src="${dataURL}">`;// 删除掉不需要的video标签部分// b5.removeChild(video)})}reader.readAsDataURL(fileList[0]);}</script>
相关文章:
js获取上传视频的封面第一帧
代码如下:粘贴到这个在线编辑器里,可以测试效果。 菜鸟教程在线编辑器 <div><div style"flex: 1;border: 1px solid #999; position:relative;color: #333;background-color:#FFF2B8;"><span style"position: absolute…...
Nginx 高可用负载均衡(三种模式)
一、nginx普通集群负载均衡 1、安装keepalived (1)下载 https://www.keepalived.org/download.html(2)解压 tar -zxvf keepalived-2.0.18.tar.gz(3)使用configure命令配置安装目录与核心配置文件所在位置: ./configure --prefix/usr/local/keepalived --sysconf/e…...
Linux tail命令
在Linux中,tail命令用于查看文件的末尾内容。它可以显示文件的最后几行,默认情况下显示最后10行。 以下是一些常见的使用方式和示例: 显示文件的最后10行: tail filename将会显示名为filename的文件的最后10行内容。 显示文件…...
【屏幕适配发展介绍 Objective-C语言】
一、接下来,我们花一天时间,给大家介绍这个屏幕适配 1.那么,屏幕适配,是什么意思啊 我们说,写程序的时候,我们有时候要做 1)系统适配 2)屏幕适配 1)系统适配:是指的你写的这个代码,在iOS6、iOS7、iOS8,在不同的iOS系统下,是不是运行的效果,一致吧 这个指的是…...
linux中ls命令详解
ls 显示目录内容列表 补充说明 ls命令 就是list的缩写,用来显示目标列表,在Linux中是使用率较高的命令。ls命令的输出信息可以进行彩色加亮显示,以分区不同类型的文件。 语法 ls [选项] [文件名...][-1abcdfgiklmnopqrstuxABCDFGLNQRSUX…...
大盗阿福(记忆化搜索板子)
提供核心代码:(经典的记忆化搜索套路) int dfs(int pos){if(f[pos]!-1) return f[pos];//记忆化if(pos>n) return 0;//边界,越界int sum0;//模板int f10,f20;f1dfs(pos1);f2dfs(pos2)w[pos];summax(f1,f2);//模板f[pos]sum;//模…...
打卡力扣题目八
#左耳听风 ARST 打卡活动重启# 目录 一、问题 二、解题方法一 三、解题方法二 四、两种方法的区别 关于 ARTS 的释义 —— 每周完成一个 ARTS: ● Algorithm: 每周至少做一个 LeetCode 的算法题 ● Review: 阅读并点评至少一篇英文技术文章 ● Tips: 学习至少一…...
matlab使用教程(5)—矩阵定义和基本运算
本博客介绍如何在 MATLAB 中创建矩阵和执行基本矩阵计算。 MATLAB 环境使用矩阵来表示包含以二维网格排列的实数或复数的变量。更广泛而言,数组为向量、矩阵或更高维度的数值网格。MATLAB 中的所有数组都是矩形,在这种意义上沿任何维度的分量向量的长度…...
用HTML写一个简单的静态购物网站
实现代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>购物网站</title> &l…...
如何在go中实现程序的优雅退出,go-kratos源码解析
使用kratos这个框架有近一年了,最近了解了一下kratos关于程序优雅退出的具体实现。 这部分逻辑在app.go文件中,在main中,找到app.Run方法,点进入就可以了 它包含以下几个部分: App结构体:包含应用程序的配置选项和运行时状态。 …...
Appium+python自动化(二十八)- 高级滑动(超详解)
高级溜冰的滑动 滑动操作一般是两点之间的滑动,这种滑动在这里称其为低级的溜冰滑动;就是上一节给小伙伴们分享的。然而实际使用过程中用户可能要进行一些多点连续滑动操作。如九宫格滑动操作,连续拖动图片移动等场景。那么这种高级绚丽的溜…...
github token使用方法
git remote set-url origin https://<githubtoken>github.com/<username>/<repositoryname>.git 在私有仓库的HTTPS的url上加入<githubtoken>即为token url,可以免ssh key登录...
Spring属性注解对配置项名称的自动转换
一、前言 在Spring中,我们经常需要将配置文件中的属性值注入到Java类中。Spring提供了两个主要的注解来实现这一功能:Value 和 ConfigurationProperties。其中 ConfigurationProperties支持将配置项名称与Java类中的属性名进行自动转换,包括…...
Docker 安全 Docker HTTPS请求过程与配置
Docker 容器安全注意点 尽量别做的事 尽量不用 --privileged 运行容器(授权容器root用户拥有宿主机的root权限) 尽量不用 --network host 运行容器(使用 host 网络模式共享宿主机的网络命名空间) 尽量不在容器中运行 ssh 服务 尽…...
DevOps(三)
CD(二) 1. 整体流程2. 环境准备1. jenkins安装2. 编译安装git3. docker安装4. docker-compose安装5. sonarqube安装6. harbor安装7. gitlab私服8. maven安装9. Nexus部署10. K8s部署3. 安装java及编写代码3.1 安装java3.2 安装IntelliJ IDEA3.3 安装tomcat3.4 安装maven3.5 c…...
AOP的妙用
一、改代码 自定义注解用于提示该代码已经在AOP中重构了 public interface ReviseToAop {// 用于记录修改状态String value() default ""; }使用注解(无意义,只是表名被修改) ReviseToAop("修改于:2023/7/30&quo…...
CAN转ETHERCAT网关将CAN 总线和 ETHERCAT 网络连接方法
由于好多现场会出现将CAN总线的设备接到EtherCAT网络中,由于协议的不相同,不能直接进行连接,现需一种能同时兼容CAN 总线和ETHERCAT网络的一种设备,由此捷米JM-ECT-CAN 是自主研发的一款 ETHERCAT 从站功能的通讯网关。该产品主要…...
【大数据趋势】7月30日 汇率,恒指期货的大数据趋势概率分析。
1. 数据源头之一 : 汇率变化 从程序模拟趋势来看,美元在持续弱势状态,周线上正在构建一个新的下跌趋势,而且正在反抽过程中,即将完成,如果没有外部干预,会顺势往下。从月线来看,高点逐步降低&a…...
mac使用mvn下载node-sass 会Binary download failed, trying source
m1 上使用nvm 以下node的版本可以直接下载(Binary download,而不是 trying source)而不用切换mac cpu架构 zhiwenwenzhiwenwendeMBP cockpit % nvm install 14.15.5 Downloading and installing node v14.15.5... Downloading https://node…...
【C++】开源:Muduo网络库配置与使用
😏★,:.☆( ̄▽ ̄)/$:.★ 😏 这篇文章主要介绍Muduo网络库配置与使用。 无专精则不能成,无涉猎则不能通。——梁启超 欢迎来到我的博客,一起学习,共同进步。 喜欢的朋友可以关注一下,下…...
使用Taotoken多模型API为嵌入式项目提供智能对话辅助
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 使用Taotoken多模型API为嵌入式项目提供智能对话辅助 对于使用Keil5等传统IDE进行嵌入式开发的工程师而言,为设备增添自…...
用STM32F401和千分之一精度电阻,我亲手焊了个10位R-2R DAC,误差竟然小于1.5mV
从零打造10位R-2R DAC:高精度电阻与STM32的实战碰撞 在电子设计领域,数模转换器(DAC)是实现数字信号到模拟信号转换的核心部件。而R-2R梯形电阻网络因其结构简单、成本低廉的特点,成为DIY爱好者实现DAC功能的热门选择。…...
皮线、裸纤总是分不清?试试这个算法一键校准技巧
不知道你有没有经历过这种工地上的"崩溃瞬间":大热天蹲在居民楼昏暗的楼道里,蚊子在耳边嗡嗡叫,你手里正拉着一根刚从住户门缝里拽出来的皮线光缆,准备跟分纤箱引出来的单模裸纤做熔接。结果放进机器,合上盖…...
告别手动分割!用Python脚本一键生成VOC数据集所需的train.txt和val.txt
告别手动分割!用Python脚本一键生成VOC数据集所需的train.txt和val.txt 在计算机视觉项目中,数据集的准备往往是耗时最长的环节之一。特别是当我们需要按照VOC格式整理数据集时,手动分割训练集、验证集不仅效率低下,还容易引入人为…...
【系统架构师-综合题(14)】数学与经济管理知识点
数学与经济管理这一章,表面上最不像“系统架构师”的章节,因为它看起来更像一组杂乱的应用题:有组合计数、有工程进度、有集合统计、有线性规划、有图论最短路、最大流、最小生成树、动态规划、指派问题,还有概率决策和匿名调查。…...
80C166/C167芯片内部RAM执行代码技术详解
1. 80C166/C167芯片内部RAM执行代码的技术解析在嵌入式系统开发中,有时我们需要将特定代码从ROM复制到芯片内部RAM执行。这种需求常见于需要改变总线模式的场景,比如在Siemens 80C166/C167微控制器上切换8位/16位模式或改变总线复用配置。根据Siemens官方…...
测试工程师如何进行测试计划制定?这5个步骤让你的计划更合理
对于软件测试从业者而言,一份合理可行的测试计划是项目测试工作的核心纲领,它不仅决定了测试活动的范围、方向与资源分配,更直接影响着项目的交付质量与进度管控。很多初级测试工程师常常将测试计划等同于测试时间列表,要么写得过…...
ChatGPT API接入全流程详解:从密钥配置、请求封装到错误重试、流式响应的7步落地指南
更多请点击: https://kaifayun.com 第一章:ChatGPT API接入的前置准备与核心概念 在正式调用 ChatGPT API 之前,需完成身份认证、环境配置与服务理解三类关键准备。OpenAI 平台不再提供免费配额的永久访问权限,所有开发者必须通过…...
混合专家MoE拆解:GPT-4、千问、DeepSeek为什么都选这个架构
去年我写了个小模型做文本分类,全部参数只有1.5B,单卡就能跑。结果效果还行,但跟大模型比就是被吊打。 我就想,为什么那些几百B甚至上T参数的大模型,推理速度没比我的小模型慢一万倍? 答案就在MoE&#x…...
手把手教你从零搭建 MCP Server:AI 连接万物的保姆级实战教程
为什么要学 MCP? 说实话,最近半年 AI 开发圈最火的协议就是 MCP(Model Context Protocol)了。你可能已经用上了各种 AI 助手,但有没有想过:这些 AI 怎么连接你的数据库?怎么读你的本地文件&…...
