將 canvas 保存為 gif 時無法制作透明背景

Question

我正在使用非常方便的 javascript canvas 從這里轉換為 gif 腳本： https://github.com/antimatter15/jsgif

但我似乎無法讓透明背景工作。 它剛出來是黑色的。

HTML：

<canvas id="canvas" width="960" height="540" />

Javascript：

const canvas = document.getElementById("canvas"); // get canvas
const context = canvas.getContext('2d') //get context


ctx.fillStyle = "#000000"; // set bg color to black
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height) // fill the background


var encoder =  new window.GIFEncoder()
encoder.setRepeat(0);

encoder.setQuality(200)
encoder.setTransparent(0x000000) // set black to be transparent
        
encoder.start();
       
encoder.setDelay(delay);
encoder.addFrame(ctx);

encoder.finish();
encoder.download("download.gif");

但結果只是一個黑色背景而不是透明的 gif。 我究竟做錯了什么？

謝謝！

Answer 1

在挖掘了GIFEncoder.js的源代碼后，我意識到，這不是你的錯——只是有一個小錯誤。

一旦您使用 GIFEncoder 的.setTransparent()方法確定透明顏色，它就會在內部調用findClosest ，它搜索實際的調色板並嘗試在存儲的 colors 和您想要的透明顏色之間找到近似匹配有。

如果找到匹配項，它會查找另一個表 - usedEntry - 以查明圖像中是否實際使用了該顏色 - 這就是罪魁禍首。 要將索引放入表中，它會：

var index = i / 3;

外循環雖然不會以 3 的倍數遞增，所以這個除法的結果總是一個浮點數，因此沒有有效的索引。

如果您將上述內容替換為：

var index = (i + 1) / 3;

它會起作用的。

編輯

顯然，這不是 GIFEncoder 庫的唯一錯誤。 GIF 文件可以有一個共享的全局調色板和可選的本地調色板用於后續幀 - 這個庫使用。 為此，它分析每一幀的像素數據，並將使用的顏色索引（如上）寫入usedEntry數組。 不幸的是，它不會為新的分析階段重置。

如果你添加

usedEntry = [];

在analyzePixels() function 開始時，它將保持動畫的透明度。