• Hallo liebe Userinnen und User,

    nach bereits längeren Planungen und Vorbereitungen sind wir nun von vBulletin auf Xenforo umgestiegen. Die Umstellung musste leider aufgrund der Serverprobleme der letzten Tage notgedrungen vorverlegt werden. Das neue Forum ist soweit voll funktionsfähig, allerdings sind noch nicht alle der gewohnten Funktionen vorhanden. Nach Möglichkeit werden wir sie in den nächsten Wochen nachrüsten. Dafür sollte es nun einige der Probleme lösen, die wir in den letzten Tagen, Wochen und Monaten hatten. Auch der Server ist nun potenter als bei unserem alten Hoster, wodurch wir nun langfristig den Tank mit Bytes vollgetankt haben.

    Anfangs mag die neue Boardsoftware etwas ungewohnt sein, aber man findet sich recht schnell ein. Wir wissen, dass ihr alle Gewohnheitstiere seid, aber gebt dem neuen Board eine Chance.
    Sollte etwas der neuen oder auch gewohnten Funktionen unklar sein, könnt ihr den "Wo issn da der Button zu"-Thread im Feedback nutzen. Bugs meldet ihr bitte im Bugtracker, es wird sicher welche geben die uns noch nicht aufgefallen sind. Ich werde das dann versuchen, halbwegs im Startbeitrag übersichtlich zu halten, was an Arbeit noch aussteht.

    Neu ist, dass die Boardsoftware deutlich besser für Mobiltelefone und diverse Endgeräte geeignet ist und nun auch im mobilen Style alle Funktionen verfügbar sind. Am Desktop findet ihr oben rechts sowohl den Umschalter zwischen hellem und dunklem Style. Am Handy ist der Hell-/Dunkelschalter am Ende der Seite. Damit sollte zukünftig jeder sein Board so konfigurieren können, wie es ihm am liebsten ist.


    Die restlichen Funktionen sollten eigentlich soweit wie gewohnt funktionieren. Einfach mal ein wenig damit spielen oder bei Unklarheiten im Thread nachfragen. Viel Spaß im ngb 2.0.

Mit Javascript HTML-Tabelle als base64-PNG ausgeben?


Registriert
10 Jan. 2018
Beiträge
34
Hallo zusammen,

ich suche nach einer simplen Möglichkeit eine nervige Fleißarbeit zu automatisieren. Dabei ist das nicht so einfach in wenig Worte zu fassen, weshalb ich mit Google auch nicht unbedingt weitergekommen bin.
Ich nutze Wordpress für eine Seite, deren Artikel oft von Gastautoren geschrieben werden. Mittels eines Plugins wird deren Namen mit einem eigenen Gastautorenavatar unter dem Artikel dargestellt. Es kommt dabei dann durchaus auch vor, dass es mehrere Gastautoren gibt, ein Extremfall hat sechs Autoren (mehr wären durchaus vorstellbar).
Bei Gastautorenkollektiven ist die Darstellung der Avatare problematisch, ich will schließlich nicht unzählig viele 100x100 große Avatare unter Artikel hauen.
Mir schwebt eine Darstellung der Avatare vor, so wie WeChat es mit der Darstellung der Gruppensymbole macht:

1.jpg


Oder anders ausgedrückt: ich habe vier unterschiedliche Bilder:

Unbenannt-3.png


…lasse sie durch das Skript laufen und habe eine solche Darstellung:



Gibt es so ein Skript? Wie muss ich danach suchen?

Herzlichen Dank!
 
Zuletzt bearbeitet:

Registriert
10 Jan. 2018
Beiträge
34
  • Thread Starter Thread Starter
  • #2
Re: Skript zur Konvertierung mehrere Avatare in ein Gruppenavatar?

Die gesamte Geschichte ist nicht sonderlich drängend, deswegen bin ich derzeit auf der absoluten Bodge-Schiene. Ich hab gerade eine HTML zusammengebaut, die sieht so aus:[src=html5]<table>
<tbody>
<tr>
<td><img src="1.jpg" width="150" height="150"/></td>
<td><img src="2.jpg" width="150" height="150"/></td>
<td><img src="3.jpg" width="150" height="150"/></td>
</tr>
<tr>
<td><img src="4.jpg" width="150" height="150"/></td>
<td><img src="5.jpg" width="150" height="150"/></td>
<td><img src="6.jpg" width="150" height="150"/></td>
</tr>
<tr>
<td><img src="7.jpg" width="150" height="150"/></td>
<td><img src="8.jpg" width="150" height="150"/></td>
<td><img src="9.jpg" width="150" height="150"/></td>
</tr>
</tbody>
</table>
[/src]Da die Anwendungsfälle so selten sein werden, werde ich in Zukunft einen Ordner haben und dort die quadratischen Avatare 1-9 durchnummerieren und im Browser dann das Ergebnis screenshotten :D.

Schöner und einheitlicher und schneller wäre es in diesem Kontakt dann wohl, sich mittels JS das HTML als PNG rendern zu lassen. Ansätze dazu werden hier beschrieben: https://stackoverflow.com/questions/10721884/render-html-to-an-image/53067267#53067267 und ist auch tatsächlich ganz schön geil, der entsprechende Codeabschnitt...[src=javascript]('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml">HIER</div></foreignObject></svg>')[/src]...akzeptiert aber leider nicht einfach die obige Tabelle :o. Das noch weitaus mehrversprechendere https://www.geeksforgeeks.org/how-to-convert-an-html-element-or-document-into-image/ gibt ebenso das HTML aus der Demo als Bild aus, kopiere ich allerdings die Tabelle rein, bleibt der Platz einfach leer im gerenderten Bild. Warum? Wie komm ich dahin, wo ich hinwill :cool:?

ESOM.
 
Zuletzt bearbeitet:

theSplit

1998
Veteran Barkeeper

Registriert
3 Aug. 2014
Beiträge
28.561
Das einbetten als SVG sollte so gehen:

[src=html5]
<svg width="450" height="450"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="1.jpg" height="150" width="150" x="0" y="0"/>
<image xlink:href="2.jpg" height="150" width="150" x="150" y="0"/>
<image xlink:href="3.jpg" height="150" width="150" x="300" y="0"/>

<image xlink:href="4.jpg" height="150" width="150" x="0" y="150"/>
<image xlink:href="5.jpg" height="150" width="150" x="150" y="150"/>
<image xlink:href="6.jpg" height="150" width="150" x="300" y="150"/>

<image xlink:href="7.jpg" height="150" width="150" x="0" y="300"/>
<image xlink:href="8.jpg" height="150" width="150" x="150" y="300"/>
<image xlink:href="9.jpg" height="150" width="150" x="300" y="300"/>
</svg>
[/src]

Dann kannst du die Bilder laden lassen, mittels SVG Rendern und dann über Canvas Import als Bild abspeichern/exportieren.

Mehr steht hier:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image
 
Oben