Attempting to optimize a pixel reading and outputing function

Question

$img = imagecreatefrompng("img/".$image); 
    $w = imagesx($img); 
    $h = imagesy($img); 
    $pixelcount = 0;

    echo "<div id='container' style='width: {$w}px; height: {$h}px;'>\r\n";
    for($y=0;$y<$h;$y++)    { 
        for($x=0;$x<$w;$x++)    { 
            $rgb = imagecolorat($img, $x, $y); 
            $r = ($rgb >> 16) & 0xFF; 
            $g = ($rgb >> 8) & 0xFF; 
            $b = $rgb & 0xFF;
            $alpha = (imagecolorat($img,$x,$y) & 0x7F000000) >> 24;
            if($alpha == 127)
                $newcolor = "transparent";
            else
                $newcolor = sprintf('#%02X%02X%02X', $r, $g, $b);
            if(isset($prevcolor) && strcmp($newcolor, $prevcolor) != 0)
            {
                echo "<div style='background: {$prevcolor}; height: 1px; width: {$pixelcount}px; float: left;'></div>\r\n";
                $pixelcount = 0;
            }
            $prevcolor = $newcolor;
            $pixelcount++;
        }
        echo "<div style='background: {$prevcolor}; height: 1px; width: {$pixelcount}px; float: left;'></div>\r\n";
        unset($prevcolor);
        $pixelcount = 0;
    } 
    echo "</div>\r\n";

Here's a link to the tool in its current form.

http://schnell.dreamhosters.com/folio/pixelread.php?image=link.png

Mousewheel up, I and +/= key zoom in. Mousewheel down, O and -/_ key zoom out. No need to focus on any particular element, the entire document registers a keystroke/mousewheel.

Edit - Thanks for the fix that that one problem, guys! Got a new one now though. If you go to the tool and attempt to blow it up by zooming in, the sprite just falls apart. If you leave it alone and do nothing, it looks fine. What's weird too is that you can't fix the picture by reseting the size, it will stay messed up until you refresh the page.

Edit2 - Found the source of the trouble.

function resize(width, height)
    {
        $('div#container').css('height', factor * height);
        $('div#container').css('width', factor * width);
        $('div#container > div').css('height', factor).css('width', function(i, val) { return parseInt(val * factor) + 'px'; });
        $('div#container').css('margin-top', ($(window).height() - $('div#container').height())/2 + "px");
    }

Width isn't getting multiplied by 'factor' for some reason. I'm trying to do it in such a way that jQuery does it to each and every child div, basing the new width off the old, without having to do a huge for loop or anything, but nothing I'm coming up with is working.

Edit3 - Finally got it working! I just stored the original lengths of each div as the 'id' attribute in each and then access that when it comes time to resize everything. Thanks to everyone who put up with this and stuck with me to see it through. I swear the resizing is smoother than before! :D

Answer 1

Your code isn't resetting the pixel count after each run of colour. I think you need this:

    if(isset($prevcolor) && strcmp($hex, $prevcolor) != 0) {
        echo "<div style='background: {$prevcolor}; height: 1px; width: {$pixelcount}px; float: left;'></div>\r\n";
        $pixelcount = 0;
    }