Show HN: Mothereffinanimatedgif

by twakefield • 14 years ago

113 27 14 years ago

paulirish4• 14 years ago

Conceived of, developed, designed, and launched in 24 hours: https://github.com/paulirish/lazyweb-requests/issues/53

Tech: HTML5 drag n drop, FileReader, a[download], GIF encoding on the client, BlobBuilder, postMessage, <input type=range> (with Firefox polyfill), appcache, transforms, etc. Oh! and the aforementioned * { box-sizing : border-box; }

pacomerh• 14 years ago

This is inspiring, a client side tool like this to compose press-kits would be nice for media O.o

runaway• 14 years ago

Incredible, I literally started making a client-side gif animator like this on Wednesday. I'm kinda glad I didn't try to finish the whole thing yet, as this is very well done. I didn't know about that cool GifEncoder.

stefankendall• 14 years ago

The 24-hour conception to launch is more impressive than the end-result, which is still pretty damned impressive.

zsherman• 14 years ago

Seriously, that's awesome.

jmah• 14 years ago

Why is Safari not supported?

paulirish4• 14 years ago

no FileReader support in Safari 5.1, which is used to enable the drag 'n drop image reading. A "Nightly WebKit" build (which is basically Nightly Safari) works though.

Behind the scenes, I'm alpha-testing a new API for mapping feature detects to browsers, so you can say what features you need and get an automated response for what browsers they'll work in. (Another lazyweb project actually): https://github.com/paulirish/lazyweb-requests/issues/39

literalusername3• 14 years ago

How about Firefox 9.0.1? It works for me in Chromium, but in Firefox the dropped image doesn't even appear on the deck.

VMG2• 14 years ago

Whenever I have to drop images on a webpage see something happen, I close the tab.

I don't have a bunch of images lying around that have the right size and that I'd feel comfortable sharing.

paulirish4• 14 years ago

It's all clientside, so there's no risk here of sharing. But it's cool, hombre.

Here's what someone else just made with it http://twitpic.com/8kyup2

VMG2• 14 years ago

I can't know that the files aren't transferred somewhere without thoroughly inspecting the source and it isn't obvious from the page that this is an offline app.

Thanks for the example. It would be great if the page itself linked to some demonstrations.

chimeracoder2• 14 years ago

I find it annoying as well, because I use a tiling window manager, which makes opening a file manager just to drag & drop annoying - not a whole lot more, but just enough that it's not really worth it.

I don't mind having that as the default, but at least give people an option to select files the old-fashioned way, and make it easy to find within ~5 or ~10 seconds of looking at the page...

Imgur does this well, if you ask me - support for drag & drop, menu, and copy/pasting URL.

literalusername3• 14 years ago

I use a tiling WM too (ratpoison), so I empathize. But you don't need to launch a file manager in order to drag and drop. You can open the image file in another browser tab, and then drag it between tabs. Hover over the destination tab for a moment to pop it forward.

Edit: It would be useful to make an addon that adds a contextual menu item for "Drop file here", which raises a file selection dialog and delivers the result to the drop zone. Essentially it would be the inverse of this: https://addons.mozilla.org/en-US/firefox/addon/ez-drag-n-dro... I don't currently have the time to write it.

wouterinho• 14 years ago

Same here, a small demo or a gallery of sorts would help a lot here.

Impressive that you did this in 24 hours, good job!

XLcommerce2• 14 years ago

Just fyi:

uses filereader. There is a bad (crashing) memory leak in Chrome.

Bug report here: http://code.google.com/p/chromium/issues/detail?id=114548...

Beware if you intend to use filreader to read many large files. Allocated mem never gets released.

Spent 2 days getting a html5 client side image resizer/uploader only to hit this killer bug.

Had to use Flash in the end, which by the way performs like a demon on binary data.

paulirish4• 14 years ago

Just threw your bug report over to our FileReader engineer. Thx for filing!

XLcommerce2• 14 years ago

No worries. I was v. disappointed when I had to fall back on flash for resizing. Felt great having client side image resize and upload (with progress) without using flash.

manveru• 14 years ago

No Opera support :(

ChrisArchitect• 14 years ago

pretty neat -- way to step up 'team behind lazyweb-request#53'

tested it out with whatever I had handy: Mother Effing Mountain Lion http://i.imgur.com/oRFRA.gif

rbrcurtis• 14 years ago

Very cool. But you need to fix it for transparent gifs; they just stack on top of each other and need to clear the previous.

Show HN: Mothereffinanimatedgif

Related Stories