Wie konvertieren von HTML zu Bild in Node.js

Ich brauchen, um zu konvertieren ein HTML-template in einem Bild, auf dem ein Node-server.
Der server empfängt den HTML-Code als string. Ich habe versucht, PhantomJS (mit einer Bibliothek namens Webshot), aber es funktioniert nicht gut mit flex-box und modernen CSS-Dateien. Ich habe versucht, Chrome headless-browser, aber es scheint nicht zu haben eine API zum Parsen von html, nur die URL.

Was ist der derzeit beste Weg, um zu konvertieren ein Stück HTML-Code in die Bild?

Werde ich versuchen, hier genauer zu sein. Ich brauche eine thumbnail-pic aus einer HTML-Vorlage, wie: 

<div style="color:red;width:300px;hegiht:300px;">hello world</div>

Ich habe bereits versucht, eine Bibliothek namens webshot, dass sollte genau das tun, mit PhantomJS unter der Haube, aber die erzeugte thumbnail nicht korrekt, stellt die eigentliche HTML-Vorlage, weil der nicht unterstützten CSS, wie flex-box.
Ich muss es tun, auf einem Node.js server - der client sendet den html-Code als string, und der server sendet ein Vorschaubild im JPG-oder PNG-format.

Gibt es eine Möglichkeit zur Nutzung von headless Chrome im template-Modus anstelle des URL-Modus? Ich meine, statt etwas zu tun, wie 

chrome.goTo('http://test.com')

Brauche ich etwas wie:

chrome.evaluate('<div>hello world</div>');

Weitere option, die hier vorgeschlagen wird, in den Kommentaren zu diesem post, ist zu
speichern Sie die Vorlage in eine Datei auf dem server und dann servieren Sie es lokal tun und etwas wie:

chrome.goTo('http://localhost/saved_template');

Aber diese Variante scheint mir etwas umständlich. Gibt es eine andere, einfachere Lösung?

InformationsquelleAutor kundasaba | 2017-06-26
  1. 3

    Können Sie ganz einfach tun es im frontend mit html2canvas. Auf backend kann man den html-Code in eine Datei und den Zugriff mit einem Datei-URI (ich.e: file:///home/user/path/to/your/file.html), es sollte funktionieren mit chrome headless-browser und Alptraum (screenshot-Funktion). Eine weitere option ist das einrichten eines einfachen HTTP-server und Zugriff auf die url.

    • ja, ich dachte über die Möglichkeit der Verwendung von http-server, aber es scheint ein bisschen seltsam...wenn niemand deuten auf eine einfachere Lösung, krank zu akzeptieren verkaufen, weil ich angefangen zu denken, es gibt keine einfachere Lösung, tnx
    • Sie können schreiben Sie einfach die html-Datei und ein Datei-URI statt (ich.e: file:///home/user/path/to/your/file.html), es sollte funktionieren mit chrome-headless:
    • ach richtig, ich hatte nicht gedacht, über die Datei-uri Sache. klingt gut, danke!
    InformationsquelleAutor gnuns
  2. 4

    Können Sie eine Bibliothek mit dem Namen "der Puppenspieler".
    Beispiel-code-snippet :

     const browser = await puppeteer.launch()
 const page = await browser.newPage()
 await page.setViewport({
            width: 960,
            height: 760,
            deviceScaleFactor: 1,
          });            
 await page.setContent(imgHTML)
 await page.screenshot({path: example.png})
 await browser.close()

    Dadurch sparen Sie einen screenshot der HTML in das root-Verzeichnis.

    • Dieses ist ausgezeichnete und gut gepflegt und hat die Unterstützung für die neuesten web-standards!
    InformationsquelleAutor rudresh solanki
Schreibe einen Kommentar