Bild-collage, in PHP

Ich bin auf der Suche nach nachgeholt Lösung oder möglicherweise einige Mathematik/algorithmen für die Erstellung von einem großen Bild-collage von kleineren Produkt-Bilder?
Ich weiß wie es in ein Quadrat Mode, von gleichgroßen Bildern, die mit gd/imagemagick, aber ich würde gerne einige Variationen eingebaut.

Zum Beispiel, einige der Bilder könnten etwas größer sein, und wenn alle die gleiche Größe und Platz - ich will vielleicht 1 von Ihnen nehmen mehr Speicherplatz, einfach zu mischen, bis das design. es interessant zu halten.

je mehr ich darüber denke, desto schwieriger scheint es zu tun mit einer Formel. mit vordefinierten "Vorlagen" für alle möglichen Szenarien nicht funktionieren, da die Menge der Bilder kann variieren von nur 1 (keine Arbeit erforderlich) bis zu 10+.

ich bin nicht auf der Suche nach einer Drehung oder spezielle Effekte, nur die Bilder in einem raster mit vielleicht etwas Abstand dazwischen und keine überschneidungen.

irgendwelche Ideen, wie dies zu erreichen, und gibt es wirklich nichts bereit dort hin zu fahren?

InformationsquelleAutor Christoffer Bubach | 2012-10-16

gd image imagemagick php

24

Ich schlage vor, Sie erstellen ein raster und Gewicht-Ansatz.

Diese Antwort ist unterteilt in 3 Teile :
- Wow. Wahrscheinlich die umfangreiche Antwort IMMER. Ich danke Ihnen so sehr, sehr viel! Dies wird sicherlich sparen mir eine Menge Zeit für die Boden-Arbeit in der immer etwas Los! Mein Hauptproblem wäre jetzt zu berechnen, wie die Bilder im Netz.. ich brauche, um zu versuchen und halten Sie den überblick über die verschiedenen Bildgrößen und dynamisch zu berechnen die meisten optimiertes layout für Sie, wie Sie mit "$imageGrid->putImage($blau, 6, 2, 0, 0);" - irgendwelche Ideen?
- Froh zu sehen, diese Antwort hilft Ihnen. Ja, Sie können bestimmen, das Gewicht dynamisch auf diese Weise: 1) stellen Sie die Summe aller Ihrer Bilder Breite / Höhe 2) Holen Sie sich ein Prozentsatz von jedem Bild Breite/Höhe mit dieser Summe, 3) erstellen Sie ein raster von 100x100 und verwenden diese Prozentsätze. Ich bin auf der Arbeit kann dir nicht helfen, mehr Recht jetzt also lassen Sie mich wissen, wenn Sie benötigen, ein Beispiel, ich werde in der Lage sein, es zu schreiben, heute Abend (gmt+2).
- Hallo, und vielen Dank! Ich bin mir nicht sicher, ob ich verstehe, wie das würde helfen, die Positionierung dynamisch - also ein Beispiel wäre toll. Vielleicht brauche ich nur zu denken, es wieder und wieder Lesen alles, was Sie schrieb. Aber ich bin ein wenig beschämt zu Fragen mehr von Euch nach diesem Roman, den du gerade schrieb mir, haha. Keine Sorge, ich bin nicht in Eile!
- Vielleicht, wenn ich wählen Sie eine der Bild nach dem Zufallsprinzip und einfach verdoppeln, es ist eine Größe? Ansonsten die Berechnung der Prozentsätze nicht vorstellen jede illusion layout bei den meisten Bildern ist die gleiche Größe - oder höchstens 2-3 verschiedenen Größen, meist in der Höhe. Hmm.. ich werde weiter darüber nachdenken und vielleicht, wenn Sie einen freien moment, Sie könnte mir helfen 🙂
- +1 nur für die Zeit nehmen, zu schreiben, dass! Alles was ich sagen kann ist WOW!
InformationsquelleAutor Alain Tiemblo

