将 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 开始时，它将保持动画的透明度。