Bilder mit PHP erstellen

Es gibt Zeiten, in denen wir ein bereits erstelltes Bild nicht verwenden können. Dies kann aus verschiedenen Gründen auftreten, einschließlich des Urheberrechts. Der Hauptgrund ist jedoch, dass wir kein Bild haben möchten. Um dieses Problem zu lösen, ist es vielleicht das erste, was uns in den Sinn kommt, es selbst zu erstellen.

Um ein Bild zu erstellen, können wir uns Anwendungen wie Photoshop oder Gimp vorstellen . Wenn das gewünschte Bild jedoch dynamisch ist oder einen Inhalt darstellt, den wir nicht vorhersehen können, müssen wir nach einer Alternative suchen. Hier spart uns PHP den Tag, dank seiner nativen GD- Bibliothek können wir einige Methoden zum Erstellen von Bildern verwenden, obwohl der Prozess nicht komplexer ist, was eine größere Bildkomplexität, höhere Berechnungen und Algorithmen angeht, die wir tun müssen.

Grundlegende Konzepte

Bevor wir zum praktischen Teil übergehen, sollten wir uns zunächst einige Konzepte ansehen, die uns ein Verständnis für alles verschaffen, was ein Bild oder eine Grafik innerhalb des PHP- Ökosystems darstellt.

Bild
Ein Bild ist nichts anderes als ein Rechteck, das mit Pixeln verschiedener Farben oder einer einzelnen Farbe gefüllt ist. Diese sind innerhalb des Rechtecks ​​so angeordnet, dass sie aus der Ferne von etwas gesehen werden können, das wir erkennen können.

Unterstützte Formate
Die Bilder können verschiedene Formate haben. Diese beziehen sich jedoch auf die Art der Komprimierung und die Palette oder Menge der Farben, die in dem ausgewählten Format angezeigt werden können. Unter den von der GD- Bibliothek von PHP unterstützten Formaten gibt es GIF, JPEG und PNG , wobei GIF nur eine Palette von 256 Farben unterstützt und PNG mehr als 16 Millionen Farben unterstützt. JPEG unterstützt in diesem Fall nur bis zu 16 Millionen Farben.

Wenn wir über Farben sprechen, sollten wir wissen, dass alle Kompositionen, die wir mit einer RGB- Palette für Rot, Grün und Blau erzielen, mit Codes eine Mischung dieser drei erhalten und praktisch jede Farbe für den Menschen sichtbar machen können.

Zeichnen Sie unser erstes Bild

Sobald der einleitende Teil der Theorie geklärt ist, werden wir mit dem praktischen Teil fortfahren. In diesem ersten Beispiel werden wir etwas Einfaches tun, um dann den Level zu erhöhen. Dazu werden wir ein kleines schwarzes Rechteck zeichnen und damit einige der bereits gelernten Konzepte demonstrieren. Um dieses Beispiel zu erreichen, folgen wir den folgenden Schritten:

– Primero creamos nuestro archivo, lo llamaremos rectangulo_simple.php . 1 – Zuerst erstellen wir unsere Datei, wir werden sie rechteckig_simple.php nennen . Instanciamos Methode von imagecreate () um den Empfänger unseres Bildes zu definieren, setzen wir auch dessen Breite und Höhe:

 <? php $ ourImage = imagecreate (200, 200); 

– Acto seguido debemos definir los colores de la imagen, esto lo hacemos con el método imagecolorallocate(), veamos: 2 – Als nächstes müssen wir die Farben des Bildes definieren, dies machen wir mit der imagecolorallocate () Methode , mal sehen:

 $ white = imagecolorallocate ($ ourImage, 0xFF, 0xFF, 0xFF); $ black = imagecolorallocate ($ ourImage, 0x00, 0x00, 0x00); 

– Luego creamos nuestra imagen rectangular en el receptor declarado inicialmente, esto lo hacemos con el método imagefilledrectangle() y le pasamos el color del relleno: 3 – Dann erstellen wir unser rechteckiges Bild in dem ursprünglich deklarierten Empfänger. Dies geschieht mit der Methode imagefilledrectangle () und wir übergeben die Farbe der Füllung:

 imagefilledrectangle ($ ourImage, 50, 50, 150, 150, $ black); 

– por último definimos las cabeceras o header para que el navegador pueda mostrar el contenido y le damos a la creación de nuestra imagen el formato PNG: 4 – Zum Schluss definieren wir die Header oder Header, damit der Browser den Inhalt anzeigen kann und wir geben der Erstellung unseres Bildes das PNG-Format:

 Header ("Content-Type: image / png"); imagepng ($ ourImage); 

