Show HN: jsgif: A GIF player in JavaScript

Show HN: jsgif: A GIF player in JavaScript(slbkbs.org)

128 points by shachaf 15 years ago | 24 comments

olalonde 15 years 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!

shachaf 15 years ago | |

OK, I put it up on GitHub. https://github.com/shachaf/jsgif

icefox 15 years 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

And on icefox.git.com:

http://icefox.github.com/git-achievements/

icefox 15 years ago | |

And the webpage on a gh_pages branch?

user24 15 years 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-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?

shachaf 15 years ago | |

This was meant as a proof-of-concept and has several big inefficiencies that could be fixed pretty easily if someone was actually going to use it for something. The UI could also be improved, and I think at least IE9 could be reasonably easy to support (though I haven't tried).

I was using XHR because an important constraint was to do everything client-side, and there's no other way that I could find to get the raw image data. If you have server-side support, though, a lot of things can be made much simpler. Is there a reason not to proxy, like crux_ suggested?

crux_ 15 years 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 15 years 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...

zcksjdn 15 years ago | |

You may be interested in this, http://www.patrick-wied.at/static/nudejs/. It might help prevent users from uploading porn. Found it through this HN post, http://news.ycombinator.com/item?id=2401083

boundlessdreamz 15 years 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 15 years 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.

ck2 15 years 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/

roryokane 15 years ago | |

The beautified source code: https://gist.github.com/901751

cont4gious 15 years 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.

icode 15 years 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 15 years 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 15 years 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

capnrefsmmat 15 years ago | |

This may be helpful:

https://developer.mozilla.org/en/Canvas_tutorial/Using_image...

runaway 15 years ago |

I made a similar Chrome plugin called GIF Scrubber: 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

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.

sedachv 15 years 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).

gojomo 15 years ago |

Neat!

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

orenbenkiki 15 years ago | |

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

s3graham 15 years 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.