当前位置： 首页 > news >正文

在浏览器网页上使用JavaScript如何将mp4视频转换成gif动态图片

news 2026/5/24 3:55:12

前言

要将mp4视频转换为gif动态图像，可以使用JavaScript库中的FFmpeg.js。这个库可以使用JavaScript读取和写入文件，也可以使用canvas和WebGL在浏览器中进行视频处理。

步骤如下：

1.在网站中引入FFmpeg.js库

<script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg/dist/ffmpeg.min.js"></script>

2.创建FFmpeg.js实例

const ffmpeg = createFFmpeg({ log: true });
await ffmpeg.load();

3.将mp4视频读入FFmpeg.js中

await ffmpeg.FS('writeFile', 'test.mp4', await fetchFile('test.mp4'));

4.使用FFmpeg.js将mp4视频转换为gif动态图像

await ffmpeg.run('-i', 'test.mp4', 'test.gif');

5.将转换后的gif图像从FFmpeg.js中读取出来，并在网页中显示

const gifData = await ffmpeg.FS('readFile', 'test.gif');
const gifUrl = URL.createObjectURL(new Blob([gifData.buffer], { type: 'image/gif' }));
const imgEl = document.createElement('img');
imgEl.src = gifUrl;
document.body.appendChild(imgEl);

完整的JavaScript代码示例如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>转换mp4视频为gif动态图像</title><script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg/dist/ffmpeg.min.js"></script>
</head>
<body><input type="file" onchange="onUpload(event)"><script>async function onUpload(event) {const inputFile = event.target.files[0];const inputFileData = await inputFile.arrayBuffer();const ffmpeg = createFFmpeg({ log: true });await ffmpeg.load();ffmpeg.FS('writeFile', inputFile.name, new Uint8Array(inputFileData));await ffmpeg.run('-i', inputFile.name, 'output.gif');const outputData = ffmpeg.FS('readFile', 'output.gif');const outputUrl = URL.createObjectURL(new Blob([outputData.buffer], { type: 'image/gif' }));const outputEl = document.createElement('img');outputEl.src = outputUrl;document.body.appendChild(outputEl);
}</script></body>
</html>

相关文章：

在浏览器网页上使用JavaScript如何将mp4视频转换成gif动态图片

前言 要将mp4视频转换为gif动态图像&#xff0c;可以使用JavaScript库中的FFmpeg.js。这个库可以使用JavaScript读取和写入文件&#xff0c;也可以使用canvas和WebGL在浏览器中进行视频处理。 步骤如下&#xff1a; 1.在网站中引入FFmpeg.js库 <script src"https:/…...

编程日记 2023/6/3 17:30:52

Nginx网络服务——主配置文件-nginx.conf

Nginx网络服务——主配置文件-nginx.conf 一、全局配置的六个模块简介二、nginx配置文件的详解1.全局配置模块2.I/O 事件配置3.HTTP 配置4.Web 服务的监听配置5.其他设置 三、访问状态统计与控制1.访问状态统计2.基于授权的访问控制3.基于客户端的访问控制 一、全局配置的六个模…...

编程日记 2023/6/3 17:25:51

Java Map集合

8 Map集合 HashMap: 元素按照键是无序，不重复，无索引，值不做要求LinkedHashMap: 元素按照键是有序，不重复，无索引，值不做要求8.1 Map集合概述和特点 Map集合是一种双列集合，每个元素包含两个值Interface Map<K,V>； K：键的类型，V：值的类型Map集合的每个元素的格…...

编程日记 2023/6/3 17:20:50

数据库中的中英文术语大全

一、基础理论 基础理论英文术语中文释义data数据database&#xff08;DB&#xff09;数据库database system&#xff08;dbs&#xff09;数据库系统database management system数据库管理系统database administrator数据库管理员relational model关系模型relational database关…...

编程日记 2023/6/3 17:15:49

调用华为API实现身份证识别