Lassen Sie uns näher erläutern, wie unser Code funktioniert. Als Erstes erstellen wir eine Art Canvas . Dies wird derjenige sein, der die Daten für unser Bild erhält. dann ordnen wir unserem Canvas- oder Bildrezeptor ein Paar Farben zu, in diesem Fall schwarz und weiß, und verwenden dafür hexadezimale Codes an den drei Positionen, die dem RGB entsprechen .

Für den letzten Teil verwenden wir eine Methode, mit der wir ein Rechteck zeichnen können, wir definieren seine Größe und wir sagen ihm, wo es gezeigt wird und welche Farbe es für seine Füllung verwenden wird. Um das Bild dann anzuzeigen, definieren wir Header, damit der Browser weiß, dass es ein Bild empfängt, und schließlich lassen wir es mit der imagepng () -Methode im PNG- Format drucken.

Mal sehen, wie es in unserem Browser aussieht, wenn wir unser Beispiel ausführen:

creacion-imagenes-php.jpg

Drucken Sie ein anderes Format

Falls wir ein anderes Format wie JPEG benötigen, müssen wir nur den Header ändern, den wir an den Browser senden, und dann eine andere Methode anwenden.

In diesem Fall werden wir das vorherige Beispiel so ändern, dass es JPEG und nicht PNG ist. Dazu müssen wir einfach den letzten Teil unseres Codes ändern. Dazu gehen wir folgendermaßen vor:

– Creamos un nuevo archivo llamado cambiar_formato_imagen.php y copiamos/pegamos el código del ejemplo anterior, luego buscamos esta sección del código: 1 – Wir erstellen eine neue Datei mit dem Namen cambiar_formato_imagen.php und kopieren / fügen den Code aus dem vorherigen Beispiel ein. Dann suchen wir diesen Codeabschnitt:

 Header ("Content-Type: image / png"); imagepng ($ ourImage); 

– Habiendo localizado la sección sólo nos queda cambiar las líneas por lo siguiente, notando que cambiamos el método por igual: 2 – Nachdem wir den Abschnitt gefunden haben, müssen wir nur die Zeilen für das Folgende ändern, wobei wir bemerken, dass wir die Methode gleichermaßen ändern:

 Header ("Content-Type: image / jpeg"); imagejpeg ($ ourImage); 

Wie wir einfach gesehen haben, können wir durch Ändern der letzten beiden Zeilen das Format unseres Bildes ändern. Es ist wichtig zu beachten, dass wir nur ein Format pro Bildmusterdatei verwenden können.

Wenn wir ein Programm erstellen möchten, das verschiedene Formate generiert, sollten wir das Bild in einer Datei speichern und nicht auf diese Weise anzeigen, sondern es in eine HTML- Seite einfügen .

Zeichenfunktionen

Wir hatten bereits eine kleine Annäherung an die GD-Bibliothek mit den vorherigen Beispielen. Aber es ist noch nicht alles, diese Bibliothek erlaubt es uns, eine größere Anzahl von Funktionen zu verwenden, um das Zeichnen zu erreichen. Hier einige der grundlegendsten und beliebtesten:

imagesetpixel (Bild, x, y, Farbe)
Diese Funktion ermöglicht es uns, die Farbe eines bestimmten Pixels zu bestimmen. Sie ist die einfachste von allen. Wenn wir sie jedoch mit einem guten Algorithmus kombinieren, können wir sehr beeindruckende Ergebnisse erzielen.

imageline (image, start_x, start_and, end_x, end_and, color)
Diese Funktion ermöglicht es uns, eine Linie in den Abschnitt oder Teil unseres Canvas zu zeichnen, der durch die X- und Y-Achse des Raums definiert ist, den er einnimmt, wobei Y die Höhe und X die Länge angibt.

Bildpolygon (Bild, Punkte, Zahl, Farbe)
Es erlaubt uns, ein Polygon zu zeichnen. Dies ist eine der am häufigsten verwendeten Funktionen. Als Argumente dient das Bild, in dem das Polygon erstellt werden soll, ein Array mit den Punkten, aus denen die Seiten bestehen, der Anzahl der Punkte, die verbunden werden müssen, und schließlich die Farbe, die Sie haben werden.

Bild drehen (Bild, Winkel, Hintergrundfarbe)
Mit dieser Funktion können wir die Bilder um einige Grad in ihrer Achse drehen, wodurch wir verschiedene Effekte erzielen können, ohne externe Bildprozessoren zu verwenden.

Beispiel für das Drehen eines Bildes

Die imagerotate () -Methode ist etwas komplex zu erklären, wenn wir sie nicht mit unseren Augen sehen. Deshalb nehmen wir das erste Beispiel, das wir erstellt haben, und ändern es so, dass das endgültige Rechteck um einige Grad gedreht wird. Dazu sehen wir die Schritte, die wir befolgen müssen:

