RealBlog: Text als png umwandeln

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
ojay
Posts: 58
Joined: Sun Nov 09, 2014 10:24 am
Location: da, wo die Zeit entsteht

RealBlog: Text als png umwandeln

Post by ojay » Tue Feb 23, 2016 6:12 pm

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
Last edited by ojay on Tue Feb 23, 2016 9:04 pm, edited 1 time in total.

cmb
Posts: 13170
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: RealBlog: Text als png umwandeln

Post by cmb » Tue Feb 23, 2016 7:21 pm

ojay wrote: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.
Christoph M. Becker – Plugins for CMSimple_XH

ojay
Posts: 58
Joined: Sun Nov 09, 2014 10:24 am
Location: da, wo die Zeit entsteht

Re: RealBlog: Text als png umwandeln

Post by ojay » Tue Feb 23, 2016 8:37 pm

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
Posts: 13170
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: RealBlog: Text als png umwandeln

Post by cmb » Wed Apr 27, 2016 4:08 pm

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).
Christoph M. Becker – Plugins for CMSimple_XH

ojay
Posts: 58
Joined: Sun Nov 09, 2014 10:24 am
Location: da, wo die Zeit entsteht

Re: RealBlog: Text als png umwandeln

Post by ojay » Tue May 17, 2016 11:35 am

Hallo Christoph,

ich habe endlich Deine Antwort gesehen... :roll: (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
Posts: 13170
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: RealBlog: Text als png umwandeln

Post by cmb » Tue May 17, 2016 1:16 pm

ojay wrote: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:
ojay wrote:"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');
}
 
Christoph M. Becker – Plugins for CMSimple_XH

ojay
Posts: 58
Joined: Sun Nov 09, 2014 10:24 am
Location: da, wo die Zeit entsteht

Re: RealBlog: Text als png umwandeln

Post by ojay » Tue May 17, 2016 3:21 pm

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
Posts: 13170
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: RealBlog: Text als png umwandeln

Post by cmb » Tue May 17, 2016 5:22 pm

Hallo Olaf!
ojay wrote: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.
ojay wrote:Besser kann es die (ehemalige!) MediaWiki-Funktion auch nicht.
Es ist schon eine Meisterleistung :!:
Dankeschön. Aber so besonders ist es eigentlich nicht gewesen. :)
ojay wrote: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.
Christoph M. Becker – Plugins for CMSimple_XH

ojay
Posts: 58
Joined: Sun Nov 09, 2014 10:24 am
Location: da, wo die Zeit entsteht

Gelöst: RealBlog: Text als png umwandeln

Post by ojay » Thu May 19, 2016 4:01 pm

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!

Post Reply