mattdesl/gifenc

occasional output issues

konsumer opened this issue · 3 comments

I am making a tool for converting gifs to code for use in C/python, and the code it generates is good, as well as displaying it, inline.

I thought it would be helpful to be able to download a gif to save the tweaks a user makes, but it seems like it has some interference with a few images. It works great with most images, but here is an example of it failing:

Here is original:
voltron

and here is the gif that is output by gifenc, after my dithering & processing (notice what looks kinda like lightning when voltrons are dancing)
voltron_dither

The array of canvas-contexts otherwise works fine, and it displays correctly on the preview-canvas, it's just the outputted gif that is messed up. Here is video of the canvas not having that problem:

Screen.Recording.2024-05-25.at.8.36.58.PM.mov

Here is the code I use gifenc with, to download:

const downloadURL = (data, fileName) => {
  const a = document.createElement('a')
  a.href = data
  a.download = fileName
  document.body.appendChild(a)
  a.style.display = 'none'
  a.click()
  a.remove()
}

export function download(frames, filename='anim.gif', delay=500, repeat=0) {
  const gif = GIFEncoder()

  const palette = [
    [0, 0, 0],
    [255, 255, 255]
  ]

  for (const frame of frames) {
    const { data, width, height } = frame.getImageData(0, 0, frame.canvas.width, frame.canvas.height)
    gif.writeFrame(applyPalette(data, palette), width, height, { palette, delay })
  }

  gif.finish()
  const url = window.URL.createObjectURL(new Blob([gif.bytes()]))
  downloadURL(url, filename)
  window.URL.revokeObjectURL(url)
}

I assume the issue is something I am not doing with dispose or something. Any ideas would be very helpful.

Thanks. Seems like it should work fine, so I assume there must be a bug somewhere. I’ll have a look during the week but for now you could test with a different format like rgb444 to see if that changes anything.

Is there a way I can reproduce the error on my own machine?

Is there a way I can reproduce the error on my own machine?

@mattdesl Easiest is maybe to go to my web-app and feed it the original gif above.

Upon further testing, I see the same issue with a real OLED and that particular Voltron gif, so I think the problem must be in my code. I am guessing I need to fill in some transparency, and maybe the images that are working right just don't have any.

I will close this issue. Thanks for taking a look, and making this awesome lib.