我们要用到Gif.js这个插件

官方仓库

官方示例

个人参考demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img id="outputGif" src="" />
    <img src="./ani/1.png" alt="" />
  </body>
</html>

<script src="./gif.js"></script>

<script>
  const images = [
    // "./ani/1.png",
    // "./ani/2.png",
    // 更多PNG图片路径
  ];

  for (let index = 1; index <= 1; index++) {
    images.push(`./ani/${index}.png`);
  }

  const fps = 10; // 每秒帧数

  // 异步加载图片
  const loadImages = images.map((src) => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => resolve(img);
      img.onerror = reject;
      img.src = src;
    });
  });

  Promise.all(loadImages)
    .then((images) => {
      // 创建GIF
      const gif = new GIF({
        workers: 2, // 工作线程数
        quality: 10, // 质量，范围 1（最高）到 20（最低）
        background: "0x0000",
        transparent: "0x0000",
      });

      // 添加图片帧
      // images.forEach((img, index) => {
      //   // gif.addFrame(img, { delay: 1000 / fps });
      //   gif.addFrame(img, { delay: 1000 / fps, transparent: "0x0000" });
      // });

      images.forEach((img, index) => {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        canvas.width = img.width;
        canvas.height = img.height;

        // 首先绘制图片到canvas
        context.drawImage(img, 0, 0);

        // 获取图片的像素数据
        const imageData = context.getImageData(
          0,
          0,
          canvas.width,
          canvas.height
        );
        const data = imageData.data;

        // 红色的RGB值
        const mixRed = 79;
        const mixGreen = 83;
        const mixBlue = 215;

        for (let i = 0; i < data.length; i += 4) {
          let alpha = data[i + 3] / 255; // 获取当前像素的透明度
          if (alpha > 0 && alpha < 1) {
            // 检测半透明像素
            // 使用简单的alpha混合公式与红色混合
            data[i] = data[i] * alpha + mixRed * (1 - alpha); // R
            data[i + 1] = data[i + 1] * alpha + mixGreen * (1 - alpha); // G
            data[i + 2] = data[i + 2] * alpha + mixBlue * (1 - alpha); // B
            // 如果需要保持原始透明度，以下行可以保留或删除
            data[i + 3] = 255; // 使该像素不透明
          }
        }

        // 把修改过的图像数据放回到canvas中
        context.putImageData(imageData, 0, 0);

        // 接下来，用这个canvas作为GIF的一帧
        gif.addFrame(canvas, { delay: 1000 / fps });
      });

      // 其余的GIF创建流程...

      // 生成GIF
      gif.on("finished", function (blob) {
        document.getElementById("outputGif").src = URL.createObjectURL(blob);
      });

      // 启动GIF编码
      gif.render();
    })
    .catch((error) => {
      console.error("Error loading images:", error);
    });
</script>