split images into pixel divs

Question

I was thinking about how to make some cool image effects in browser, and I know it may be a little late to be heading down this train of thought with HTML5/CSS3 up and coming, but I was wondering what the inherent limitations / problem points there would be with implementing a library that essentially created divs each to hold a pixel of an image using background offsets. It is clear that this will create many divs, but if you wanted to work with only rows or columns on a small image it doesn't seem like this would be that unreasonable. With browser caching images, a request wouldn't have to be made for every segment, and the only other potential problem I can see is the processing of the positioning, which I imagine won't be a problem. I don't really have anything at this point to stop from going forward playing with images like this (so I will!), but I'm curious if there is anything that I am overlooking here that would make the idea unfeasible, and especially anything tricky I should be aware of. Thanks :)

Edit: Tried this, and it seems like there is either an inherent problem or a problem in my code (sorry it sucks, was just playing around), use with any image and you will see the difference.

var lpath = "images/logo.png"
window.onload = function(){
    console.log('test');
    $('body').append("<img id='logo' style='display:none' src="+lpath+">");
    console.log($('#logo').width());
    console.log('hello');
    var logod = $('<div></div>')
                                .addClass('i')
                                .width($('#logo').width())
                                .height($('#logo').height())
                                .css('background-image','url('+lpath+')')
    $('body').append(logod);
    for(var i = 1; i <= $('#logo').height(); i++){
        var cons = $("<div></div>")
                                .height(1)
                                .width($('#logo').width())
                                .css('background','url('+$('#logo').attr('src')+') no-repeat 0 ' + (-i));
        $('body').append(cons);
    }                                                                 
 }

enter image description here

Image on the top is just an , image on the bottom is a series of 1px tall divs.

PS Has to do with browser zoom.

@Orbit fair enough. I suppose it's possible, albeit relatively slow and memory-consuming (but you are already aware of that). However, the core problem is how to initialize the thing with real image data? I can't see a way of doing this without ` — Pekka, Mar 10 '11 at 23:06
@Orbit ahh, I see. So you don't want to manipulate specific pixels, but larger rectangular areas. Why not - should work! — Pekka, Mar 10 '11 at 23:10
@Pekka for effects like fade top > bottom etc yes, but was also thinking about scatter , etc. — Brandon Frohbieter, Mar 10 '11 at 23:16
@Orbit: Maybe like some of the [effects here](http://nivo.dev7studios.com/demos/)? — thirtydot, Mar 10 '11 at 23:19
@thirtydot, found both the anti-aliasing wiki read and the link to raphael both great, even if they were only 1/2 applicable, but I am sure the more I try to do this, the more the anti-aliasing will come into play. And yes, sort of like that cross fade (implemented by creating separate divs?), fairly easy for the slide to do a push type thing. — Brandon Frohbieter, Mar 10 '11 at 23:23
@Orbit: I'm glad the links were useful. I felt I should delete that answer because it doesn't answer the question you asked. I could undelete if you'd like. I wouldn't say this normally, but as you're the self-titled "googlebot", you should just search for these effects. I'd imagine someone, somewhere has already done the kind of thing you're looking for. For instance: http://docs.jquery.com/UI/Effects/Explode — thirtydot, Mar 10 '11 at 23:26
@thirtydot - The jQuery UI library and I are already good friends, I'm asking here about potential traps and downfalls for code that I am going to write for the sake of it, it's not for work or to integrate with anything important. I don't need a library, I want to make one — Brandon Frohbieter, Mar 10 '11 at 23:39
Oh, and RE googlebot remark - I write plenty of stunning and complex code to rep up, see http://stackoverflow.com/questions/5206581/ — Brandon Frohbieter, Mar 10 '11 at 23:42
@Orbit: I see. Well, I can't think of anything that hasn't already been said. Good luck! Edit: I only mentioned "googlebot" because you have it in your own profile! You can have your +1, that's a good answer. — thirtydot, Mar 10 '11 at 23:46
@Thirtydot thanks, you'll probably see a question soon - "Why my browser not move 1oooooo divs at onse?!?!?" — Brandon Frohbieter, Mar 10 '11 at 23:58
@Pekka @Thirtydot not sure if I should open a new question for this, but it doesn't seem to work. I took the height of an image and mapped the lines to divs, and it ended up squishing it down. any ideas why this could be? — Brandon Frohbieter, Mar 11 '11 at 00:31

score 1 · Answer 1 · answered Mar 10 '11 at 23:04

1

It could be very slow. If you are clever you can split only as much as necessary, so there are fewer divs for the browser to deal with. I'm sure you could do it though and it might be fun.

answered Mar 10 '11 at 23:04

river

1,508
1
12
17

split images into pixel divs

1 Answers1