Trying to optimize pixel read and output

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 is a link to the tool in its current form.

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

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

Edit - Thanks for fixing this problem guys! But there is a new one. If you go to the tool and try to explode it by increasing, the sprite will simply fall apart. If you leave him alone and do nothing, everything will be fine. What is strange is that you cannot fix the image by moving its size, it will remain corrupted until you refresh the page.

Edit2 - the source of the problem was detected.

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");
    }

- . , jQuery div, , - , .

Edit3 - - ! div "id" , , . , , . , , !: D

Answer 1

. , :

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

Answer 2

, , reset $pixelcount . , , , , , .

reset :

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

, , 1:

var cssObj = {
    'width' : factor, // This factor needs to be multiplied by the original width
    'height' : factor
};
$('div#container > div').css(cssObj);

, , :

$('div#container').css('margin-top',
    ($(window).height() - $('div#container').height())/2 + "px");
$('div#container > div').each(function() {
    $(this).data('originalWidth', $(this).width());
});

... :

$('div#container > div')
     .css('height', factor)
     .css('width', function() {
         return $(this).data('originalWidth') * factor;
     });