利用ImageDecoder API实现GIF图片暂停播放

作者：百宝袋

时间：2026-10-30

本文介绍如何使用ImageDecoder API在Web开发中控制GIF动画的播放状态。通过获取图像数据并解码为帧列表，结合JavaScript事件监听，可实现鼠标悬停时暂停、移开后恢复GIF播放的高级交互效果。

文章目录

在Web开发领域，动态GIF图像是常见的视觉元素。尽管它们能增强页面的趣味性与视觉效果，但在某些场景下，用户可能需要暂停正在播放的GIF图像。

什么是ImageDecoder API

ImageDecoder API由浏览器提供，旨在JavaScript环境中解码和操作图像数据。它允许开发者以底层方式读取和处理图像数据，从而支持对图像进行多种高级操作。该API最初在Chrome 59版本中引入，目前已获得各主流浏览器的广泛支持。

如何使用ImageDecoder API暂停GIF

要实现GIF图像的暂停功能，首先需获取该图像的ImageData对象。随后，利用ImageDecoder API中的decode()方法将该对象转换为图像帧列表。最后，通过重复渲染单个帧或按需渲染多个帧，即可达成控制GIF播放的目标。

以下是使用ImageDecoder API暂停GIF的示例代码：

function pauseGif(imageElement) {
  const imageData = getImageData(imageElement);
  const frames = decodeGifFrames(imageData);
  let currentFrameIndex = 0;
  let intervalId;
  function renderFrame() {
    imageElement.src = frames[currentFrameIndex].dataUri;
    currentFrameIndex++;
    if (currentFrameIndex >= frames.length) {
      currentFrameIndex = 0;
    }
  }
  function startAnimation() {
    intervalId = setInterval(renderFrame, 100);
  }
  function stopAnimation() {
    clearInterval(intervalId);
  }
  imageElement.addEventListener('mouseover', stopAnimation);
  imageElement.addEventListener('mouseout', startAnimation);
  startAnimation();
}
function getImageData(imageElement) {
  const canvas = document.createElement('canvas');
  canvas.width = imageElement.naturalWidth;
  canvas.height = imageElement.naturalHeight;
  const context = canvas.getContext('2d');
  context.drawImage(imageElement, 0, 0);
  return context.getImageData(0, 0, canvas.width, canvas.height);
}
function decodeGifFrames(imageData) {
  const decoder = new ImageDecoder(imageData);
  const frames = [];
  while (true) {
    const { done, value } = decoder.decodeAndAdvance();
    if (done) {
      break;
    }
    frames.push({
      dataUri: `data:image/gif;base64,${btoa(value.data)}`,
      delay: value.delay
    });
  }
  return frames;
}

在此示例中，首先定义了一个名为pauseGif的函数，该函数接收一个图像元素作为参数。接着，使用getImageData()函数获取该元素的ImageData对象，并通过decodeGifFrames()函数将其转换为一组图像帧。

随后，定义了renderFrame、startAnimation和stopAnimation函数，以便在需要时重复渲染单个帧或按需渲染多个帧。

最后，在图像元素上添加了mouseover和mouseout事件侦听器，以控制动画的播放状态。当鼠标移动到图像上时，动画将停止；当鼠标移开时，动画将恢复播放。