调用华为API实现身份证识别 1、作者介绍2、调用华为API实现身份证识别2.1 算法介绍2.1.1OCR简介2.1.2身份证识别原理2.1.3身份证识别应用场景 2.2 调用华为API流程 3、代码实现3.1安装相关的包3.2代码复现3.3实验结果 1、作者介绍 雷千龙&#xff0c;男&#xff0c;西安工程大…...

编程日记 2023/6/3 17:10:47

一个简单的基于C/S模型的TCP通信实例

1 TCP协议 1.1 概念 TCP是一种面向连接的、可靠的协议&#xff0c;有点像打电话&#xff0c;双方拿起电话互通身份之后就建立了连接&#xff0c;然后说话就行了&#xff0c;这边说的话那边保证听得到&#xff0c;并且是按说话的顺序听到的&#xff0c;说完话挂机断开连接。也…...

编程日记 2023/6/3 17:05:46

VMware ESXi 8.0b Unlocker OEM BIOS 集成 REALTEK 网卡驱动和 NVMe 驱动 (集成驱动版)

VMware ESXi 8.0b Unlocker & OEM BIOS 集成 REALTEK 网卡驱动和 NVMe 驱动 (集成驱动版) 发布 ESXi 8.0 集成驱动版&#xff0c;在个人电脑上运行企业级工作负载 请访问原文链接&#xff1a;https://sysin.org/blog/vmware-esxi-8-sysin/&#xff0c;查看最新版。原创作…...

编程日记 2023/6/3 17:00:45

ShardingSphere笔记（三）：自定义分片算法 — 按月分表·真·自动建表

ShardingSphere笔记&#xff08;二&#xff09;&#xff1a;自定义分片算法 — 按月分表真自动建表 文章目录 ShardingSphere笔记&#xff08;二&#xff09;&#xff1a;自定义分片算法 — 按月分表真自动建表一、 前言二、 Springboot 的动态数据库三、 实现我们自己的动态数…...

编程日记 2023/6/3 16:55:43

SpringBoot 如何实现文件上传和下载

当今Web应用程序通常需要支持文件上传和下载功能&#xff0c;Spring Boot提供了简单且易于使用的方式来实现这些功能。在本篇文章中&#xff0c;我们将介绍Spring Boot如何实现文件上传和下载&#xff0c;同时提供相应的代码示例。 文件上传 Spring Boot提供了Multipart文件上…...

编程日记 2023/6/3 16:50:42

Linux系统下imx6ull QT编程—— Ubuntu 下编写程序（一）

Linux QT编程 文章目录 Linux QT编程前言一、C简介二、C环境设置1.安装编译 C 语言和 C的环境。2.创建文件编写代码3.编译运行代码 总结 前言 绍在 Ubuntu 在终端窗口下使用 vi/vim 编辑一个 C源文件。通过编写最简单的示例“Hello,World QCX”。 一、C简介 C &#xff08;c…...

编程日记 2023/6/3 16:45:41

网络编程--多线程服务器客户端

写在前面 此前的回声服务器/客户端都是在主线程中阻塞交互&#xff0c;本文将使用多线程方式实现服务器/客户端。 互斥量相关接口 使用多线程&#xff0c;自然避免不了线程同步问题。 因本文使用互斥量实现线程同步&#xff0c;因此仅介绍互斥量相关接口&#xff0c;其他实…...

编程日记 2023/6/3 16:40:40

如何使用vue的计算属性来处理数据计算？

计算属性是Vue.js中非常强大的功能&#xff0c;它可以帮助我们轻松地处理数据计算和管理数据。 先说个段子&#xff1a;有一天&#xff0c;一个新手问一个Vue大师&#xff0c;“大师&#xff0c;我的数据计算和管理怎么那么麻烦&#xff1f;”&#xff0c;大师回答&#xff1a…...

编程日记 2023/6/3 16:35:38

游戏研发项目管理

基于阶段模式进行游戏新产品研发过程&#xff0c;以及基于这种研发过程使用Leangoo 领歌敏捷工具管理 二、游戏产品开发流程 通常开发一款新游戏大体上会按照如下流程来进行&#xff1a; 1&#xff09; 概念阶段 – Concept 主策根据产品创意&#xff0c;确定游戏策划草案&a…...

