Mit Javascript HTML-Tabelle als base64-PNG ausgeben?

[Eternal Sun of Mankind]

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:

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

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

You do not have permission to view link please Anmelden or Registrieren

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

Herzlichen Dank!

 

[Eternal Sun of Mankind]

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 .

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:

You do not have permission to view link please Anmelden or Registrieren

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 . Das noch weitaus mehrversprechendere

You do not have permission to view link please Anmelden or Registrieren

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 ?

ESOM.

 

[theSplit]

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:

You do not have permission to view link please Anmelden or Registrieren