前端实现 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;
    
    	 // 如果序号超出了帧数，重置为 0
        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;
          }
        });
    }
   

完整代码

<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