编程日记 2023/6/3 16:30:37

P1249 乘积最大

最大乘积 题目描述 一个正整数一般可以分为几个互不相同的自然数的和&#xff0c;如 3 1 2 312 312&#xff0c; 4 1 3 413 413&#xff0c; 5 &#xff1d; 1 4 2 3 5&#xff1d;1423 5&#xff1d;1423&#xff0c; 6 1 5 &#xff1d; 2 4 615&#xff1d;24 …...

编程日记 2023/6/3 16:25:36

【7 Vue3 – Composition API】

1 认识Composition API Options API的弊端 setup函数 2 setup函数的参数 3 setup简单使用 1 注意不再有响应式数据 要做到响应式数据需要在数据定义时使用ref包装数据,并且在使用时,使用value解包 2 注意template要使用的数据或者函数,必须要return 返回才能被使用 <templa…...

编程日记 2023/6/3 16:20:34

设计模式-模板方法模式

模板方法模式 问题背景解决方案&#xff1a;模板方法模式基本介绍解决问题代码示例运行结果 钩子方法注意事项和细节 问题背景 豆浆的制作&#xff1a; 1&#xff09;制作豆浆的流程&#xff1a;选材—>添加配料—>浸泡—>放到豆浆机打碎 2&#xff09;通过添加不同…...

编程日记 2023/6/3 16:15:33

9. python的if语句

文章目录 一、if结构1.1 比较符号1.1.1 使用比较两个数据是否相等&#xff1a;1.1.2 使用!号比较数据是否不相等1.1.3 使用<号比较数字大小关系1.1.4 使用<号比较数字大小关系1.1.5 使用>号比较数字大小关系1.1.6 使用>号比较数字大小关系 1.2 关键字1.2.1 and关键…...

编程日记 2023/6/3 16:10:32

并发编程的基础知识

并发编程的优缺点 充分利用多核CPU的计算能力&#xff1a;通过并发编程的形式可以将多核CPU的计算能力发挥到极致&#xff0c;性能得到提升方便进行业务拆分&#xff0c;提升系统并发能力和性能&#xff1a;在特殊的业务场景下&#xff0c;先天的就适合于并发编程。现在的系统动…...

编程日记 2023/6/3 16:05:31

C 语言风格的字符串，非 string 类如何初始化字符串，以及操作字符串的函数（C++复习向p12）

C 风格的字符串 以 C 风格初始化字符串&#xff0c;有这 2 种方法。其中的 ‘\0’ 是字符串结束符号&#xff0c;是 null 字符 char site[7] {R, U, N, O, O, B, \0}; char site[] "RUNOOB";C 中操作字符串的函数 (以null结尾的字符串) strcpy(s1, s2) 把 s2 复…...

编程日记 2023/6/3 16:00:28

Linux文件系统、磁盘I/O是怎么工作的？

同CPU、内存一样&#xff0c;文件系统和磁盘I/O&#xff0c;也是Linux操作系统最核心的功能。磁盘为系统提供了最基本的持久化存储。文件系统则在磁盘基础上&#xff0c;提供了一个用来管理文件的树状结构。 目录&#xff1a; 一. 文件系统 1. 索引节点和目录项 2. 虚拟文件系…...

编程日记 2023/6/3 15:55:27

汽车电子系统中GIC-600AE与CMN-600AE互连的安全机制解析

1. CMN-600AE与GIC-600AE互连机制解析在汽车电子系统中&#xff0c;CoreLink GIC-600AE中断控制器与CMN-600AE互连网络的协同工作对实现功能安全至关重要。这两个IP核的配合使用需要特别关注消息路由机制和保护方案的兼容性。GIC-600AE内部组件&#xff08;如ITS中断转换服务和…...

编程新知 2026/5/24 3:36:19

国产系统（UOS/麒麟/方德）截图工具终极指南：从内置工具到第三方替代方案全解析

