php - 无法获得一 block div 标签来正确安排自己

Question

我正在使用这段代码(主要是从此处的 PHP.net 评论复制 - http://www.php.net/manual/en/function.imagecolorat.php)来读入图片，逐像素扫描并将图片输出为 div 标签 block 表样时尚。这是我想出的……

<?php 
$img = imagecreatefrompng("image1.png"); 

$w = imagesx($img); 
$h = imagesy($img); 

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;
      $hex = "#".str_repeat("0",2-strlen(dechex($r))).dechex($r). 
              str_repeat("0",2-strlen(dechex($g))).dechex($g). 
              str_repeat("0",2-strlen(dechex($b))).dechex($b);
     echo "<div style='background: {$hex}; height: 5px; width: 5px; display: inline;'></div>\r\n";
     /*
        echo "#".str_repeat("0",2-strlen(dechex($r))).dechex($r). 
              str_repeat("0",2-strlen(dechex($g))).dechex($g). 
              str_repeat("0",2-strlen(dechex($b))).dechex($b).","; 
     */ 
  } 
  echo "<br />\r\n"; 
} 
?>

我尝试过使用“block”、“inline”、“inline-block”和“inline-table”作为 div 的显示属性，但它们似乎都有自己的问题。我要么什么也得不到，像素列在垂直线上直线向下，或者 div 在正方形中正确排列，但它们之间有间距(这不应该发生，因为我正在使用 reset.css 来消除所有填充、间距等)。

另外，这个特殊函数似乎没有考虑到透明度。我正在使用的图片中有透明像素，它似乎将它们输出为浅蓝色。

链接 - http://schnell.dreamhosters.com/folio/pixelread.php

Answer 1

嗯，这很有趣。我不能保证该函数考虑了透明度，但 HTML 定位问题应该很容易解决。

我认为最好的解决方案是创建一个与图像一样宽的容器，然后将所有 div float 到左边。有点像

echo "<div style='width: ".($imagesx * 5)."px;' class='outer'>";

这将提供您需要的宽度(如果我正确理解代码)。然后你只需使用这个 CSS:

.outer div {
  width: 5px;
  height: 5px;
  float: left;
}

这样做将有效地减少您必须生成的冗余内联样式的数量。哦，并删除每行之后生成的 br。

至于alpha透明度问题，相信这条评论对你应该有帮助:http://www.php.net/manual/en/function.imagecolorat.php#79116

---

编辑

您忘记了 width: 65px 上的 px!正在生成。

<div style='width: 65; background: #eeeeee; margin: 0px auto;'>

还有，漂亮的马里奥。 ;)