如何在 JavaScript 中获取 gif 图像的持续时间

2024-04-18

我只尝试显示一次 gif。 所以我使用这段代码来实现这一点。

    var ui_img = document.getElementById("ui_image");
    ui_img.hidden = false;
    setTimeout(function () {
        ui_img.hidden = true;
    }, 8000);

但我知道所有 gif 的持续时间并不相同。 我该如何解决这个问题?


你可以尝试使用这个库gifuct-js https://github.com/matt-way/gifuct-js.

主要用途parseGIF(), then decompressFrames()获取每个具有属性的帧数组delay:显示帧的时间量。因此,您可以将所有帧延迟相加,以获得 GIF 图像的总持续时间。

使用示例 - 来自其 Github 页面的修改后的代码示例:

import { parseGIF, decompressFrames } from 'gifuct-js'

var oReq = new XMLHttpRequest();
oReq.open("GET", gifURL, true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
    var arrayBuffer = oReq.response; // Note: not oReq.responseText
    if (arrayBuffer) {
        var gif = parseGIF(arrayBuffer);
        var frames = decompressFrames(gif, true);
        // do something with the frame data

        // get total time in ms
        var totalTime = frames
            .map(frame => frame.delay)
            .reduce((a, b) => a + b);
    }
};

oReq.send(null);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 JavaScript 中获取 gif 图像的持续时间 的相关文章

  • 使用Javascript自动打开弹出新窗口[重复]

    这个问题在这里已经有答案了 如何使用Javascript加载页面时打开弹出新窗口 我希望 当网站加载时 它会自动打开弹出新窗口 我使用以下内容 不行 尝试这个
  • Javascript图像编辑插件

    在哪里可以找到 Javascript 或 jQuery 图像编辑器插件 用户可以单击图像进行编辑 并且该插件允许他们进行裁剪 调整大小 旋转 翻转等 Pixastic http pixastic com lib 不再活跃 和CamanJS
  • 选择多选选项最多 2 个

    我正在对不同主题使用多重选择 我想将选择限制为最多 2 个 并且如果用户取消选择 则以相同的方式禁用其他选项 同样 该选项必须可供用户使用
  • 元素存在之前的html5音频绑定时间更新

    我试图从音频标签绑定 timeupdate 事件 该标签尚不存在 我习惯这样做 body on click selector function e 我用音频标签尝试了这个 body on timeupdate audioPlayerJS a
  • 在 ES5 中创建自定义元素 v1,而不是 ES6

    现在 如果您严格遵循自定义元素规范 v1 https html spec whatwg org multipage custom elements html custom elements 无法在不支持类的浏览器中使用自定义元素 有没有办法
  • 使用ajax发送表单数据

    我想用 ajax 以表单形式发送所有输入 我有一个这样的表单
  • 在 JavaScript 中计算不包括周末和节假日的天数

    我正在尝试编写一个代码 其中将计算总天数 不包括周末和自定义假期 我通过 stackoverflow 和 adobe 论坛进行搜索以找到解决方案 并提供了以下代码 如果公共假期恰逢工作日 周六至周三 则不计算在内 我的问题是 如果公共假期落
  • 在设置后用 Javascript 替换 'var' css 属性

    我有一个元素 其上设置了 var 属性 如下所示 div class divwithbackground div CSS divwithbackground after background image var page header se
  • React 无法识别 DOM 元素上的 `isActive` 属性 - styled-components

    我有以下内容svg我传递道具的组件 import React from react export default props gt
  • 如何使用 JavaScript 压缩文件?

    有没有办法使用 JavaScript 来压缩文件 例如 在雅虎邮件中 当您选择下载电子邮件中的所有附件时 它会被压缩并下载到单个 zip 文件中 JavaScript 能够做到这一点吗 如果是这样 请提供一个编码示例 我发现这个图书馆叫js
  • 如何格式化折线图谷歌图表材料上的轴?

    我在格式化材料图表的轴时遇到问题 Using classic line chart if I would like to format my vertical axis with a dollar sign I would do vAxes
  • 在 Python 中倾斜数组

    我有一个 2D 数组 我将使用它保存为灰度图像scipy misc toimage 在此之前 我想将图像倾斜给定角度 像这样进行插值scipy ndimage interpolation rotate 上图只是为了说明倾斜过程 我知道我必须
  • Swift 5 MacOS 图像调整大小内存问题

    我是使用 Swift 进行 Mac OS 应用程序开发的新手 但我尝试制作简单的 ImageResizer 应用程序 我必须调整 50k 图像的大小 10个小时后 内存已增加到近120GB 我以为 Swift 也有垃圾收集器 为什么它可以增
  • 如何在没有 jQuery 或延迟加载的情况下推迟背景图像

    根据帕特里克 塞克斯顿tutorial https varvy com pagespeed defer images html 我想以与这里相同的方式推迟背景图像img img src data image png base64 R0lGO
  • React setState回调返回值

    我是 React 新手 我希望实现这种流程 set the state execute a function f an async one which returns a promise set the state again return
  • axios 如何将 blob 与 arraybuffer 作为响应类型处理?

    我正在下载一个 zip 文件axios https www npmjs com package axios 为了进一步处理 我需要获取已下载的 原始 数据 据我所知 Javascript 有两种类型 Blob 和 Arraybuffers
  • Python 中的 Firebase 身份验证时出现 KeyError:“databaseURL”

    相信你做得很好 我是 firebase 的新手 正在尝试进行用户身份验证 我已经安装了pyrebase4并在firebase控制台上创建了一个项目 我还启用了使用 电子邮件和密码 登录并尝试连接我的应用程序 下面是我正在尝试的代码 impo
  • JavaScript 中的安全数据

    我必须为 Web 测试创建生成器 使用 HTML 和 JavaScript 测试必须离线和在线进行 正确答案和分数评估必须是生成的测试的一部分 最终用户的分数仅发送到服务器 无法在服务器上进行评估 并且服务器对问题一无所知 它只保存最终分数
  • 调用一个从 AngularJS 表达式本地计算值的函数是不是很糟糕?

    我读了关于使用范围的一些 AngularJS 陷阱的文章 http thenittygritty co angularjs pitfalls using scopes 并且它指出您不应在表达式中使用函数 并且我知道每次框架认为需要时都可能会
  • 如何将函数导入到Vue组件中?

    我正在尝试将单个函数导入到我的 Vue 组件中 我为我的函数创建了一个单独的 js 文件 randomId js exports randomId gt My function 在我的 Vue 组件中 我导入了 Random js let