– Creamos un archivo llamado rectangulo_rotado.php y utilizamos como base nuestro código anterior hasta la creación de la imagen rectangular, veamos: 1 – Wir erstellen eine Datei mit dem Namen rectangulo_rotado.php und verwenden als Basis unseren vorherigen Code bis zur Erstellung des rechteckigen Bildes. Sehen wir uns Folgendes an:

 <? php $ ourImage = imagecreate (200, 200); $ white = imagecolorallocate ($ ourImage, 0xFF, 0xFF, 0xFF); $ black = imagecolorallocate ($ ourImage, 0x00, 0x00, 0x00); imagefilledrectangle ($ ourImage, 50, 50, 150, 150, $ black); 

– Ahora aplicamos el método imagerotate() para definir la rotación de nuestra imagen: 2 – Jetzt wenden wir die Methode imagerotate () an, um die Drehung unseres Bildes zu definieren:

 $ newRotatedImage = imagerotate ($ ourImage, 65, 1); 

– Por último definimos nuestras cabeceras y creamos la imagen con el formato dado: 3 – Schließlich definieren wir unsere Header und erstellen das Bild mit dem angegebenen Format:

 Header ("Content-Type: image / png"); imagepng ($ newRotatedImage); 

Wie wir sehen können, bleibt alles beim ersten Beispiel. Nachdem wir jedoch unser Rechteck erstellt und kurz vor dem Generieren unseres Headers eine neue Variable namens new ImageRotated erstellt haben , weisen wir diesem das Ergebnis der imagerotate () -Methode zu, das Argument 65 entspricht dem Drehwinkel des Bildes und 1 ist der Kontrast, der auf unserem Bildschirm angezeigt wird. Schließlich werden wir diese neue Variable verwenden, um das Bild zu generieren. Mal sehen, wie es aussieht, wenn wir es in unserem Browser ausführen:

creacion-imagenes-php2.jpg

Text zeichnen

Das Zeichnen von Wörtern ist sehr nützlich, da wir so Inhalte generieren können, die weder von Suchfunktionen noch von externen Engines nachvollziehbar sind. Eine der größten Verwendungsmöglichkeiten für diese Art von Funktionen ist die Erstellung von Captchas , mit denen überprüft wird , ob der Benutzer ein Mensch ist oder nicht.

Um zeichnen zu können, müssen wir einfach die Funktion imagestring (image, font, x, y, text, color) verwenden. Es erhält, in welchem ​​Bild der Text platziert werden muss, die Bezeichnung der verwendeten Schriftart, die X-Achse und die Y-Achse, auf der er sich befindet, den zu zeichnenden Text und schließlich die Farbe desselben.

Um diesen Effekt zu erzielen, müssen wir einfach eine Zeile hinzufügen, bevor wir den Header für den Browser generieren. Sehen wir uns die folgenden Schritte an:

– Creamos un archivo llamado dibujar_texto.php y utilizamos como base nuestro código del primer ejemplo hasta la creación de la imagen rectangular: 1 – Wir erstellen eine Datei mit dem Namen draw_text.php und verwenden als Basis den Code des ersten Beispiels bis zur Erstellung des rechteckigen Bildes:

 <? php $ ourImage = imagecreate (200, 200); $ white = imagecolorallocate ($ ourImage, 0xFF, 0xFF, 0xFF); $ black = imagecolorallocate ($ ourImage, 0x00, 0x00, 0x00); imagefilledrectangle ($ ourImage, 50, 50, 150, 150, $ black); 

– Aplicamos el método imagestring() para dibujar el texto: 2 – Wir wenden die Methode imagestring () an, um den Text zu zeichnen:

 imagestring ($ ourImage, 5, 50, 160, "Ein Rechteck", $ black); 

– Definimos las cabeceras y creamos la imagen: 3 – Wir definieren die Überschriften und erstellen das Bild:

 Header ("Content-Type: image / png"); imagepng ($ ourImage); 

Wie wir sehen, mussten wir nur ein paar Zeilen ändern, um unserem Code eine neue Herangehensweise und Nützlichkeit zu verleihen. Sehen wir uns an, wie es in unserem Browser aussieht, wenn wir unser Beispiel ausführen:

creacion-imagenes-php3.jpg

Damit beenden wir unser Tutorial, es ist uns gelungen, einige Grundformen zu zeichnen und damit gute Ergebnisse zu erzielen, dies ist jedoch nur der Einstiegspunkt, die Anwendungen dieses Wissens sind sehr vielfältig, aber mit ein wenig Recherche können wir sehr interessante Dinge erreichen .

administrator

Leave a Reply

Your email address will not be published. Required fields are marked *