JavaScript前端实现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(url).then((response) => decodeImage(response.body));

imageDecoder = new ImageDecoder({ data: imageByteStream, type: "image/gif" });
imageDecoder.decode({ frameIndex: imageIndex }).then(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>