Git Product home page Git Product logo

Comments (6)

deanm avatar deanm commented on August 24, 2024 1

I am not sure I completely followed everything, but just a few starting points that might help. The GIF format allows for (an optional) global palette, and then additionally individual frames can have a local palette. The GIFReader frame structure will basically have a pointer to whatever palette should be used (global or local), this is the frame.palette_offset. So if you're trying to base an output GIF's palette based on some input GIF's palette you might have to deal with the possibility of the input having multiple palettes (from frame local palettes). You should just be able to run through all the frames and see if all of the frame.palette_offset's (and sizes I suppose) are the same, then you know there is one single palette. Note: You did something like gifReader.global_palette_offset but global_palette_offset is not a property on gifReader, it is not exported, it is just a local variable used in the process of creating all of the frames.

I'm a bit confused by the name arrayBuffer, because if I remember correctly you cannot access an arrayBuffer's data with the array syntax ([ ]), you need to use a DataView / one of the typed arrays, so I am not actually following what you are doing with paletteSeparated since it looks from the code it will be an ArrayBuffer and so your access of paletteSeparated[i] will always returned undefined.

Otherwise you are right on realising that the GifWriter takes a palette of RGB in a single 24-bit value (versus having an array * 3 or array of arrays, etc). This is maybe a bit awkward but it's common in graphics and especially in JavaScript it reduces the number of "objects" by 1/3rd. These RGB values then get unpacked and written out into 3 bytes in GifWriter.

from omggif.

stalgiag avatar stalgiag commented on August 24, 2024 1

You can see this GIF saving code in p5.js. Though some of that is specific to our use case.

from omggif.

stalgiag avatar stalgiag commented on August 24, 2024

I realize that I don't actually have access to those variables in a useful format. I also realized that if I can reliably assume that the palette isn't local that I can get this via the first frame with:

globalPalette = arrayBuffer.slice(
      gifReader.frameInfo(0).palette_offset,
      palette_size + palette_offset
 );

If those assumptions are correct and that is the correct format for passing to GIFWriter's gopts.palette then I think I solved this problem. I am still unable to get the correct data out of GIFWriter but I think that solves the palette problem.

from omggif.

stalgiag avatar stalgiag commented on August 24, 2024

Okay the above was wrong I am now realizing but I still have no idea to extract something that I can use as a palette later when writing. I would expect this to work but it gives corrupted results:

    var gifReader = new omggif.GifReader(arrayBuffer);
    var paletteOffset = gifReader.frameInfo(0).palette_offset;
    var paletteEnd = paletteOffset + gifReader.frameInfo(0).palette_size * 3;
    var paletteSeparated = arrayBuffer.slice(paletteOffset, paletteEnd);
    var paletteCombined = [];
    for (var i = 0; i < paletteSeparated.length; i += 3) {
      var r = paletteSeparated[i] & 0xff;
      var g = paletteSeparated[i + 1] & 0xff;
      var b = paletteSeparated[i + 2] & 0xff;
      var rgb = (r << 16) | (g << 8) | b;
      paletteCombined.push(rgb);
    }

from omggif.

stalgiag avatar stalgiag commented on August 24, 2024

Ah thanks yeah I figured it out shortly after writing that mess of confusion. Thank you for the helpful reply and fast library!

from omggif.

thewayur avatar thewayur commented on August 24, 2024

Ah thanks yeah I figured it out shortly after writing that mess of confusion. Thank you for the helpful reply and fast library!

can u please provide ur final code/function?

from omggif.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.