Попытка оптимизировать функцию чтения и вывода пикселей

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

Вот ссылка на инструмент в его текущем виде.

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

Поворот мышью вверх, клавиши I и + / = увеличивают. Колесо мышки вниз, O и -/ _ клавиша уменьшения.Не нужно сосредотачиваться на каком-либо конкретном элементе, весь документ регистрирует нажатие клавиши / колесико мыши.

Редактирование - Спасибо за исправление этой единственной проблемы, ребята!Теперь получил новый.Если вы подойдете к инструменту и попытаетесь взорвать его, увеличив масштаб, спрайт просто развалится.Если оставить его в покое и ничего не делать, все выглядит хорошо.Также странно то, что вы не можете исправить изображение, сбросив его размер, оно будет портиться, пока вы не обновите страницу.

Edit2 - обнаружен источник проблемы.

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, основывая новую ширину на старой, без необходимости делать огромный цикл for или что-то еще, но я ничего не придумываю,работает.

Edit3 - Наконец-то все заработало!Я просто сохранил исходную длину каждого div как атрибут 'id' в каждом, а затем получил доступ к нему, когда придет время изменить размер всего.Спасибо всем, кто смирился с этим и застрял со мной, чтобы довести это до конца.Клянусь, изменение размеров будет более плавным, чем раньше!: D

Answer 1

Я считаю, что проблема заключается в том, что во внутреннем цикле вы никогда не сбросите $pixelcount после его использования. Следовательно, это просто совокупность всех пикселей строки, что означает, что каждый раз при печати вы получаете постепенно увеличивающуюся ширину.

Исходя из вашего описания, вы захотите сбросить его при переключении цветов:

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

Answer 2

Ваш код не сбрасывает количество пикселей после каждого запуска цвета. Я думаю, что вам нужно это:

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