JavaScript純前端實現(xiàn)在線GIF壓縮

更新時間：2024年03月06日 08:42:09 作者：可樂雞翅kele

這篇文章主要為大家詳細介紹了如何利用JavaScript純前端實現(xiàn)在線GIF壓縮工具,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

前言

原因是我在寫公眾號文章的時候，公眾號編輯器只能上傳最大10M的GIF，而我剛好需要上傳的GIF超過了這個閾值。

所以我就隨便搜了一個壓縮GIF的工具，有一些壓縮完了下載需要付費，有一些不付費就只能壓縮低于某個閾值的文件。

不過也能理解吧，畢竟別人也是需要賺錢的，這種文件的處理如果放在服務端做，那必然是要耗費不少資源的，如果放在純前端做，又不能保證文件處理的速度。

然后我就想著GIF壓縮應該不難吧，應該有現(xiàn)成的工具庫吧，于是我就開始動手去實現(xiàn)一個GIF壓縮工具。這里我很執(zhí)拗地要去實現(xiàn)一個純客戶端的GIF壓縮（也不知道為啥我這么執(zhí)拗。）

初探GIF壓縮

我們都知道GIF是一張張靜態(tài)的圖片播放形成的動圖，所以我一開始就想著，如果我有一個庫，能幫我把GIF所有幀都抽取出來，然后我對所有幀的圖片進行一個縮放的有損壓縮，壓縮完之后再把所有圖片合成一個新的GIF，那么我不就把GIF給壓縮了么。

然后我就找到了gif.js和omggif.js這兩個庫：

omggif負責解析GIF，獲取GIF的每一幀圖像
把獲取到的每一幀圖像進行處理了之后，使用gif.js合成GIF

那么可以寫出下面的代碼，以下的代碼就是一個分離GIF幀+合成GIF的代碼，還沒有加上壓縮每一幀的邏輯：

fetch("/test.gif")
  .then((response) => response.arrayBuffer())
  .then((buffer) => {
    // 用omggif解析GIF
    let reader = new omggif.GifReader(new Uint8Array(buffer));

    // 創(chuàng)建新的gif.js實例
    let gif = new GIF({
      workers: 2,
      quality: 5,
      width: reader.width,
      height: reader.height,
    });

    const width = reader.width;
    const height = reader.height;

    // 創(chuàng)建canvas元素
    const imgs = [];
    // 遍歷所有的frames，并添加到gif.js實例中
    for (let i = 0; i < reader.numFrames(); i++) {
      let frameInfo = reader.frameInfo(i);
      let canvas = document.createElement("canvas");
      canvas.width = width;
      canvas.height = height;
      let ctx = canvas.getContext("2d", { willReadFrequently: true });
      let imageData = ctx.createImageData(width, height);
      reader.decodeAndBlitFrameRGBA(i, imageData.data);
      ctx.putImageData(imageData, 0, 0);
      gif.addFrame(ctx, { delay: frameInfo.delay });
      imgs.push(canvas.toDataURL());
    }

    //預覽分離出來的幀
    const div = document.createElement("div");
    imgs.forEach((url) => {
      const img = document.createElement("img");
      img.src = url;
      div.appendChild(img);
    });
    document.body.appendChild(div);

    // 生成GIF并下載
    gif.on("finished", function (blob) {
      console.log("finish");
      let url = URL.createObjectURL(blob);
      document.querySelector("#img").src = url;
      const a = document.createElement("a");
      a.download = true;
      a.href = url;
      a.click();
    });

    gif.render();
  });

但是我分離幀之后發(fā)現(xiàn)，分離出來的幀相當奇怪：

而且合并之后的GIF感覺完全被破壞掉了，我不清楚是不是我的這種思路本身就是不可行的，還是說這兩個庫不能這么用。是不是我這樣做了之后導致描述GIF的信息丟了？（比如調(diào)色盤或者其他的一些全局信息，評論區(qū)有大神可以指導一下么）

這種方式不可行之后，我又嘗試了一下別的方式。這一次我不再寄希望于純js實現(xiàn)的庫，而是往wasm方向去探索。

