htmltoimage
rc-0.1
Erzeugt ein Bild aus einem DOM-Knoten mithilfe von HTML5-Canvas und SVG.
Verzweigen Sie vom Dom zum Image mit besser wartbarem Code und einigen neuen Funktionen.
npm install --save html-to-image
/* ES6 */import * as htmlToImage from 'html-to-image';import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';/* ES5 */var htmlToImage = require(' html-to-image');Alle Funktionen der obersten Ebene akzeptieren DOM-Knoten- und Rendering-Optionen und geben ein erfülltes Versprechen mit der entsprechenden Daten-URL zurück:
toSvg
toPng
toJpeg
toBlob
toPixelData
Gehen Sie von den folgenden Beispielen aus.
Holen Sie sich eine Base64-codierte Daten-URL für ein PNG-Bild und zeigen Sie sie sofort an:
var node = document.getElementById('my-node');htmlToImage.toPng(node)
.then(function (dataUrl) {var img = new Image();img.src = dataUrl;document.body.appendChild(img);
})
.catch(function (error) {console.error('oops, da ist etwas schiefgelaufen!', error);
});Holen Sie sich eine Base64-codierte Daten-URL für ein PNG-Bild und laden Sie sie herunter (mit Download):
htmlToImage.toPng(document.getElementById('my-node'))
.then(function (dataUrl) {download(dataUrl, 'my-node.png');
});Holen Sie sich ein PNG-Bild-Blob und laden Sie es herunter (mit FileSaver):
htmlToImage.toBlob(document.getElementById('my-node'))
.then(function (blob) {window.saveAs(blob, 'my-node.png');
});Speichern Sie ein komprimiertes JPEG-Bild und laden Sie es herunter:
htmlToImage.toJpeg(document.getElementById('my-node'), { qualität: 0,95 })
.then(function (dataUrl) {var link = document.createElement('a');link.download = 'my-image-name.jpeg';link.href = dataUrl;link.click();
}); Rufen Sie eine SVG-Daten-URL ab, filtern Sie jedoch alle <i> -Elemente heraus:
Funktionsfilter (Knoten) {
return (node.tagName !== 'i');}htmlToImage.toSvg(document.getElementById('my-node'), { filter: filter })
.then(function (dataUrl) {/* etwas tun */
});Rufen Sie die rohen Pixeldaten als Uint8Array ab, wobei alle 4 Array-Elemente die RGBA-Daten eines Pixels darstellen:
var node = document.getElementById('my-node');htmlToImage.toPixelData(node)
.then(function (pixels) {for (var y = 0; y < node.scrollHeight; ++y) { for (var x = 0; x < node.scrollWidth; ++x) {pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);/* pixelAtXY ist ein Uint8Array[4], das RGBA-Werte des Pixels bei (x, y) im enthält Bereich 0..255 */pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4 }}
});Holen Sie sich ein HTMLCanvasElement und zeigen Sie es sofort an:
htmlToImage.toCanvas(document.getElementById('my-node'))
.then(function (canvas) {document.body.appendChild(canvas);
});Eine Funktion, die den DOM-Knoten als Argument verwendet. Sollte „true“ zurückgeben, wenn der übergebene Knoten in die Ausgabe einbezogen werden soll. Das Ausschließen eines Knotens bedeutet, dass auch seine untergeordneten Knoten ausgeschlossen werden.
Nicht auf dem Root-Knoten aufgerufen.
Ein String-Wert für die Hintergrundfarbe, ein beliebiger gültiger CSS-Farbwert.
Breite und Höhe in Pixeln, die vor dem Rendern auf den Knoten angewendet werden sollen.
Ein Objekt, dessen Eigenschaften vor dem Rendern in den Stil des Knotens kopiert werden sollen. Vielleicht möchten Sie in dieser Referenz nach JavaScript-Namen von CSS-Eigenschaften suchen.
Eine Zahl zwischen 0 und 1 die die Bildqualität des JPEG-Bilds angibt (z. B. 0.92 => 92% ).
Standardmäßig ist 1.0 ( 100% )
Auf „true“ setzen, um die aktuelle Uhrzeit als Abfragezeichenfolge an URL-Anfragen anzuhängen und so Cache-Busting zu ermöglichen.
Der Standardwert ist false
Eine Daten-URL für ein Platzhalterbild, das beim Abrufen eines Bilds verwendet wird, schlägt fehl.
Der Standardwert ist eine leere Zeichenfolge und es werden leere Bereiche für fehlerhafte Bilder gerendert.
Es wurde auf den neuesten Versionen von Chrome und Firefox (49 bzw. 45 zum Zeitpunkt des Schreibens) getestet, wobei Chrome bei großen DOM-Bäumen eine deutlich bessere Leistung erbringt, möglicherweise aufgrund der leistungsfähigeren SVG-Unterstützung und der Tatsache, dass es die Eigenschaft CSSStyleDeclaration.cssText unterstützt.
Internet Explorer wird (und wird) nicht unterstützt, da er das SVG <foreignObject> -Tag nicht unterstützt.
Safari wird nicht unterstützt, da es ein strengeres Sicherheitsmodell für das <foreignObject> -Tag verwendet. Die empfohlene Problemumgehung besteht darin, toSvg zu verwenden und auf dem Server zu rendern.
Derzeit wird nur die Standardbibliothek verwendet. Stellen Sie jedoch sicher, dass Ihr Browser Folgendes unterstützt:
Versprechen
SVG <foreignObject> -Tag
Es könnte eines Tages eine einfache und standardmäßige Möglichkeit geben (oder existiert sie vielleicht schon?), Teile des HTML-Codes in ein Bild zu exportieren (und dann kann dieses Skript nur als Beweis für all die Hürden dienen, die ich durchlaufen musste, um so etwas zu bekommen). offensichtliche Sache getan), aber ich habe bisher noch keines gefunden.
Diese Bibliothek nutzt eine Funktion von SVG, die es ermöglicht, beliebige HTML-Inhalte innerhalb des <foreignObject> -Tags zu haben. Um diesen DOM-Knoten für Sie zu rendern, werden folgende Schritte ausgeführt:
Klonen Sie den ursprünglichen DOM-Knoten rekursiv
Berechnen Sie den Stil für den Knoten und jeden Unterknoten und kopieren Sie ihn in den entsprechenden Klon
und vergessen Sie nicht, Pseudoelemente neu zu erstellen, da diese natürlich in keiner Weise geklont werden
Webfonts einbetten
Finden Sie alle @font-face -Deklarationen, die Webschriftarten darstellen könnten
Datei-URLs analysieren und entsprechende Dateien herunterladen
Base64-Kodierung und Inline-Inhalte als Daten-URLs
Verketten Sie alle verarbeiteten CSS-Regeln, fügen Sie sie in ein <style> -Element ein und hängen Sie es dann an den Klon an
Bilder einbetten
Bild-URLs in <img> -Elemente einbetten
Inline-Bilder, die in der background -CSS-Eigenschaft verwendet werden, ähnlich wie Schriftarten
Serialisieren Sie den geklonten Knoten in XML
Wickeln Sie XML in das <foreignObject> -Tag ein, dann in das SVG und machen Sie es dann zu einer Daten-URL
Um PNG-Inhalte oder Rohpixeldaten als Uint8Array abzurufen, erstellen Sie optional ein Image-Element mit SVG als Quelle, rendern es auf einer Off-Screen-Leinwand, die Sie ebenfalls erstellt haben, und lesen dann den Inhalt von der Leinwand
Erledigt!
Wenn der DOM-Knoten, den Sie rendern möchten, ein <canvas> -Element enthält, auf dem etwas gezeichnet ist, sollte dies einwandfrei gehandhabt werden, es sei denn, die Leinwand ist fehlerhaft – in diesem Fall wird das Rendern eher nicht erfolgreich sein.
Das Rendern schlägt bei großen DOMs aufgrund unterschiedlicher Daten-URI-Grenzwerte fehl.
Pull-Requests und Stars sind herzlich willkommen.
Bei Fehlern und Funktionswünschen erstellen Sie bitte ein Problem.
