benjaminadk / gif-encoder-2

Encode GIFs with Node
The Unlicense
58 stars 18 forks source link

setTransparent #6

Open OKNoah opened 3 years ago

OKNoah commented 3 years ago

Looks like this method doesn't work anymore. Is that because of the new encoder?

TzunamiDev commented 3 years ago

I have the same problem. For everything else it works fine

TzunamiDev commented 3 years ago

I just found the solution.

class GIFEncoder extends EventEmitter {
  constructor(width, height, algorithm = 'neuquant', useOptimizer = false, totalFrames = 0) {
    super()
    ...

   this.transparent = null // Change null to true / 1
   ....

}

This appears to be of type boolean and you can assign the value 1 or better yet the value true

image

After writing all the above I realized that none of this is necessary, there is a simple method to change this value without having to touch the library

...
    const encoder = new GIFEncoder(width, height, 'neuquant');

    encoder.createReadStream().pipe(fs.createWriteStream('./temp/myimage.gif'));

    encoder.start();

    encoder.setTransparent(true) // Enable transparency <-----------------
    encoder.setRepeat(0);   // 0 for repeat, -1 for no-repeat
    encoder.setDelay(85);  // frame delay in ms
    encoder.setQuality(10); // image quality. 10 is default.
...
OKNoah commented 3 years ago

@MiguelArenasVillalobos brilliant, i’d been looking closely for that

pixelsage commented 3 years ago

Still an issue. Doesn't seem to allow me to define what color is actually transparent. Currently turns all black pixels transparent.

PacaPop commented 2 years ago

Same issue here! How to select the transparent color? What version of the library had this feature working? I think i'm rolling back

michaljabi commented 1 year ago

I'm using:

import GIFEncoder from 'gif-encoder-2';

/* some code skipped... */

const encoder = new GIFEncoder(width, height, 'neuquant', true, totalFrames );

CODE:

 encoder.setTransparent(true)

IS WRONG.

This is because setTransparent expect you to provide a color in hex to be marked as a transparent inside the GIF.

But here is a "catch": Method findClosest inside the lib will NOT work properly if you provide this code as e.g: #52ff5d

That is why this CODE:

 encoder.setTransparent('#52ff5d')

IS WRONG.

Explanation: this will mark color to be transparent - but it will mark RGB ( 0, 0, 0 ) - black color to be tranparent. This is because how findClosest works.

---- SOLUTION ----

CODE:

 encoder.setTransparent('0x52ff5d')

IS GOOD 👍

Explanation: this will make findClosest to calculate proper R G B values, because code inside this method looks like this:

var r = (c & 0xff0000) >> 16
var g = (c & 0x00ff00) >> 8
var b = c & 0x0000ff

where c is our "0x52ff5d"