国产操作系统截图工具全攻略&#xff1a;从基础操作到高阶玩法在数字化办公时代&#xff0c;截图功能已成为日常工作中不可或缺的生产力工具。对于统信UOS、麒麟KOS、方德NFS等国产操作系统的用户而言&#xff0c;掌握系统内置截图工具的各项功能&#xff0c;并了解当内置工具无…...

编程新知 2026/5/24 2:22:04

ERR_CONNECTION_REFUSED 根本原因与四步定位法

1. 这个报错不是网络问题&#xff0c;而是本地服务没跑起来的“心跳停止”信号你刚在终端敲下npm run dev&#xff0c;浏览器自动打开http://localhost:3000&#xff0c;页面一片空白&#xff0c;F12 打开 Console&#xff0c;赫然一行红字&#xff1a;Failed to load resource…...

编程新知 2026/5/24 2:07:04

AI Agent Harness 在智能客服领域的应用

标题：AI Agent Harness 落地智能客服：从1.0到4.0的服务效率革命全指南 关键词：AI Agent Harness、智能客服4.0、多Agent协同、服务编排、工具调用框架、意图路由、客户体验优化 摘要 本文系统梳理了AI Agent Harness在智能客服领域的技术体系与落地路径，从第一性原理出发…...

编程新知 2026/5/24 0:12:00

软考中级嵌入式——第九章 数据结构与算法

1.数据结构与算法概念1.1数据结构数据结构概述&#xff1a;数据结构是计算机存储、组织数据的方式。简单来说&#xff0c;就是如何把现实中的数据&#xff08;如数字、文字、图片&#xff09;合理地整理好&#xff0c;放进计算机里&#xff0c;并定义好对这些数据可以做什么操作…...

编程新知 2026/5/23 23:55:16

pycryptodome导入失败的四大底层原因与诊断方案

1. 这不是pycryptodome的问题&#xff0c;而是你没看清它真正依赖的底层逻辑“ImportError: No module named Crypto”、“AttributeError: module Crypto.Cipher has no attribute AES”、“ModuleNotFoundError: No module named Cryptography_cffi...”——这些报错我过去三…...

编程新知 2026/5/23 23:24:23

CANN-昇腾NPU-推理服务高可用-怎么做到99.99%可用性

99% 可用性意味着一年宕机时间 < 53 分钟。推理服务要做到这个指标&#xff0c;需要解决&#xff1a;NPU 故障、OOM、网络中断、版本回滚失败。这篇讲在昇腾NPU上的具体做法。 可用性计算 99.9% 8.76 小时/年 99.99% 52.6 分钟/年 99.999% 5.26 分钟/年99% 是多数在…...

编程新知 2026/5/23 21:30:23

企业内如何规范 API Key 使用并实现访问控制与审计

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 企业内如何规范 API Key 使用并实现访问控制与审计 在中大型企业或技术部门内部&#xff0c;大模型 API 的引入往往伴随着新的管理…...

编程新知 2026/5/23 20:32:49

Agent怎样做到在信创环境全栈兼容？2026企业级智能体信创适配技术全解析

进入2026年&#xff0c;随着信创&#xff08;信息技术应用创新&#xff09;产业进入深水区&#xff0c;企业数字化转型已不再仅仅是简单的“去IOE”或系统迁移&#xff0c;而是演变为以AI Agent&#xff08;智能体&#xff09;为核心的新型生产力重构。在这一背景下&#xff0c…...

编程新知 2026/5/23 20:17:55

2025年AI数字人行业现状：全国超99万家企业涌入，真正能落地的不到一成

当生成式AI的浪潮席卷各行各业&#xff0c;AI数字人成为最先跑出商业化落地速度的细分赛道。然而&#xff0c;在全国超99万家相关企业蜂拥而入的热闹背后&#xff0c;一个残酷的现实正在显现&#xff1a;绝大多数所谓的"AI数字人"不过是披着科技外衣的"会动的照…...

编程新知 2026/5/23 20:06:35