Show HN: jsgif: A GIF player in JavaScript | Hacker News Reader

Show HN: jsgif: A GIF player in JavaScript

slbkbs.org

128 pointsshachaf24 comments

    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!

And the webpage on a gh_pages branch?

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

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/

Yes, but then the canonical URL would be on github.com.

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?

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.

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.

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.

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

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?

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

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/

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

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.

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?

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

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

This may be helpful:

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

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.

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

Neat!

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

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

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

Reply on news.ycombinator.com