前端实现 GIF 图片循环播放
前言
使用 img 加载 GIF 图片,内容只会播放一次,之后就会自动暂停;
通过定时器在一段时间后重新加载图片的方式,会导致浏览器内存不断增大,并且可能会有闪烁、卡顿的问题;
ImageDecoder
WebCodecs API 的 ImageDecoder 接口提供了一种对编码图像数据进行解包和解码的方法。

ImageDecoder 只能在 localhost 或者 https 的 tab 页中获取到
代码
canvas设置width和height,和GIF图片尺寸一致
或许你也可以通过一下方法动态设置尺寸;<canvas width="1310" height="954"></canvas>const img = new Image(); img.src = '图片路径'; img.onload = function() {var width = this.width; // 图片宽度var height = this.height; // 图片高度console.log(`图片尺寸为:${width} x ${height}`);// some code... // 为canvas 设置 width、height };- 通过
fetch获取GIF图片资源,传入urlfetch(url).then((response) => decodeImage(response.body)); decodeImage方法对图片解码imageDecoder = new ImageDecoder({ data: imageByteStream, type: "image/gif" }); imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);renderImage渲染每一帧的图片function renderImage (result) {const canvas = document.querySelector("canvas");const canvasContext = canvas.getContext("2d");// 绘制图片 canvasContext.drawImage(result.image, 0, 0);const track = imageDecoder.tracks.selectedTrack;if (imageDecoder.complete) {if (track.frameCount === 1) return;// 如果序号超出了帧数,重置为 0if (imageIndex + 1 >= track.frameCount) imageIndex = 0;}// 解码下一帧图片并渲染imageDecoder.decode({ frameIndex: ++imageIndex }).then((nextResult) =>setTimeout(() => {renderImage(nextResult);}, result.image.duration / 1000) // 可以调整播放速度).catch((e) => {if (e instanceof RangeError) {imageIndex = 0;imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);} else {throw e;}});}
完整代码
<template><div><canvas width="1310" height="954"></canvas></div>
</template><script>
export default {mounted() {this.play(require("@/assets/images/animate.gif"));},play(url) {let imageDecoder = null;let imageIndex = 0;function renderImage (result) {const canvas = document.querySelector("canvas");const canvasContext = canvas.getContext("2d");canvasContext.drawImage(result.image, 0, 0);const track = imageDecoder.tracks.selectedTrack;if (imageDecoder.complete) {if (track.frameCount === 1) return;if (imageIndex + 1 >= track.frameCount) imageIndex = 0;}imageDecoder.decode({ frameIndex: ++imageIndex }).then((nextResult) =>setTimeout(() => {renderImage(nextResult);}, result.image.duration / 1000)).catch((e) => {if (e instanceof RangeError) {imageIndex = 0;imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);} else {throw e;}});}function decodeImage (imageByteStream) {imageDecoder = new ImageDecoder({ data: imageByteStream, type: "image/gif" });imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);}fetch(url).then((response) => decodeImage(response.body));}
}
</script>
相关链接
- 纯前端如何实现Gif暂停、倍速播放
- MDN ImageDecoder
相关文章:
前端实现 GIF 图片循环播放
前言 使用 img 加载 GIF 图片,内容只会播放一次,之后就会自动暂停; 通过定时器在一段时间后重新加载图片的方式,会导致浏览器内存不断增大,并且可能会有闪烁、卡顿的问题; ImageDecoder WebCodecs API 的…...
React - 事件绑定this
在 React 中,this 的绑定是一个常见问题,尤其在类组件中使用事件处理函数时。JavaScript 中的 bind 函数用于设置函数调用时 this 的值。 bind 函数的作用 bind() 方法创建一个新的函数,当被调用时,其 this 关键字被设置为提供的…...
STM32系统架构介绍
STM32系统架构 1. CM3/4系统架构2. CM3/4系统架构-----存储器组织结构2.1 寄存器地址映射(特殊的存储器)2.2 寄存器地址计算2.3 寄存器的封装 3. CM3/4系统架构-----时钟系统 STM32 和 ARM 以及 ARM7是什么关系? ARM 是一个做芯片标准的公司,…...
Macbook Pro快速搭建Easysearch学习环境
在学习过程中,我们有时身边没有可用的服务器,这时就需要借助自己的 Mac 来安装和学习 Easysearch。然而,Easysearch 官网并未提供 Mac 版本的安装教程,下面我将详细整理我在 Mac 上安装和使用 Easysearch 的折腾经历。 Easysearc…...
老游戏回顾:SWRacer
竞速类游戏里,我很怀念它。 虽然已经25年过去了。 相比之下,别的游戏真的没法形容。 ---- 是LucasArts制作的一款赛车竞速游戏; 玩家要扮演一名银河旅行者参加各种赛车比赛,赢得奖金,在经历了八个不同星球上的24场…...
Firefox无法隐藏标题栏
Openbox 窗管 Firefox 无法隐藏标题栏。 深度Linux安装火狐,Linux(deepin) 下隐藏 Firefox 标题栏-CSDN博客 需要在 desktop 的 exec 中增加环境变量: Execenv MOZ_GTK_TITLEBAR_DECORATIONclient firefox...
vue基础(五)
Vue 实例在创建、挂载、更新、销毁的过程中会触发一系列的生命周期钩子(Lifecycle Hooks),让开发者可以在不同阶段执行逻辑。 1. Vue 2 生命周期完整流程 生命周期的四个主要阶段 创建阶段(Creation)挂载阶段&#…...
MySQL的深度分页如何优化?
大家好,我是锋哥。今天分享关于【MySQL的深度分页如何优化?】面试题。希望对大家有帮助; MySQL的深度分页如何优化? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 MySQL的深度分页(即跳过大量数据后进行分…...
深度学习每周学习总结R6(RNN实现阿尔茨海默病诊断)
🍨 本文为🔗365天深度学习训练营 中的学习记录博客R8中的内容,为了便于自己整理总结起名为R6🍖 原作者:K同学啊 | 接辅导、项目定制 目录 0. 总结1. 数据集介绍2. 数据预处理3. 模型构建4. 初始化模型及优化器5. 训练函…...
Node.js 多模态图像描述服务 调用siliconflow:现代 JavaScript 实践
Node.js 多模态图像描述服务:现代 JavaScript 实践 项目背景 本项目使用 Node.js 和 TypeScript 实现一个高性能的图像描述微服务,展示 JavaScript 在多模态 AI 应用中的强大能力。 技术栈 Node.jsTypeScriptExpress.jsOpenAI APIdotenvRxJS (可选&a…...
机器学习数学基础:21.特征值与特征向量
一、引言 在现代科学与工程的众多领域中,线性代数扮演着举足轻重的角色。其中,特征值、特征向量以及相似对角化的概念和方法,不仅是线性代数理论体系的核心部分,更是解决实际问题的有力工具。无论是在物理学中描述系统的振动模式…...
【目标检测json2txt】label从COCO格式json文件转YOLO格式txt文件
目录 🍀🍀1.COCO格式json文件 🌷🌷2.YOLO格式txt文件 💖💖3.xml2json代码(python) 🐸🐸4.输入输出展示 🙋🙋4.1输入json 🍂🍂4.2输出txt 整理不易,欢迎一键三连!!! 送你们一条美丽的--分割线-- 🍀🍀1.COCO格式json文件 COCO数…...
强化学习之 PPO 算法:原理、实现与案例深度剖析
目录 一、引言二、PPO 算法原理2.1 策略梯度2.2 PPO 核心思想 三、PPO 算法公式推导3.1 重要性采样3.2 优势函数估计 四、PPO 算法代码实现(以 Python 和 PyTorch 为例)五、PPO 算法案例应用5.1 机器人控制5.2 自动驾驶 六、总结 一、引言 强化学习作为…...
vue-点击生成动态值,动态渲染回显输入框
1.前言 动态点击生成数值,回显输入框,并绑定。 2.实现 <template><div style"display:flex;align-items: center;flex-direction:row"><a-input:key"inputKey"v-model"uploadData[peo.field]"placehold…...
高性能 :OpenAI Triton Open-source GPU programming Language LINUX 环境配置
目录 配置triton环境cudabuild-essential带有pip的python环境直接安装pipanaconda 安装 triton 环境pip install tritonpip install torch 运行test示例vector-add.pylaunch.json 配置triton环境 cuda wget http://developer.download.nvidia.com/compute/cuda/11.0.2/local_…...
TCP 端口号为何位于首部前四个字节?协议设计的智慧与启示
知乎的一个问题很有意思:“为什么在TCP首部中要把TCP的端口号放入最开始的四个字节?” 这种问题很适合我这种搞历史的人,大年初一我给出了一个简短的解释,但仔细探究这个问题,我们将会获得 TCP/IP 被定义的过程。 文…...
HTML之JavaScript函数声明
HTML之JavaScript函数声明 1. function 函数名(){}2. var 函数名 function(){}<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1…...
R 数组:高效数据处理的基础
R 数组:高效数据处理的基础 引言 在数据科学和统计分析领域,R 语言以其强大的数据处理和分析能力而备受推崇。R 数组是 R 语言中用于存储和操作数据的基本数据结构。本文将详细介绍 R 数组的创建、操作和优化,帮助读者掌握 R 数组的使用技巧…...
git服务器搭建,gitea服务搭建,使用systemclt管理服务
文章目录 页面展示使用二进制文件安装git服务下载选择架构使用wget下载安装 验证 GPG 签名服务器设置准备环境创建systemctl文件 备份与恢复备份命令 (dump)恢复命令 (restore) 页面展示 使用二进制文件安装git服务 所有打包的二进制程序均包含 SQLite,MySQL 和 Po…...
Pdf手册阅读(1)--数字签名篇
原文阅读摘要 PDF支持的数字签名, 不仅仅是公私钥签名,还可以是指纹、手写、虹膜等生物识别签名。PDF签名的计算方式,可以基于字节范围进行计算,也可以基于Pdf 对象(pdf object)进行计算。 PDF文件可能包…...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
pam_env.so模块配置解析
在PAM(Pluggable Authentication Modules)配置中, /etc/pam.d/su 文件相关配置含义如下: 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块,负责验证用户身份&am…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...
PL0语法,分析器实现!
简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
