背景

前端每天都要去看调试工具的网络请求，但对于媒体类型的请求，请求回来的数据对我来说一直都像黑盒一样的存在。所以为了了解媒体文件内容的含义，为了了解如何从文件内容读出画面数据，做了一个gif播放组件, 可以控制gif倒放或倍速播放。通过重构 lifgif-js 实现。

效果

体验地址， 工具地址

工作原理

1. 使用ajax获取图片数据。
2. 使用js对图片解码。
3. 绘制到canvas上。

使用示例

import libgif from '@zaqmjuop/libgif'

const controls = libgif({
  gif: document.querySelector('canvas[id="example"]'),
  src:'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/200px-Rotating_earth_%28large%29.gif'
})

如果对你有帮助，请在github地址给个Star🌟 谢谢。