RealBlog: Text als png umwandeln

[ojay]

Hallo,

ich kenne die Funktion aus Wikimedia, wo man in alten WM-Versionen gar mit <email>Beispieltext</email> Texte automatisch in Bilder umgewandelt wurden.
Wenn man so nach "Text als PNG" bei Google sucht, da findet man zwar auch Scripte, aber keine, die sich auch im RealBlog benutzen lassen.

Vielleicht habt ihr schon eine Anwendung gefunden. Im RealBlog (CMSimple(ge-webdesign)) wird immer der Code umgewandelt, sobald PHP-Bestandteile drin sind.

Ich möchte möglichst Namen bei Google heraus halten. Der Aufruf sollte auch (wie in Wiki's) möglichst einfach sein.
In Wikimedia-Installationen ist die e-mail-Umwandlung eine Erweiterung, wo in der neusten Version nur noch email-Adressen in png-Bilder transferiert werden.
In Wikis hat der Google-Schutz immer gut geklappt.

Danke, Gruß
Olaf

[cmb]

Wenn man so nach "Text als PNG" bei Google sucht, da findet man zwar auch Scripte, aber keine, die sich auch im RealBlog benutzen lassen.

Da wäre ich mir nicht sicher. Im Prinzip bräuchte man nur eine allgemeine PHP-Funktion, die den Text in ein Bild druckt, und dieses dann zur Verfügung stellt. Die Funktion könnte man in userfuncs.php definieren. Das ganze könnte man dann per Pluginaufruf etwa wie folgt aufrufen:

Code: Select all

{{{PLUGIN:bild('Christoph Becker');}}}

Mal ein schneller Entwurf einer solchen Funktion:

Code: Select all

function bild($text)
{
    $image = imagecreate(100, 15);
    imagecolorallocate($image, 255, 255, 255);
    $foreground = imagecolorallocate($image, 0, 0, 0);
    imagestring($image, 3, 0, 0, $text, $foreground);
    ob_start();
    imagepng($image);
    $data = ob_get_clean();
    return sprintf(
        '<img src="data:image/png;base64,%s" alt="%s">',
        base64_encode($data),
        htmlspecialchars($text, ENT_COMPAT, 'UTF-8')
    );
}

Eigentlich sollte imagettfbbox() verwendet werden, damit das Bild genau die richtige Größe hat, aber dafür müsste dann auch eine TTF zur Verfügung stehen, was aber auch den Vorteil hätte, dass nicht nur ASCII-Zeichen richtig dargestellt werden… Na ja, ist also noch was zu tun.

[ojay]

Vielen Dank, Christoph, soweit funktioniert es.
Bis auf die Umlaute und wie auch geschrieben die Länge der Grafik bzw. Schriftgröße und Bildgröße.
Auch habe ich meine RealBlog-Hintergrundfarbe auf "imagecolorallocate($image, 205, 205, 201); " angepasst. Transparent habe ich noch nicht gefunden.
Aber zumindest geht es mit PlugIn-Aufruf.
Nächstes Ziel Bildbreite.

[cmb]

Hui, wie die Zeit vergeht.

Hier mal eine überarbeitete Version:

Code: Select all

<?php

/**
 * Copyright (C) 2016 Christoph M. Becker
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 */

function text2image($text, $alt = null)
{
    global $pth;

    // configure the following variables:
    $fontfile = "{$pth['folder']['userfiles']}PTC55F.ttf";
    $fontsize = 12; // in pt
    $padding = 4; // too small values may cause truncation of the text
    $baselineOffset = 3; // height of descender; depends on font; experiment!
    $color = array(0, 0, 0); // an RGB triple

    if (!isset($alt)) {
        $alt = $text;
    }
    $angle = 0;
    $bbox = imagettfbbox($fontsize, $angle, $fontfile, $text);
    $width = $bbox[4] - $bbox[0] + $padding;
    $height = $bbox[1] - $bbox[5] + $padding;
    $x = intval($padding / 2);
    $y = $height - intval($padding / 2) - $baselineOffset;
    $image = imagecreate($width, $height);
    imagecolorallocatealpha($image, 0, 0, 0, 127);
    $foreground = imagecolorallocate($image, $color[0], $color[1], $color[2]);
    imagettftext($image, $fontsize, $angle, $x, $y, $foreground, $fontfile, $text);
    ob_start();
    imagepng($image);
    $data = ob_get_clean();
    return sprintf(
        '<img src="data:image/png;base64,%s" alt="%s">',
        base64_encode($data),
        htmlspecialchars($alt, ENT_COMPAT, 'UTF-8')
    );
}

Ich habe die Funktion von bild() in text2image() umbenannt. Diese wird so aufgerufen:

Code: Select all

{{{text2image('der zu druckende Text', 'ein alternativer Text');}}}

Den zweiten Parameter ('ein alternativer Text') kann man weglassen, aber dann wird der erste Parameter als alt-Attributwert genommen, was ein schlechter Spamschutz wäre (das Problem gab's beim Script weiter oben).

Bevor jedoch die Funktion aufgerufen werden kann, müssen im Script ein paar Variablen konfiguriert werden. Ganz wichtig ist $fontfile; da muss halt noch eine TTF-Font im userfiles/ Ordner gespeichert werden. $fontsize und $color sind hoffentlich selbsterklärend (der Hintergrund ist nun immer vollständig transparent). $padding eigentlich auch; $baselineOffset vielleicht weniger, aber da probiert man am besten einfach mal mit ein paar Werten und schaut sich die Resultate an. Werden Teile des Textes abgeschnitten, dann an diesen beiden Stellschrauben drehen.

So, nun fehlt eigentlich nur noch, dass ich (oder ein anderer?) ein Plugin daraus machen, inklusive einer mit-ausgelieferten Schriftart, und natürlich Konfigurationsoptionen (statt im Script Variablen anpassen zu müssen).

[ojay]

Hallo Christoph,

ich habe endlich Deine Antwort gesehen... (trotz Benachrichtigung)
...und gleich mal mit verschiedenen ttf-Schriften ausprobiert.

PTC55F.ttf
Ergebnis: [ external image ]
------------------------------------------------------------------
Verdana.ttf
Ergebnis: [ external image ]
------------------------------------------------------------------
arial.ttf
Ergebnis: [ external image ]

Oder liegt das Ergebnis an den ttf-Dateien, die ich benutzt habe?
Es sieht bei allen Browsern gleich aus.

Einstellungen jeweils:
$fontsize = 12;
$padding = 3;
$baselineOffset = 2;

Also es funktioniert brauchbar. - "but not for CMSimple 4+"

[cmb]

Oder liegt das Ergebnis an den ttf-Dateien, die ich benutzt habe?

Nein, es liegt daran, dass das obige Script Paletten-PNGs erzeugt, und die sehen im Zweifel einfach nicht gut aus.

Ich hatte in der Zwischenzeit mal angefangen ein Plugin daraus zu machen, bei dem dann auch Truecolor-Bilder erzeugt werden, die gut aussehen sollten, und auch das $padding-Problem besser in den Griff bekommen, aber da kam ich nicht weiter, und dann käme ja auch dieses Problem hinzu:

"but not for CMSimple 4+"

Das Script weiter oben sollte eigentlich unter CMSimple 4+ funktionieren (habe es aber nicht explizit getestet), aber ein Plugin wäre natürlich eine andere Sache. Daher noch mal das aktuelle Script für die userfuncs.php (sollte mit CMSimple 4+ kompatibel sein):

Code: Select all

<?php

/**
 * Copyright (C) 2016 Christoph M. Becker
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 */

function text2image($text, $alt = null)
{
    global $pth;

    // configure the following variables:
    $fontfile = "{$pth['folder']['userfiles']}PTC55F.ttf";
    $fontsize = 18; // in pt
    $padding = 3; // too small values may cause truncation of the text
    $color = array(0, 0, 0); // an RGB triple

    $angle = 0;
    extract(text2image_rectangle($text, $fontsize, $angle, $fontfile, $padding));

    $image = imagecreatetruecolor($width, $height);
    imagealphablending($image, false);
    imagesavealpha($image, true);
    $background = imagecolorallocatealpha($image, 0, 0, 0, 127);
    imagefilledrectangle($image, 0, 0, $width - 1, $height - 1, $background);
    $foreground = imagecolorallocate($image, $color[0], $color[1], $color[2]);
    imagettftext($image, $fontsize, $angle, $x, $y, $foreground, $fontfile, $text);
    ob_start();
    imagepng($image);
    $data = ob_get_clean();
    imagedestroy($image);
    return sprintf(
        '<img class="image2text" src="data:image/png;base64,%s" alt="%s">',
        base64_encode($data),
        htmlspecialchars(isset($alt) ? $alt : $text, ENT_COMPAT, 'UTF-8')
    );
}

function text2image_rectangle($text, $fontsize, $angle, $fontfile, $padding)
{
    $bbox = imagettfbbox($fontsize, $angle, $fontfile, $text);
    $xs = array($bbox[0], $bbox[2], $bbox[4], $bbox[6]);
    $ys = array($bbox[1], $bbox[3], $bbox[5], $bbox[7]);
    $xmin = min($xs);
    $xmax = max($xs);
    $ymin = min($ys);
    $ymax = max($ys);
    $x = -$xmin + $padding;
    $y = -$ymin + $padding;
    $width = $xmax - $xmin + 1 + 2 * $padding;
    $height = $ymax - $ymin + 1 + 2 * $padding;
    return compact('x', 'y', 'width', 'height');
}
 

[ojay]

Hallo Christoph,

Gut, es war fast so, wie ich mir nun erhofft habe.

Aber das Bild war zu hoch. Dann habe ich den Media-Wikis geschaut, wo ich die Namen-Bilder ausgerichtet habe:

Code: Select all

 style="vertical-align: bottom"

dann sieht der img-tag nun so aus:

Code: Select all

'<img style="vertical-align: bottom" class="image2text" src="data:image/png;base64,%s" alt="%s">',

PTC55F.ttf:
[ external image ]
Arial.ttf:
[ external image ]
mit Einstellungen:
$fontsize = 12; // in pt
$padding = 1; // too small values may cause truncation of the text
$color = array(0, 0, 0); // an RGB triple
$angle = 0;

Besser kann es die (ehemalige!) MediaWiki-Funktion auch nicht.
Es ist schon eine Meisterleistung

Vielen Dank!

btw: bei CMSimple 4+ erhalte ich nur eine weiße Seite, wenn ich die function einfüge.
Da ich von Anfang an dort ja schon den Calender_XH benutze und mit der 'gelben' Seite schon geübt habe, muss ich wohl ein Template finden und es mit _XH nachbauen.
Möglichst so, das kein Benutzer etwas merkt, was schwierig wird...

[cmb]

Hallo Olaf!

Aber das Bild war zu hoch. Dann habe ich den Media-Wikis geschaut, wo ich die Namen-Bilder ausgerichtet habe:

Code: Select all

 style="vertical-align: bottom"

Ah ja! Das hatte ich im Stylesheet des Plugins bereits gelöst, allerdings per vertical-align:middle. Ist wohl Geschmackssache.

Besser kann es die (ehemalige!) MediaWiki-Funktion auch nicht.
Es ist schon eine Meisterleistung

Dankeschön. Aber so besonders ist es eigentlich nicht gewesen.

btw: bei CMSimple 4+ erhalte ich nur eine weiße Seite, wenn ich die function einfüge.

Ich habe es gerade mal mit einer frischen Installation von CMSimple 4.6.2 probiert, und da funktioniert es. Kann es sein, dass Deine CMSimple 4 Installation und die XH-Testinstallation auf unterschiedlichen Servern (bzw. unterschiedlichen PHP-Versionen/Konfigurationen laufen)? Eine weiße Seite würde zum Beispiel auftreten, wenn die PHP-Erweiterung `gd` nicht verfügbar ist.

[ojay]

warum es in CMSimple 4+ nicht genauso wie in CMSimple_XH funktionierte...

Folgenden Code (3 Beiträge weiter oben) fügt man als userfuncs.php-Datei ins"cmsimple"-Verzeichnis ein.

Aufruf in Templates, RealBlog,...:
In CMSimple_XH :

Code: Select all

{{{text2image('der zu druckende Text', 'ein alternativer Text');}}}

In CMSimple 4+ :

Code: Select all

{{{PLUGIN:text2image('der zu druckende Text', 'ein alternativer Text');}}}

Die *.ttf-Zeichensätze, die man im Internet findet, schiebt man ins "/userfiles"-Verzeichnis. So ist es in der userfuncs.php-Datei adressiert.

Danke Christoph!