Black color in a png is rendered as transparent in gif

[tsunamilx]

See screenshot below:

My code:

    var gif = new GIF({
      workers: 2,
      quality: 10,
      width: 900,
      height: 900,
      background: '#000',
      transparent: 'rgba(0,0,0,0)'
    });
    // 11 source images in the same size and background
    for (var i = 0; i < 11; i ++) {
      gif.addFrame(document.querySelector('#img' + i), {delay: 200});
    }
    gif.on('finished', function (blob) {
      console.log(URL.createObjectURL(blob));
      document.querySelector('.result').src = URL.createObjectURL(blob);
    });
    gif.render();

[xql279671304]

Whether you solved the problem, I also met this problem

[1j01]

@xql279671304 I think that's a separate problem, of variable transparency resulting in blackness because it's overlaid on a black background. You're supposed to be able to set the background color, which can make the GIF look better on a specific background, although this is apparently broken, or never worked. The GIF format doesn't support variable transparency, so that can't be an option, but there could be an option to generate sharp (aliased) edges with the original RGB, only quantizing the alpha to binary (one bit) based on some threshold.

@tsunamilx There's a PR to fix or work around this #77

[dafengxiang]

Has this problem been solved? I have the same problem. Can you share the core code? @xql279671304

[yyzclyang]

Has this problem been solved? I have the same problem. Can you share the core code? @xql279671304

gif 不支持透明通道，png 图片的透明像素会在这个库的处理过程中变成 rgba(0,0,0,0)，去掉透明通道，最终呈现 rgb(0,0,0)，也就是黑色。
但是这个 issues 里面的配置有这么一项 {transparent: 'rgba(0,0,0,0)'}，这一项配置的意思是将图片中像素颜色为 rgba(0,0,0,0) 的像素点变透明，同样 gif 不支持透明通道，所以变成了将像素颜色为 rgb(0,0,0) 的像素点变成透明，也就是将图片中黑色部分变成透明。