然后我嘗試使用Rust去解析GIF，并返回所有解析后的圖片給前端，前端再去做有損壓縮，但這一做法耗時太長，也不是成功的嘗試，所以代碼就不放出來了。

接著我就想到了ffmpeg，我知道它有壓縮GIF的功能，而且他也有成熟的wasm版本，可以便捷地在前端引入使用，但是它壓縮后近10M的體積依舊讓人望而生畏。

gifsicle

在繼續(xù)搜索GIF壓縮等關鍵詞時，發(fā)現(xiàn)了gifsicle這個庫。它是一個用于處理GIF圖像的命令行工具和庫，提供了很多功能包括創(chuàng)建、編輯、優(yōu)化和調(diào)整GIF。

與ffmpeg對比起來，它是一個更專注于GIF處理的庫，所以體積會比ffmpeg肯定小不少，所以我就想著能不能弄一個它的wasm版本移植到瀏覽器中使用。

后面還真讓我找到了它對應的wasm版本，具體鏈接可以查看：gifsicle-wasm-browse，這個庫GZip壓縮之后只有150K左右，完全不用擔心體積問題。

使用gifsicle的時候，常常使用如下的手段去減少GIF的體積：

-O參數(shù)：

O1：該選項對應于輕度優(yōu)化，它會執(zhí)行一些基本的優(yōu)化步驟，刪除無用的圖像數(shù)據(jù)和元數(shù)據(jù)，以減小文件大小。這個級別的優(yōu)化通常執(zhí)行較快，但可能不會最大限度地減小文件大小。
O2：中度優(yōu)化比輕度優(yōu)化更深入，它可能會花費更多的時間來尋找更多的優(yōu)化機會。這通常會導致更好的壓縮比和更小的文件大小。
O3：最大優(yōu)化級別會執(zhí)行最深入的優(yōu)化，可能需要更多的時間來完成，但通常會實現(xiàn)最大的文件大小減小。這個級別的優(yōu)化可能對CPU和內(nèi)存的需求更高。

--loosy：

--lossy 會減少圖像中使用的顏色數(shù)量，從而減小顏色表的大小。這會導致顏色的近似和失真，因為原始的顏色信息會被近似為顏色表中的顏色。
高 --lossy 程度下，一些微小的圖像細節(jié)可能會被去除，以進一步減小文件大小。這可能導致圖像的一些細節(jié)在視覺上的損失

減少顏色數(shù)：

GIF中每個像素可以使用圖像調(diào)色板中的一種顏色，而顏色數(shù)量表示這些不同顏色的總數(shù)。GIF使用的顏色調(diào)色板通常是8位色，允許最多256種不同的顏色。
減少GIF的顏色數(shù)量可以降低圖像的文件大小，因為圖像中使用的顏色越少，每個像素的顏色信息所需的位數(shù)就越少。然而，減少顏色數(shù)量也可能導致圖像的視覺質(zhì)量下降，尤其是對于包含大量顏色細節(jié)的圖像。

刪除注釋和元數(shù)據(jù)

裁剪和縮小：最直觀的壓縮手段，屬于有損壓縮

調(diào)整幀速率：相當于減少組成這個GIF文件的圖片數(shù)量，也是有損壓縮

具體實現(xiàn)

首先安裝gifsicle-wasm-browser這個包，然后簡單搭建一個表單如下：

gifsicle的具體文檔，可以點擊這里查看。

在前端中可以參照以下方式來使用gifsicle：

  gifsicle
    .run({
      input: [
        {
          file: buffer,
          name: "input.gif",
        },
      ],
      command: [command],
    })
    .then(async (res) => {

    });

在GIF的壓縮過程中，常常會把多種壓縮方式結(jié)合起來使用。如果單純的想壓縮GIF的體積而不考慮GIF的質(zhì)量，那就直接使用縮放進行有損壓縮就好了；如果想保留GIF的質(zhì)量的同時壓縮GIF的體積，那還是需要多方參數(shù)的組合嘗試。

壓縮前的圖像：