Show HN: jsgif: A GIF player in JavaScript

by shachaf • 15 years ago

128 24 15 years ago

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!

icefox2• 15 years ago

And the webpage on a gh_pages branch?

shachaf3• 15 years ago

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

icefox2• 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/

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...

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.

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

user243• 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?

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.

user243• 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.

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.

user243• 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...

shachaf3• 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?

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

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.

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).

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.

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.

Show HN: jsgif: A GIF player in JavaScript

Related Stories