小さな製品の写真から大きな画像のコラージュを作成するための、最終的な解決策、またはおそらくいくつかの数学/アルゴリズムを探していますか？gd / imagemagickを使用した同じサイズの写真から、正方形の方法でそれを行う方法を知っていますが、いくつかのバリエーションを組み込みたいと思います。
たとえば、一部の写真は少し背が高く、すべてが同じサイズで正方形の場合、デザインを混同するために、そのうちの1つがより多くのスペースを占めるようにしたい場合があります。それを面白く保つ。
これについて考えれば考えるほど、数式で行うのは難しくなるようです。写真の量は1枚（作業は不要）から10枚以上までさまざまである可能性があるため、考えられるすべてのシナリオに事前定義された「テンプレート」を設定しても機能しません。
回転や特殊効果は探していません。グリッド内の画像だけで、間に間隔があり、重なり合っていない可能性があります。
これを達成する方法についてのアイデアはありますか、そして実際にそこに行く準備ができているものは何もありませんか？
実際の幅/高さ（例：600x800）だけでなく、グリッドの幅/高さ（例：10x10）を使用して新しい画像を作成します。次に、画像に仮想サイズと仮想位置を与えることができます。私が何を意味するのかをあなたに理解してもらうために、段階的にそれを作ろうとします。
まず第一に、このための環境が必要です。
class imageGrid
{
private $realWidth;
private $realHeight;
private $gridWidth;
private $gridHeight;
private $image;
public function __construct($realWidth, $realHeight, $gridWidth, $gridHeight)
{
$this->realWidth = $realWidth;
$this->realHeight = $realHeight;
$this->gridWidth = $gridWidth;
$this->gridHeight = $gridHeight;
// create destination image
$this->image = imagecreatetruecolor($realWidth, $realHeight);
// set image default background
$white = imagecolorallocate($this->image, 255, 255, 255);
imagefill($this->image, 0, 0, $white);
}
public function __destruct()
{
imagedestroy($this->image);
}
public function display()
{
header("Content-type: image/png");
imagepng($this->image);
}
}
$imageGrid = new imageGrid(800, 600, 10, 10);
$imageGrid->display();
これにより、美しい白い正方形が得られます。次に、画像を表示するためのグリッドが必要です。それは想像しにくいかもしれないので、表示してみましょう。
public function demoGrid()
{
$black = imagecolorallocate($this->image, 0, 0, 0);
imagesetthickness($this->image, 3);
$cellWidth = ($this->realWidth - 1) / $this->gridWidth; // note: -1 to avoid writting
$cellHeight = ($this->realHeight - 1) / $this->gridHeight; // a pixel outside the image
for ($x = 0; ($x <= $this->gridWidth); $x++)
{
for ($y = 0; ($y <= $this->gridHeight); $y++)
{
imageline($this->image, ($x * $cellWidth), 0, ($x * $cellWidth), $this->realHeight, $black);
imageline($this->image, 0, ($y * $cellHeight), $this->realWidth, ($y * $cellHeight), $black);
}
}
}
呼び出すことによって：
$imageGrid = new imageGrid(800, 600, 10, 10);
$imageGrid->demoGrid();
$imageGrid->display();
見える ：
ここで、3x4の長方形を作成し、仮想メジャーの（2,5）に貼り付ける方法を知りたいと思います。長方形の実際のサイズと位置を取得する方法を検索する必要があります。
public function demoPutSquare($sizeW, $sizeH, $posX, $posY)
{
// Cell width
$cellWidth = $this->realWidth / $this->gridWidth;
$cellHeight = $this->realHeight / $this->gridHeight;
// Conversion of our virtual sizes/positions to real ones
$realSizeW = ($cellWidth * $sizeW);
$realSizeH = ($cellHeight * $sizeH);
$realPosX = ($cellWidth * $posX);
$realPosY = ($cellHeight * $posY);
// Getting top left and bottom right of our rectangle
$topLeftX = $realPosX;
$topLeftY = $realPosY;
$bottomRightX = $realPosX + $realSizeW;
$bottomRightY = $realPosY + $realSizeH;
// Displaying rectangle
$red = imagecolorallocate($this->image, 100, 0, 0);
imagefilledrectangle($this->image, $topLeftX, $topLeftY, $bottomRightX, $bottomRightY, $red);
}
呼び出すことによって：
$imageGrid = new imageGrid(800, 600, 10, 10);
$imageGrid->demoGrid();
$imageGrid->demoPutSquare(3, 4, 2, 5);
$imageGrid->display();
グリッドの（2,5）に配置された3x4の正方形を取得します。
もっと真剣に考えてみましょう。画像を貼り付けるための適切な対策があります。
public function putImage($img, $sizeW, $sizeH, $posX, $posY)
{
// Cell width
$cellWidth = $this->realWidth / $this->gridWidth;
$cellHeight = $this->realHeight / $this->gridHeight;
// Conversion of our virtual sizes/positions to real ones
$realSizeW = ceil($cellWidth * $sizeW);
$realSizeH = ceil($cellHeight * $sizeH);
$realPosX = ($cellWidth * $posX);
$realPosY = ($cellHeight * $posY);
// Copying the image
imagecopyresampled($this->image, $img, $realPosX, $realPosY, 0, 0, $realSizeW, $realSizeH, imagesx($img), imagesy($img));
}
呼び出すことによって：
$imageGrid = new imageGrid(800, 600, 10, 10);
$imageGrid->demoGrid();
$img = imagecreatefromjpeg("ninsuo.jpg");
$imageGrid->putImage($img, 3, 4, 2, 5);
$imageGrid->display();
我々が得る ：
そうすれば、良い場所に写真ができますが、アスペクト比が失われます。画像のサイズを正しく変更するメソッドを追加しましょう。
public function resizePreservingAspectRatio($img, $targetWidth, $targetHeight)
{
$srcWidth = imagesx($img);
$srcHeight = imagesy($img);
$srcRatio = $srcWidth / $srcHeight;
$targetRatio = $targetWidth / $targetHeight;
if (($srcWidth <= $targetWidth) && ($srcHeight <= $targetHeight))
{
$imgTargetWidth = $srcWidth;
$imgTargetHeight = $srcHeight;
}
else if ($targetRatio > $srcRatio)
{
$imgTargetWidth = (int) ($targetHeight * $srcRatio);
$imgTargetHeight = $targetHeight;
}
else
{
$imgTargetWidth = $targetWidth;
$imgTargetHeight = (int) ($targetWidth / $srcRatio);
}
$targetImg = imagecreatetruecolor($targetWidth, $targetHeight);
imagecopyresampled(
$targetImg,
$img,
($targetWidth - $imgTargetWidth) / 2, // centered
($targetHeight - $imgTargetHeight) / 2, // centered
0,
0,
$imgTargetWidth,
$imgTargetHeight,
$srcWidth,
$srcHeight
);
return $targetImg;
}
そして直前：
imagecopyresampled($this->image, $img, $realPosX, $realPosY, 0, 0, $realSizeW, $realSizeH, imagesx($img), imagesy($img));
私たちは置きます：
$img = $this->resizePreservingAspectRatio($img, $realSizeW, $realSizeH);
これは次のようになります：
私たちは今あなたの仕事をするための完全な機能クラスを持っています。
class imageGrid
{
private $realWidth;
private $realHeight;
private $gridWidth;
private $gridHeight;
private $image;
public function __construct($realWidth, $realHeight, $gridWidth, $gridHeight)
{
$this->realWidth = $realWidth;
$this->realHeight = $realHeight;
$this->gridWidth = $gridWidth;
$this->gridHeight = $gridHeight;
// create destination image
$this->image = imagecreatetruecolor($realWidth, $realHeight);
$black = imagecolorallocate($this->image, 0, 0, 0);
imagecolortransparent($this->image, $black);
}
public function __destruct()
{
imagedestroy($this->image);
}
public function display()
{
header("Content-type: image/png");
imagepng($this->image);
}
public function putImage($img, $sizeW, $sizeH, $posX, $posY)
{
// Cell width
$cellWidth = $this->realWidth / $this->gridWidth;
$cellHeight = $this->realHeight / $this->gridHeight;
// Conversion of our virtual sizes/positions to real ones
$realSizeW = ceil($cellWidth * $sizeW);
$realSizeH = ceil($cellHeight * $sizeH);
$realPosX = ($cellWidth * $posX);
$realPosY = ($cellHeight * $posY);
$img = $this->resizePreservingAspectRatio($img, $realSizeW, $realSizeH);
// Copying the image
imagecopyresampled($this->image, $img, $realPosX, $realPosY, 0, 0, $realSizeW, $realSizeH, imagesx($img), imagesy($img));
}
public function resizePreservingAspectRatio($img, $targetWidth, $targetHeight)
{
$srcWidth = imagesx($img);
$srcHeight = imagesy($img);
$srcRatio = $srcWidth / $srcHeight;
$targetRatio = $targetWidth / $targetHeight;
if (($srcWidth <= $targetWidth) && ($srcHeight <= $targetHeight))
{
$imgTargetWidth = $srcWidth;
$imgTargetHeight = $srcHeight;
}
else if ($targetRatio > $srcRatio)
{
$imgTargetWidth = (int) ($targetHeight * $srcRatio);
$imgTargetHeight = $targetHeight;
}
else
{
$imgTargetWidth = $targetWidth;
$imgTargetHeight = (int) ($targetWidth / $srcRatio);
}
$targetImg = imagecreatetruecolor($targetWidth, $targetHeight);
imagecopyresampled(
$targetImg,
$img,
($targetWidth - $imgTargetWidth) / 2, // centered
($targetHeight - $imgTargetHeight) / 2, // centered
0,
0,
$imgTargetWidth,
$imgTargetHeight,
$srcWidth,
$srcHeight
);
return $targetImg;
}
}
これで、それが機能するかどうかを確認するために遊ぶことができます：
$imageGrid = new imageGrid(800, 400, 12, 2);
$blue = imagecreatefrompng("cheers_blue.png");
$imageGrid->putImage($blue, 6, 2, 0, 0);
imagedestroy($blue);
$green = imagecreatefrompng("cheers_green.png");
$imageGrid->putImage($green, 2, 1, 6, 0);
imagedestroy($green);
$red = imagecreatefrompng("cheers_red.png");
$imageGrid->putImage($red, 2, 1, 8, 0);
imagedestroy($red);
$yellow = imagecreatefrompng("cheers_yellow.png");
$imageGrid->putImage($yellow, 2, 1, 10, 0);
imagedestroy($yellow);
$purple = imagecreatefrompng("cheers_purple.png");
$imageGrid->putImage($purple, 3, 1, 6, 1);
imagedestroy($purple);
$cyan = imagecreatefrompng("cheers_cyan.png");
$imageGrid->putImage($cyan, 3, 1, 9, 1);
imagedestroy($cyan);
$imageGrid->display();
個人的には、アスペクト比を維持しないものが好きです:-)
乾杯！（ええ、私が言うことを楽しんでください！）
最初に__constructメソッドを置き換えます：
$white = imagecolorallocate($this->image, 255, 255, 255);
imagefill($this->image, 0, 0, $white);
に ：
$transparent = imagecolorallocate($this->image, 255, 0, 255);
imagefill($this->image, 0, 0, $transparent);
imagecolortransparent($this->image, $transparent);
次に、resizePreservingAspectRatioメソッドで、直後に追加します。
$targetImg = imagecreatetruecolor($targetWidth, $targetHeight);
次の行：
$targetTransparent = imagecolorallocate($targetImg, 255, 0, 255);
imagefill($targetImg, 0, 0, $targetTransparent);
imagecolortransparent($targetImg, $targetTransparent);
さあ、いくぞ。
アプローチは次のとおりです。すべての画像をシェイクしてランダムな配列を取得し、1行あたり1〜4枚の画像を行にランダムに配置し（この値を変更できます）、各行の上位の画像を使用します各線の高さを決定します。したがって、画像が別の画像より50％高い場合、それらが同じ行にない場合は、比率を節約できます。
それは少し難しいので、このパーツの開発中はグラフィックを使用しないことにしました。そのため、多くのステップとデバッグがありますが、これは最終結果にステップバイステップで到達するのに大いに役立ちます。
すべての画像の高さとそれらの合計を取得します。
$images = array ();
$totalHeight = 0;
foreach (glob("images/*.jpg") as $jpg)
{
$img = imagecreatefromjpeg($jpg);
$images[$jpg] = imagesy($img);
$totalHeight += $images[$jpg];
imagedestroy($img);
}
echo "image list with heights:\n";
var_dump($images);
echo "total heights: {$totalHeight}\n";
私たちに与える：
image list with heights:
array(12) {
["images/image1.jpg"]=>
int(392)
["images/image10.jpg"]=>
int(640)
["images/image11.jpg"]=>
int(364)
["images/image12.jpg"]=>
int(324)
["images/image2.jpg"]=>
int(533)
["images/image3.jpg"]=>
int(360)
["images/image4.jpg"]=>
int(768)
["images/image5.jpg"]=>
int(330)
["images/image6.jpg"]=>
int(360)
["images/image7.jpg"]=>
int(338)
["images/image8.jpg"]=>
int(600)
["images/image9.jpg"]=>
int(391)
}
total heights: 5400
次に、画像配列をシャッフルして、画像のランダムな配置を取得します。キーを保持する必要がありますが、shffleは保持しないため、少しトリックする必要があります。
// Shuffle image array of files preserving keys to get random image disposition
$keys = array_keys($images);
shuffle($keys);
$images = array_merge(array_flip($keys), $images);
// Separate image names and heights, will simplify our future work
$heights = array_values($images);
$images = array_keys($images);
echo "image list:\n";
var_dump($images);
echo "image heights:\n";
var_dump($heights);
私たちに与える：
image list:
array(12) {
[0]=>
string(17) "images/image6.jpg"
[1]=>
string(17) "images/image5.jpg"
[2]=>
string(18) "images/image10.jpg"
[3]=>
string(17) "images/image2.jpg"
[4]=>
string(18) "images/image12.jpg"
[5]=>
string(17) "images/image3.jpg"
[6]=>
string(17) "images/image4.jpg"
[7]=>
string(17) "images/image1.jpg"
[8]=>
string(17) "images/image8.jpg"
[9]=>
string(17) "images/image9.jpg"
[10]=>
string(18) "images/image11.jpg"
[11]=>
string(17) "images/image7.jpg"
}
image heights:
array(12) {
[0]=>
int(360)
[1]=>
int(330)
[2]=>
int(640)
[3]=>
int(533)
[4]=>
int(324)
[5]=>
int(360)
[6]=>
int(768)
[7]=>
int(392)
[8]=>
int(600)
[9]=>
int(391)
[10]=>
int(364)
[11]=>
int(338)
}
ここで重要なのは、画像と高さの関連付けが保持されているかどうかを確認することです。
次に、画像の高さをパーセンテージに変換する必要があります。つまり、2つの画像がある場合、1つは2番目の画像より50％高いため、最初の画像の高さは全体の66％、2番目の画像は33％になります。 1。この仮想の高さは、グリッドの高さとして使用されます。
$count = count($heights);
for ($i = 0; ($i < $count); $i++)
{
$heights[$i] = ($heights[$i] * 100) / $totalHeight
}
echo "image heights in percents\n";
var_dump($heights);
echo "check : " . array_sum($heights) . " = 100\n";
結果 ：
Image heights in percents
array(12) {
[0]=>
float(6.6666666666667)
[1]=>
float(6.1111111111111)
[2]=>
float(11.851851851852)
[3]=>
float(9.8703703703704)
[4]=>
int(6)
[5]=>
float(6.6666666666667)
[6]=>
float(14.222222222222)
[7]=>
float(7.2592592592593)
[8]=>
float(11.111111111111)
[9]=>
float(7.2407407407407)
[10]=>
float(6.7407407407407)
[11]=>
float(6.2592592592593)
}
check : 100 = 100
ここで、行の配列を生成して、行ごとに配置する画像の数を確認します。この例では、1行あたり1〜4枚の画像が必要です。rand() % 4 + 1ここで、 1行に必要な数の画像を取得したいものに変更します。例：rand() % 3 + 22〜5枚の画像が表示されます。
$lines = array ();
while ($count > 0)
{
$nbImages = rand() % 4 + 1;
if (($count - $nbImages) < 0)
{
$nbImages = $count;
}
$lines[] = $nbImages;
$count -= $nbImages;
}
echo "Number of lines : " . count($lines) . "\n";
echo "images per line disposition :\n";
var_dump($lines);
結果 ：
Number of lines : 5
images per line disposition :
array(5) {
[0]=>
int(3)
[1]=>
int(1)
[2]=>
int(1)
[3]=>
int(4)
[4]=>
int(3)
}
画像を線と線の位置に関連付ける必要があります。これにより、グリッド内の画像の位置を取得するのに役立ちます。
$imageLines = array();
foreach ($lines as $key => $numberImg)
{
while ($numberImg--)
{
$imageLines[] = $key;
}
}
echo "image / line association:\n";
var_dump($imageLines);
$imagePositions = array();
foreach ($lines as $numberImg)
{
for ($i = 0; ($i < $numberImg); $i++)
{
$imagePositions[] = $i;
}
}
echo "image / position in a line association:\n";
var_dump($imagePositions);
結果 ：
image / line association:
array(12) {
[0]=>
int(0)
[1]=>
int(0)
[2]=>
int(0)
[3]=>
int(1)
[4]=>
int(2)
[5]=>
int(3)
[6]=>
int(3)
[7]=>
int(3)
[8]=>
int(3)
[9]=>
int(4)
[10]=>
int(4)
[11]=>
int(4)
}
image / position in a line association:
array(12) {
[0]=>
int(0)
[1]=>
int(1)
[2]=>
int(2)
[3]=>
int(0)
[4]=>
int(0)
[5]=>
int(0)
[6]=>
int(1)
[7]=>
int(2)
[8]=>
int(3)
[9]=>
int(0)
[10]=>
int(1)
[11]=>
int(2)
}
次に、画像の全幅を取得する必要があります。1〜4枚の画像があるため、1行あたりの画像数に関係なく、各画像の整数サイズを取得するには、4（最大値）に4〜1のすべての値を掛けます。この場合：4 * 3 * 2 * 1 = 24なので、1つの画像/行がある場合、その幅は24、2つの画像/行：24/2 = 12、3つの画像/行：24/3 = 8、4つの画像/行：24になります/ 4=6。すべて有効な整数です。
$i = 4;
$virtualWidth = 1;
while ($i)
{
$virtualWidth *= $i--;
}
echo "virtual width: {$virtualWidth}\n";
ここでは難しいことは何もありません、これは次の結果になります：
virtual width: 24
ここで、1行あたりの最高の画像に従って、各行の高さを決定する必要があります。この計算では、グリッドの高さを推定することもできます。
// Determine the virtual height needed for each line and for the whole grid
$imageHeights = array();
$index = 0;
foreach ($lines as $key => $numberImages)
{
$slice = array_slice($heights, $index, $numberImages);
echo "at line {$key}, images heights are:\n";
var_dump($slice);
$imageHeights[] = max($slice);
$index += $numberImages;
}
$virtualHeight = array_sum($imageHeights);
echo "heights for each line:\n";
var_dump($imageHeights);
echo "total height = {$virtualHeight}\n";
これにより、次のようになります。
at line 0, images heights are:
array(3) {
[0]=>
float(6.6666666666667)
[1]=>
float(6.1111111111111)
[2]=>
float(11.851851851852)
}
at line 1, images heights are:
array(1) {
[0]=>
float(9.8703703703704)
}
at line 2, images heights are:
array(1) {
[0]=>
int(6)
}
at line 3, images heights are:
array(4) {
[0]=>
float(6.6666666666667)
[1]=>
float(14.222222222222)
[2]=>
float(7.2592592592593)
[3]=>
float(11.111111111111)
}
at line 4, images heights are:
array(3) {
[0]=>
float(7.2407407407407)
[1]=>
float(6.7407407407407)
[2]=>
float(6.2592592592593)
}
heights for each line:
array(5) {
[0]=>
float(11.851851851852)
[1]=>
float(9.8703703703704)
[2]=>
int(6)
[3]=>
float(14.222222222222)
[4]=>
float(7.2407407407407)
}
total height = 49.185185185185
この結果をチェックして、各行の値が最も高く、合計が有効かどうかを確認します。
最終的に、ランダムに配置された画像のグリッドを表示するために必要なすべての情報が得られました。
$imageGrid = new imageGrid(800, 800, $virtualWidth, $virtualHeight);
foreach (glob("images/*.jpg") as $jpg)
{
$img = imagecreatefromjpeg($jpg);
$index = array_search($jpg, $images);
echo "image {$index}:\n";
$line = $imageLines[$index];
echo "image is at line {$line}\n";
$sizeW = ($virtualWidth / $lines[$line]);
echo "width = {$virtualWidth} / {$lines[$line]} = {$sizeW}\n";
$sizeH = $imageHeights[$line];
echo "height = {$imageHeights[$line]}\n";
$posX = $imagePositions[$index] * ($virtualWidth / $lines[$line]);
echo "pos X = {$imagePositions[$index]} * ({$virtualWidth} / {$lines[$line]}) = {$posX}\n";
$slice = array_slice($imageHeights, 0, $line);
echo "Slice to calc Y:\n";
var_dump($slice);
$posY = array_sum($slice);
echo "pos Y = {$posY}\n";
echo "\n";
$imageGrid->putImage($img, $sizeW, $sizeH, $posX, $posY);
imagedestroy($img);
}
これにより、次のようになります。
image 7:
image is at line 3
width = 24 / 4 = 6
height = 14.222222222222
pos X = 2 * (24 / 4) = 12
Slice to calc Y:
array(3) {
[0]=>
float(11.851851851852)
[1]=>
float(9.8703703703704)
[2]=>
int(6)
}
pos Y = 27.722222222222
image 2:
image is at line 0
width = 24 / 3 = 8
height = 11.851851851852
pos X = 2 * (24 / 3) = 16
Slice to calc Y:
array(0) {
}
pos Y = 0
image 10:
image is at line 4
width = 24 / 3 = 8
height = 7.2407407407407
pos X = 1 * (24 / 3) = 8
Slice to calc Y:
array(4) {
[0]=>
float(11.851851851852)
[1]=>
float(9.8703703703704)
[2]=>
int(6)
[3]=>
float(14.222222222222)
}
pos Y = 41.944444444444
image 4:
image is at line 2
width = 24 / 1 = 24
height = 6
pos X = 0 * (24 / 1) = 0
Slice to calc Y:
array(2) {
[0]=>
float(11.851851851852)
[1]=>
float(9.8703703703704)
}
pos Y = 21.722222222222
image 3:
image is at line 1
width = 24 / 1 = 24
height = 9.8703703703704
pos X = 0 * (24 / 1) = 0
Slice to calc Y:
array(1) {
[0]=>
float(11.851851851852)
}
pos Y = 11.851851851852
image 5:
image is at line 3
width = 24 / 4 = 6
height = 14.222222222222
pos X = 0 * (24 / 4) = 0
Slice to calc Y:
array(3) {
[0]=>
float(11.851851851852)
[1]=>
float(9.8703703703704)
[2]=>
int(6)
}
pos Y = 27.722222222222
image 6:
image is at line 3
width = 24 / 4 = 6
height = 14.222222222222
pos X = 1 * (24 / 4) = 6
Slice to calc Y:
array(3) {
[0]=>
float(11.851851851852)
[1]=>
float(9.8703703703704)
[2]=>
int(6)
}
pos Y = 27.722222222222
image 1:
image is at line 0
width = 24 / 3 = 8
height = 11.851851851852
pos X = 1 * (24 / 3) = 8
Slice to calc Y:
array(0) {
}
pos Y = 0
image 0:
image is at line 0
width = 24 / 3 = 8
height = 11.851851851852
pos X = 0 * (24 / 3) = 0
Slice to calc Y:
array(0) {
}
pos Y = 0
image 11:
image is at line 4
width = 24 / 3 = 8
height = 7.2407407407407
pos X = 2 * (24 / 3) = 16
Slice to calc Y:
array(4) {
[0]=>
float(11.851851851852)
[1]=>
float(9.8703703703704)
[2]=>
int(6)
[3]=>
float(14.222222222222)
}
pos Y = 41.944444444444
image 8:
image is at line 3
width = 24 / 4 = 6
height = 14.222222222222
pos X = 3 * (24 / 4) = 18
Slice to calc Y:
array(3) {
[0]=>
float(11.851851851852)
[1]=>
float(9.8703703703704)
[2]=>
int(6)
}
pos Y = 27.722222222222
image 9:
image is at line 4
width = 24 / 3 = 8
height = 7.2407407407407
pos X = 0 * (24 / 3) = 0
Slice to calc Y:
array(4) {
[0]=>
float(11.851851851852)
[1]=>
float(9.8703703703704)
[2]=>
int(6)
[3]=>
float(14.222222222222)
}
pos Y = 41.944444444444
コードをデバッグするには、次のコマンドで終了します。
$debug = true;
if ($debug)
{
echo ob_get_clean();
}
else
{
ob_clean();
$imageGrid->display();
}
さて、ここにすべてのステップがあります。結果はどうですか？
F5..。
F5..。
最終コード：
ob_start();
echo '<pre>';
// Get height of all images
$images = array ();
$totalHeight = 0;
foreach (glob("images/*.jpg") as $jpg)
{
$img = imagecreatefromjpeg($jpg);
$images[$jpg] = imagesy($img);
$totalHeight += $images[$jpg];
imagedestroy($img);
}
echo "image list with heights:\n";
var_dump($images);
// Shuffle image array of files preserving keys to get random image disposition
$keys = array_keys($images);
shuffle($keys);
$images = array_merge(array_flip($keys), $images);
// Separate image names and heights, will simplify our future work
$heights = array_values($images);
$images = array_keys($images);
echo "image list:\n";
var_dump($images);
echo "total heights: {$totalHeight}\n";
echo "image heights:\n";
var_dump($heights);
// Get percentage of image height compared to the total height
$count = count($heights);
for ($i = 0; ($i < $count); $i++)
{
$heights[$i] = ($heights[$i] * 100) / $totalHeight; // becomes virtual height in a x100 grid
}
echo "image heights in percents\n";
var_dump($heights);
echo "check : " . array_sum($heights) . " = 100\n";
// Get random number of images per line and number of lines
// Between 1 to 4 images/line until there is no more image.
$lines = array ();
while ($count > 0)
{
$nbImages = rand() % 4 + 1;
if (($count - $nbImages) < 0)
{
$nbImages = $count;
}
$lines[] = $nbImages;
$count -= $nbImages;
}
echo "Number of lines : " . count($lines) . "\n";
echo "images per line disposition :\n";
var_dump($lines);
// Associate an image with a line
$imageLines = array();
foreach ($lines as $key => $numberImg)
{
while ($numberImg--)
{
$imageLines[] = $key;
}
}
echo "image / line association:\n";
var_dump($imageLines);
// Associate an image with a position in a line
$imagePositions = array();
foreach ($lines as $numberImg)
{
for ($i = 0; ($i < $numberImg); $i++)
{
$imagePositions[] = $i;
}
}
echo "image / position in a line association:\n";
var_dump($imagePositions);
// We have from 1 to 4 images/line so we create a grid with a virtual width of 1*2*3*4.
// In this case, 1 image/line = 24, 2/line =24/2=12, 3/line=24/3=8, all are valid integers.
$i = 4;
$virtualWidth = 1;
while ($i)
{
$virtualWidth *= $i--;
}
echo "virtual width: {$virtualWidth}\n";
// Determine the virtual height needed for each line and for the whole grid
$imageHeights = array();
$index = 0;
foreach ($lines as $key => $numberImages)
{
$slice = array_slice($heights, $index, $numberImages);
echo "at line {$key}, images heights are:\n";
var_dump($slice);
$imageHeights[] = max($slice);
$index += $numberImages;
}
$virtualHeight = array_sum($imageHeights);
echo "heights for each line:\n";
var_dump($imageHeights);
echo "total height = {$virtualHeight}\n";
// Create a grid and place logically all images in the virtual area
$imageGrid = new imageGrid(800, 800, $virtualWidth, $virtualHeight);
foreach (glob("images/*.jpg") as $jpg)
{
$img = imagecreatefromjpeg($jpg);
// Determine position
$index = array_search($jpg, $images);
echo "image {$index}:\n";
$line = $imageLines[$index];
echo "image is at line {$line}\n";
$sizeW = ($virtualWidth / $lines[$line]);
echo "width = {$virtualWidth} / {$lines[$line]} = {$sizeW}\n";
$sizeH = $imageHeights[$line];
echo "height = {$imageHeights[$line]}\n";
$posX = $imagePositions[$index] * ($virtualWidth / $lines[$line]);
echo "pos X = {$imagePositions[$index]} * ({$virtualWidth} / {$lines[$line]}) = {$posX}\n";
$slice = array_slice($imageHeights, 0, $line);
echo "Slice to calc Y:\n";
var_dump($slice);
$posY = array_sum($slice);
echo "pos Y = {$posY}\n";
echo "\n";
$imageGrid->putImage($img, $sizeW, $sizeH, $posX, $posY);
imagedestroy($img);
}
$debug = false;
if ($debug)
{
echo ob_get_clean();
}
else
{
ob_clean();
$imageGrid->display();
}
私のアプローチはおそらく最良のアプローチではありませんが、少なくとも、画像の重みを維持しながら、グリッドに画像をランダムに配置することができます。このテーマは扱いが非常に難しいので、これで十分に機能することを願っています。