Arbeiten mit einem virtuellen Gitternetz

Erstellen Sie ein neues Bild mit einer Breite/Höhe (ex: 600x800), aber auch eine raster-Breite/- Höhe (ex: 10 x 10). Dann können Sie Ihnen die Bilder, die eine virtuelle Größe und die virtuelle position. Ich werde versuchen, es Schritt für Schritt, damit Sie verstehen, was ich meine.

Erstens, wir brauchen eine Umgebung für diese.

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

Diese geben uns eine schöne weiße Quadrat. Dann, wir brauchen ein raster, um Bilder anzuzeigen. Denn das ist vielleicht schwer vorstellbar, lassen Sie es anzeigen.

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

Durch aufrufen :

$imageGrid = new imageGrid(800, 600, 10, 10);
$imageGrid->demoGrid();
$imageGrid->display();

Können wir sehen :

Bild-collage, in PHP

Nun wollen wir wissen, wie zu schreiben Sie ein Rechteck von 3x4, und fügen Sie es zu (2,5) in unserer virtuellen Maßnahmen. Wir müssen suchen, wie man Reale Größen und Positionen der unser Rechteck.

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

Durch aufrufen :

$imageGrid = new imageGrid(800, 600, 10, 10);
$imageGrid->demoGrid();
$imageGrid->demoPutSquare(3, 4, 2, 5);
$imageGrid->display();

Erhalten wir ein Quadrat von 3x4 positioniert unter (2,5) in unser raster :

Bild-collage, in PHP

Nun, bringen wir es mehr seriousely, haben wir gute Maßnahmen, so können wir fügen Sie ein Bild.

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

Durch aufrufen :

$imageGrid = new imageGrid(800, 600, 10, 10);
$imageGrid->demoGrid();
$img = imagecreatefromjpeg("ninsuo.jpg");
$imageGrid->putImage($img, 3, 4, 2, 5);
$imageGrid->display();

Erhalten wir :

Bild-collage, in PHP

So haben wir ein Bild in der guten Stelle, aber wir verloren das Seitenverhältnis. Fügen wir eine Methode, um die Größe richtig zu unserem Bild.

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

Und kurz bevor :

    imagecopyresampled($this->image, $img, $realPosX, $realPosY, 0, 0, $realSizeW, $realSizeH, imagesx($img), imagesy($img));

Setzen wir :

    $img = $this->resizePreservingAspectRatio($img, $realSizeW, $realSizeH);

Diese wie folgt Aussehen :

Bild-collage, in PHP

Wir haben jetzt einen voll functionnal Klasse, um Ihren job.

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

}

Können wir jetzt mit ihm spielen, um zu sehen, ob es funktioniert :

$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();

Bild-collage, in PHP

Persönlich, ich bevorzuge die ohne beibehalten des Seitenverhältnisses 🙂

Bild-collage, in PHP

Prost! (eh, genießen würde ich sagen!)

Danke!!! Schöner code 😉
Danke!!! Gibt es eine Möglichkeit zu speichern collage Bild in dir mit den anderen Namen? @Alain Tiemblo

InformationsquelleAutor Alain Tiemblo

Implementieren, die Transparenz

Zuerst auf die __construct Methode ersetzen :

    $white = imagecolorallocate($this->image, 255, 255, 255);
    imagefill($this->image, 0, 0, $white);

Durch :

    $transparent = imagecolorallocate($this->image, 255, 0, 255);
    imagefill($this->image, 0, 0, $transparent);
    imagecolortransparent($this->image, $transparent);

Dann auf die resizePreservingAspectRatio Methode, fügen Sie einfach nach :

    $targetImg = imagecreatetruecolor($targetWidth, $targetHeight);

Den folgenden Zeilen :

    $targetTransparent = imagecolorallocate($targetImg, 255, 0, 255);
    imagefill($targetImg, 0, 0, $targetTransparent);
    imagecolortransparent($targetImg, $targetTransparent);