search

benwiley4000 / react-gif-player

📽 A GIF component that moves when YOU want it to!
https://benwiley4000.github.io/react-gif-player/
MIT License
94 stars 32 forks source link

Grab first frame more quickly with GIF stream #13

Open benwiley4000 opened 7 years ago

benwiley4000 commented 7 years ago

It might be possible to automatically turn the first GIF frame into a data url with the help of gif-stream and pixel-stream - we could write the image data after the first frame has loaded to a canvas element, maybe with save-pixels, and extract the data url.

olessavluk commented 5 years ago

Should be possible to use this method to get first frame from gif - https://stackoverflow.com/a/4276742/3772379

benwiley4000 commented 5 years ago

I already have a module I wrote for getting the first frame from a GIF: https://github.com/benwiley4000/gif-frames

The problem is that get-pixels doesn't fire its callback until the whole image is loaded. I wanted to stream the first frame then cut off the rest of the stream.

Looking at this again I think it's possible with this web-streams-node module which could let me convert that gif-stream into a WHATWG web stream, so I can pipe the fetch() body stream into it. I might try it out!

benwiley4000 commented 5 years ago

I've got a proof-of-concept working here: https://codesandbox.io/embed/n15vp7r7wm

Need to figure out the best way to add that to the library... preferably not adding on too many kilobytes. It might be best to make it an optional add-on module.