RealBlog: Text als png umwandeln
RealBlog: Text als png umwandeln
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
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.
Re: RealBlog: Text als png umwandeln
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: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.
Code: Select all
{{{PLUGIN:bild('Christoph Becker');}}}
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')
);
}
Christoph M. Becker – Plugins for CMSimple_XH
Re: RealBlog: Text als png umwandeln
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.
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.
Re: RealBlog: Text als png umwandeln
Hui, wie die Zeit vergeht.
Hier mal eine überarbeitete Version:
Ich habe die Funktion von bild() in text2image() umbenannt. Diese wird so aufgerufen:
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).
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')
);
}
Code: Select all
{{{text2image('der zu druckende Text', 'ein alternativer Text');}}}
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
Re: RealBlog: Text als png umwandeln
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+"
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+"
Re: RealBlog: Text als png umwandeln
Nein, es liegt daran, dass das obige Script Paletten-PNGs erzeugt, und die sehen im Zweifel einfach nicht gut aus.ojay wrote:Oder liegt das Ergebnis an den ttf-Dateien, die ich benutzt habe?
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:
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):ojay wrote:"but not for CMSimple 4+"
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
Re: RealBlog: Text als png umwandeln
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:
dann sieht der img-tag nun so aus:
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...
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"
Code: Select all
'<img style="vertical-align: bottom" class="image2text" src="data:image/png;base64,%s" alt="%s">',
[ 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...
Re: RealBlog: Text als png umwandeln
Hallo Olaf!
Ah ja! Das hatte ich im Stylesheet des Plugins bereits gelöst, allerdings per vertical-align:middle. Ist wohl Geschmackssache.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"
Dankeschön. Aber so besonders ist es eigentlich nicht gewesen.ojay wrote:Besser kann es die (ehemalige!) MediaWiki-Funktion auch nicht.
Es ist schon eine Meisterleistung
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 wrote:btw: bei CMSimple 4+ erhalte ich nur eine weiße Seite, wenn ich die function einfüge.
Christoph M. Becker – Plugins for CMSimple_XH
Gelöst: RealBlog: Text als png umwandeln
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 :
In CMSimple 4+ :
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!
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');}}}
Code: Select all
{{{PLUGIN:text2image('der zu druckende Text', 'ein alternativer Text');}}}
Danke Christoph!