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

Answer 2

I believe that the problem lies in the fact that, in the inner loop, you never reset $pixelcount after you use it. Consequently, it's just an accumulation of the total pixels of the row, meaning that each time you print you get a progressively larger width.

Based on your description, you'd want to reset it when you switch colours:

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
}

The resizing problem comes from the resize function, where width is now set inappropriately because the base width of each block is no longer 1:

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

I'm sure there's a better way to do this, but you could get the width upfront:

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

...then in the resize function:

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