随机推荐

  • 将名字和姓氏添加到 Django-Registration

    我使用的是默认的Djangoregistration 版本 0 8 在我的项目中 用户只需输入他们的用户名 电子邮件和密码 但是 我希望用户也在注册页面上输入他们的名字和姓氏 我怎样才能轻松做到这一点 您可以做的是覆盖默认的 UserReg
  • numpy reshape 是如何工作的?

    我有一个 numpy 数组中的数据 a np arange 100 a a reshape 20 5 当我打字时 a 10 它返回 array 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1
  • 为什么 sscanf() 不将 CSV 文件中的行读入数组?

    我正在尝试将 CSV 文件中的整数读入二维数组 这是我的代码 FILE fp fopen argv 1 r int counter 0 char line 50 while fgets line 50 fp counter int arry
  • msscript.ocx 从哪里安装

    我在我的应用程序中使用 msscript ocx 它是 Windows 的 ActiveX 脚本主机 尽管我希望能够对高度可定制的 XP 嵌入式 XPe 使用相同的功能 1 我想知道在XPe上是否可以选择性安装msscript ocx 2
  • 为什么我的 Android 应用程序(具有 root 权限)无法访问 /dev/input?

    我的应用程序针对已root的Android设备 它具有root权限并且需要访问该目录 dev input 但为什么它会抛出opendir failed Permission denied even dev input已经是chmod to
  • 读取 bash 脚本中 psql 返回的错误

    我需要在从 bash 脚本运行 psql 时检查错误 这是我们如何在脚本中运行的示例 return value psql X POSTGRES CONNECTION STRING f build table sql w b A q t ps
  • jQuery + JSONP + 雅虎查询语言

    我想从外部来源获取实时汇率 所以我找到了这个很棒的网络服务 该服务运行得非常出色 唯一的缺点是它不提供 JSONP 结果 仅提供 XML 因此 在尝试使用 jQuery ajax 使用此 Web 服务时 我们遇到了跨浏览器问题 所以我发现雅
  • 扩展 Mandelbrot 生成 Julia

    在一个项目上工作 要求我使用相同的代码 请注意在同一个文件中生成曼德尔布罗集和朱莉娅集 我有一个工作曼德尔布罗集 但可以看到如何使用相同的代码扩展到朱莉娅集 也许我没有理解之间的区别 谁能详细说明一下 import numpy as np
  • src 和 data-src 属性之间有哪些区别?

    使用两者有何区别和后果 好与坏 data src or src的属性img标签 我可以使用两者获得相同的结果吗 如果是这样 什么时候应该使用它们 属性src and data src没有任何共同点 除了它们都被 HTML5 CR 允许并且它
  • 相机视图上的水印图像偏移

    我创建了一个覆盖图像用作水印 但图像发生了偏移 我已经将代码放在下面 该代码基于 Ivan Karpan 的这篇文章 iPhone 相机视图上的实时水印图像 https stackoverflow com questions 2076456
  • Ruby on Rails:如何将文件呈现为纯文本(没有任何 HTML)

    如何在 Rails 中将文件渲染为纯文本 文本 不渲染任何 HTML 我试过了 render file path to file layout false and render file path to file content type
  • ascx 的视图状态在回发之间丢失

    在我的 ASP NET 应用程序中 我使用 LoadControl 动态加载 ascx 使用以下模式 var ctrl LoadControl path to control ascx ControlType ctrl SomeProper
  • 对象销毁对于加密目的可靠吗?

    作为后续这个问题 https stackoverflow com questions 57515813 我正在想象一个存储敏感数据 例如加密密钥 的类 为了简化事情 假设不涉及继承 struct Credential std array
  • awk 有条件地组合多行

    我想将多行不同长度的值合并到一行 如果它们与 ID 匹配 输入示例是 ID Value a 1 49 a 2 75 b 1 120 b 2 150 b 3 211 c 1 289 d 1 301 d 2 322 所需的输出示例是 ID Va
  • AngularJS 中的 IE11 访问被拒绝

    每个开发管道都有 2 个部分 首先努力工作并开发应用程序 其次要更加努力 让它兼容伟大的IE 我们有一个AngularJS v1 3 13 没有任何服务器端代码开发的应用程序Webstorm 我们在做REST致电服务 我们的应用程序在 Ch
  • 如何访问 json 数据中的嵌套数组

    我想访问leagueTable此数组内JSON数据 缩短的JSON看起来像这样 每个数组并不显示所有数据以保存滚动 如何访问 leagueTable 数组中的值 data fixtures fixtureId 4950418 fixture
  • 如何在linux上设置android SDK进行命令行开发?

    我正在尝试设置 android SDK 在 Linux Ubuntu 9 10 的命令行上开发一个简单的程序 我尝试过 eclipse 但它在 Ubuntu 上运行有问题 所以我放弃了 这是我到目前为止所做的 从下载 android sdk
  • TMP环境变量发生了什么?

    我总是听说在 UNIX 计算机上查找临时文件夹的正确方法是查看 TMP 环境变量 当编写适用于 Windows 和 Linux 的代码时 我会检查 TEMP 和 TMP 今天 我发现我的 Ubuntu 安装根本没有该环境变量 我知道您似乎总
  • SQL SERVER (express) 中的连接池 - 推荐数量?

    对于我使用连接池的每个应用程序 是否有建议的连接量 我的应用程序在 同一 服务器上使用 ASP NET 和 C 来对抗 sql Express 我有 5 个应用程序正在运行 它们没有被频繁使用 所有连接都打开和关闭 所以我正在考虑将每个应用
  • 如何在 JavaScript 中获取 gif 图像的持续时间

    我只尝试显示一次 gif 所以我使用这段代码来实现这一点 var ui img document getElementById ui image ui img hidden false setTimeout function ui img