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的原始长度存储为每个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

我认为问题在于，在内循环中，您在使用它之后永远不会重置$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
}

调整大小问题来自resize函数，其中宽度现在设置不当，因为每个块的基本宽度不再是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;
     });

试图优化像素读取和输出功能

2 个答案: