Generieren Sie png24-Bilder mit Alpha aus einem Div-CSS-Code

330
user3450548

CSS ist sehr mächtig und erlaubt viele Manipulationen. Ich würde gerne wissen, ob es eine lib, eine Software oder eine Lösung gibt, um ein div wie dieses zu exportieren

<div style="width: 500px; height: 400px; background: rgba(255,0,0,0.2); color: #000000; border-radius:5px; padding:20px 10px; text-align: center; font-family: Verdana"> Some text, html code, images and everything else... </div>

Und haben ein png24-Bild mit einem Alpha-Wert von 500 x 400 als Ausgabe.

Im Einzelnen möchte ich dieses Zeug automatisieren und verschiedene PNGs in einem Ordner mit einem Namensmuster exportieren.

Ich benutze Mozilla Firefox und Google Chrome .. vielleicht eine Web-Erweiterung, eine Javascript-Bibliothek könnte den Trick tun ..?

1
Schauen Sie sich html2canvas an: https://html2canvas.hertzen.com/ Leun4m vor 6 Jahren 1
@Leun4m sieht nett aus, aber es unterstützt Alpha? user3450548 vor 6 Jahren 0
was meinst du mit * alpha *? Leun4m vor 6 Jahren 0
@ Leun4m Ich meine Transparenz. Nehmen wir an, Sie sparen ein Div mit Deckkraft: 25%; und Sie importieren es in Photoshop .. es wird die Transparenz behalten oder wird es flach sein? user3450548 vor 6 Jahren 0
Es funktioniert, wenn Sie die Hintergrundfarbe auf null setzen: https://jsfiddle.net/98fgrxbk/5/ Leun4m vor 6 Jahren 1
@ Leun4m cool, könnte also eine gute Option sein. Was ich gerne verstehen würde, ist, wenn seine Bibliothek nur den CSS-Code analysiert und in die Leinwand konvertiert oder die native Rendering-Engine des Browsers noch verwendet und es als Bild exportiert. Wenn der Fall der erste ist, ist es schön, aber es wäre extrem cool, sich auf die native Engine des Browsers für den Export zu verlassen. Außerdem gibt es ein Problem mit html2canvas. Sie müssen die Bilder mit einem Rechtsklick manuell speichern Sie werden automatisch in einen Pfad exportiert. user3450548 vor 6 Jahren 0
Gute Frage. http://html2canvas.hertzen.com/documentation> Info, ** erklärt, wie es funktioniert ** und dass es nicht mit jeder CSS-Funktion funktioniert (es gibt auch eine Liste in der Dokumentation). Leun4m vor 6 Jahren 1
@ Leun4m in diesem Fall scheint es, dass er eine Analyse von css durchführt und den Effekt innerhalb des Canvas-Codes neu erzeugt .. :( user3450548 vor 6 Jahren 0

0 Antworten auf die Frage

Verwandte Probleme