前端实现 GIF 图片循环播放

前言

使用 img 加载 GIF 图片，内容只会播放一次，之后就会自动暂停；

通过定时器在一段时间后重新加载图片的方式，会导致浏览器内存不断增大，并且可能会有闪烁、卡顿的问题；

ImageDecoder

WebCodecs API 的 ImageDecoder 接口提供了一种对编码图像数据进行解包和解码的方法。

ImageDecoder 只能在 localhost 或者 https 的 tab 页中获取到

代码

1. 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
   };
   

2. 通过 fetch 获取 GIF 图片资源，传入 url

   fetch(url).then((response) => decodeImage(response.body));
   

3. decodeImage 方法对图片解码

   imageDecoder = new ImageDecoder({ data: imageByteStream, type: "image/gif" });
   imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
   

4. 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