7 ms·

Show HN: jsgif: A GIF player in JavaScript

128 points by shachaf 16y ago

9ec4c12949a4f3 16y ago
That's really cool. The branding made me say at first "So what? Browsers natively play gifs..." If you retitled it some how to indicate you can step through it, that would be a better step for promoting this, which is something that is really cool. I'm going to have to check your source out later if you're on github.
olalonde 16y ago
The source code is a bit of a mess, but if anyone is interested in the non-bookmarkletized code, I can upload it somewhere. How about hosting the source code on GitHub? I'd love to see how this works!
- icefox 16y ago
  And the webpage on a gh_pages branch?
- shachaf 16y ago
  OK, I put it up on GitHub. https://github.com/shachaf/jsgif https://github.com/shachaf/jsgif
  - icefox 16y ago
    To be more clear on the gh_pages idea. If you rename your master branch to gh_pages then github will automatically let you browse to it. For example one of my projects which includes a index.html just like yours on github: https://github.com/icefox/git-achievements https://github.com/icefox/git-achievements And on icefox.git.com: http://icefox.github.com/git-achievements/ http://icefox.github.com/git-achievements/
    - shachaf 15y ago
      Yes, but then the canonical URL would be on github.com.
icode 16y ago
Well done! Im looking for a png parser in javascript. I would like to load pngs with xmlhttprequest and them draw them on a canvas. Ever heard of one?
- de90 16y ago
  Why not just do something like the below when you need to do that? var img = new Image(); img.onload = function(){ //draw to canvas }; img.src = "image.png"; Could be a stupid answer, or possibly it'd be better to do it your way?( Maybe I can learn something :) )
- TimothyFitz 16y ago
  All major browsers will now do this for you, with data: urls. Take a look at the examples here: http://en.wikipedia.org/wiki/Data_URI_scheme http://en.wikipedia.org/wiki/Data_URI_scheme
- capnrefsmmat 16y ago
  This may be helpful: https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage https://developer.mozilla.org/en/Canvas_tutorial/Using_image...
cont4gious 16y ago
I like this simply for the content on the page, not necessarily the actual project (tho it's cool too). It's snarky, self-deprecating, and dryly funny.
ck2 16y ago
Some really clever work there. Add a timeline slider and it's really usable! ps. for those wanting to read the source more easily, paste the bookmarklet into http://jsbeautifier.org/ http://jsbeautifier.org/
- roryokane 16y ago
  The beautified source code: https://gist.github.com/901751 https://gist.github.com/901751
user24 16y ago
How strange. Until last month, I was running gifexplode.com, a site where you could share 'exploded' gifs - i.e. it took an animated gif and stepped over it frame-by-frame. I took the service offline last month because people were using it to store porn. I had tried finding a client-side solution in vain. The long-term plan for gifexplode was to introduce a player just like this! Soon as I get a chance, I think I'll relaunch gifexplode with your viewer. Here's the blog post about how gifexplode was born, it's quite an interesting story: http://www.puremango.co.uk/2009/08/gifexplode-community-powered-web-development/ http://www.puremango.co.uk/2009/08/gifexplode-community-powe... edit: Hmm, using XHR to fetch the gif will give me cross-domain issues unless I first mirror the image on my server. Anyone know of a way around that?
- boundlessdreamz 16y ago
  Wouldn't you be able to create an image tag dynamically and then use that? I'm not sure if you can get a callback when the image is loaded though.
  - user24 16y ago
    No; calling getImageData on an image tag with an external src will fail with a cross domain warning :( You can set up an onload handler on an image though, yeah.
- crux_ 16y ago
  Instead of mirroring, you could proxy. (Solves "storage"/"mirroring" issue; doesn't solve "nasty stuff served up through your server" issue.) In general, though, there's no way around it, except of course by restructuring gifexplode as a bookmarklet or convincing image host(s) to partner with you: They can then include the code on the pages they serve up themselves, allow XHR requests via HTML5 or flash mechanisms, or give you base64 data smuggled into a JSONP.
  - user24 16y ago
    Thanks, yeah I think proxying is the best solution. I'm still not sure if that's a route I want to go down though... The nasty stuff served through my server is what I want to avoid. Gifexplode became quite popular on 4chan you see...
gojomo 16y ago
Neat! What does pin/unpin do? (I clicked it with no obvious effect on playback.)
- orenbenkiki 16y ago
  It pins the buttons bar; if it isn't pinned, it disappears when you move the mouse outside it.
sedachv 16y ago
This is the way forward for codecs on the web. Alan Kay has previously complained about how dumbed-down the browsers are in comparison to the possibilities of mobile code, and that's now starting to become less true. The next step beyond that is to provide browser extensions for programming network protocols. One-way HTTP over NAT sucks, web-sockets do not and will not work. We're starting to come back around to the vision of the Internet in the 80s - multi-protocol, multi-host (if you're on the web, you can be a server), mobile code via bytecode (or source code), and with pervasive remote access (VNC and X11/NX).
s3graham 16y ago
Nice! I was swearing at Wikipedia's animation of a flipflop a couple days ago. Downloading and fiddling with 'convert' was substantially more annoying.
runaway 16y ago
I made a similar Chrome plugin called GIF Scrubber: https://chrome.google.com/webstore/detail/gbdacbnhlfdlllckelpdkgeklfjfgcmp https://chrome.google.com/webstore/detail/gbdacbnhlfdlllckel... It also uses a canvas element to render each frame but it does support weird disposal methods. You can see the (very sloppy) source by just viewing the source of the plugin window. You mentioned getting test images for the disposal methods and I found these to be very helpful: http://algif.sourceforge.net/#18 http://algif.sourceforge.net/#18 I'd also recommend using some kind of movie player-style control like I used and some kind of "explode" function. They both proved popular.

128 points by shachaf 16y ago

That's really cool. The branding made me say at first "So what? Browsers natively play gifs..." If you retitled it some how to indicate you can step through it, that would be a better step for promoting this, which is something that is really cool. I'm going to have to check your source out later if you're on github.

olalonde 16y ago

The source code is a bit of a mess, but if anyone is interested in the non-bookmarkletized code, I can upload it somewhere. How about hosting the source code on GitHub? I'd love to see how this works!

icefox 16y ago
And the webpage on a gh_pages branch?
shachaf 16y ago
OK, I put it up on GitHub. https://github.com/shachaf/jsgif https://github.com/shachaf/jsgif
- icefox 16y ago
  To be more clear on the gh_pages idea. If you rename your master branch to gh_pages then github will automatically let you browse to it. For example one of my projects which includes a index.html just like yours on github: https://github.com/icefox/git-achievements https://github.com/icefox/git-achievements And on icefox.git.com: http://icefox.github.com/git-achievements/ http://icefox.github.com/git-achievements/
  - shachaf 15y ago
    Yes, but then the canonical URL would be on github.com.

icode 16y ago

Well done! Im looking for a png parser in javascript. I would like to load pngs with xmlhttprequest and them draw them on a canvas. Ever heard of one?

de90 16y ago
Why not just do something like the below when you need to do that? var img = new Image(); img.onload = function(){ //draw to canvas }; img.src = "image.png"; Could be a stupid answer, or possibly it'd be better to do it your way?( Maybe I can learn something :) )
TimothyFitz 16y ago
All major browsers will now do this for you, with data: urls. Take a look at the examples here: http://en.wikipedia.org/wiki/Data_URI_scheme http://en.wikipedia.org/wiki/Data_URI_scheme
capnrefsmmat 16y ago
This may be helpful: https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage https://developer.mozilla.org/en/Canvas_tutorial/Using_image...

cont4gious 16y ago

I like this simply for the content on the page, not necessarily the actual project (tho it's cool too). It's snarky, self-deprecating, and dryly funny.

ck2 16y ago

Some really clever work there. Add a timeline slider and it's really usable! ps. for those wanting to read the source more easily, paste the bookmarklet into http://jsbeautifier.org/ http://jsbeautifier.org/

roryokane 16y ago
The beautified source code: https://gist.github.com/901751 https://gist.github.com/901751

user24 16y ago

How strange. Until last month, I was running gifexplode.com, a site where you could share 'exploded' gifs - i.e. it took an animated gif and stepped over it frame-by-frame. I took the service offline last month because people were using it to store porn. I had tried finding a client-side solution in vain. The long-term plan for gifexplode was to introduce a player just like this! Soon as I get a chance, I think I'll relaunch gifexplode with your viewer. Here's the blog post about how gifexplode was born, it's quite an interesting story: http://www.puremango.co.uk/2009/08/gifexplode-community-powered-web-development/ http://www.puremango.co.uk/2009/08/gifexplode-community-powe... edit: Hmm, using XHR to fetch the gif will give me cross-domain issues unless I first mirror the image on my server. Anyone know of a way around that?

boundlessdreamz 16y ago
Wouldn't you be able to create an image tag dynamically and then use that? I'm not sure if you can get a callback when the image is loaded though.
- user24 16y ago
  No; calling getImageData on an image tag with an external src will fail with a cross domain warning :( You can set up an onload handler on an image though, yeah.
crux_ 16y ago
Instead of mirroring, you could proxy. (Solves "storage"/"mirroring" issue; doesn't solve "nasty stuff served up through your server" issue.) In general, though, there's no way around it, except of course by restructuring gifexplode as a bookmarklet or convincing image host(s) to partner with you: They can then include the code on the pages they serve up themselves, allow XHR requests via HTML5 or flash mechanisms, or give you base64 data smuggled into a JSONP.
- user24 16y ago
  Thanks, yeah I think proxying is the best solution. I'm still not sure if that's a route I want to go down though... The nasty stuff served through my server is what I want to avoid. Gifexplode became quite popular on 4chan you see...

gojomo 16y ago

Neat! What does pin/unpin do? (I clicked it with no obvious effect on playback.)

orenbenkiki 16y ago
It pins the buttons bar; if it isn't pinned, it disappears when you move the mouse outside it.

sedachv 16y ago

This is the way forward for codecs on the web. Alan Kay has previously complained about how dumbed-down the browsers are in comparison to the possibilities of mobile code, and that's now starting to become less true. The next step beyond that is to provide browser extensions for programming network protocols. One-way HTTP over NAT sucks, web-sockets do not and will not work. We're starting to come back around to the vision of the Internet in the 80s - multi-protocol, multi-host (if you're on the web, you can be a server), mobile code via bytecode (or source code), and with pervasive remote access (VNC and X11/NX).

s3graham 16y ago

Nice! I was swearing at Wikipedia's animation of a flipflop a couple days ago. Downloading and fiddling with 'convert' was substantially more annoying.

runaway 16y ago

I made a similar Chrome plugin called GIF Scrubber: https://chrome.google.com/webstore/detail/gbdacbnhlfdlllckelpdkgeklfjfgcmp https://chrome.google.com/webstore/detail/gbdacbnhlfdlllckel... It also uses a canvas element to render each frame but it does support weird disposal methods. You can see the (very sloppy) source by just viewing the source of the plugin window. You mentioned getting test images for the disposal methods and I found these to be very helpful: http://algif.sourceforge.net/#18 http://algif.sourceforge.net/#18 I'd also recommend using some kind of movie player-style control like I used and some kind of "explode" function. They both proved popular.