讓 Gif 只顯示第一個 Frame

首先你需要建立一個 Image object 來載入 Gif，並且在 onload 的時候把圖片畫到 canvas 上，最後再把 canvas 轉成 base64 的格式，就可以拿到第一個 frame 的圖片了。

async function getGifFirstFrame(src) {
  return new Promise((resolve) => {
    const image = new Image();
    image.crossOrigin = "anonymous";
    image.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = image.width * window.devicePixelRatio;
      canvas.height = image.height * window.devicePixelRatio;
      const ctx = canvas.getContext("2d");
      if (ctx) {
        ctx.drawImage(
          image,
          0,
          0,
          image.width * window.devicePixelRatio,
          image.height * window.devicePixelRatio,
        );
        const imgFileData = canvas.toDataURL("image/png");
        resolve(imgFileData);
      } else {
        resolve(null);
      }
    };
    image.src = src;
  });
}

接下來就可以把 base64 的圖片放到 img 的 src 上面了。

const img = document.querySelector("img");
getGifFirstFrame(
  "https://media.giphy.com/media/3o7aDczKq9kK6AM9CE/giphy.gif",
).then((data) => {
  if (data) {
    img.src = data;
  }
});