Gibt es eine Möglichkeit, HTML in ein Bild wie PNG zu rendern? Ich weiß, dass es mit Canvas möglich ist, aber ich möchte ein Standard-HTML-Element wie beispielsweise div rendern.

Ich weiß, dass dies eine ziemlich alte Frage ist, die bereits viele Antworten hat, aber ich habe immer noch stundenlang versucht, das zu tun, was ich wollte:

• Generieren Sie bei einer HTML-Datei ein (PNG-) Bild mit transparentem Hintergrund über die Befehlszeile

Mit Chrome Headless (Version 74.0.3729.157 ab dieser Antwort) ist es eigentlich ganz einfach:

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --screenshot --window-size=256,256 --default-background-color=0 button.html

Erläuterung des Befehls:

• Sie führen Chrome über die Befehlszeile aus (hier für den Mac gezeigt, unter Windows oder Linux jedoch ähnlich).
• --headless führt Chrome aus, ohne es zu öffnen, und wird nach Abschluss des Befehls beendet
• --screenshotwird einen Screenshot aufnehmen (beachten Sie, dass eine Datei generiert wird, die screenshot.pngin dem Ordner aufgerufen wird, in dem der Befehl ausgeführt wird)
• --window-sizeErlaube nur einen Teil des Bildschirms zu erfassen (Format ist --window-size=width,height)
• --default-background-color=0ist der Zaubertrick, der Chrome anweist, einen transparenten Hintergrund zu verwenden, nicht die standardmäßige weiße Farbe
• Schließlich geben Sie die HTML-Datei an (als URL entweder lokal oder remote ...)

Ja. HTML2Canvas ist vorhanden, um HTML zu rendern <canvas>(das Sie dann als Bild verwenden können).

HINWEIS: Es ist ein Problem bekannt, dass dies mit SVG nicht funktioniert

Darf ich eine Dom-to-Image- Bibliothek empfehlen , die ausschließlich zur Behebung dieses Problems geschrieben wurde (ich bin der Betreuer).
So verwenden Sie es (weitere hier ):

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then (function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

Es gibt viele Möglichkeiten und alle haben ihre Vor- und Nachteile.

Option 1: Verwenden Sie eine der vielen verfügbaren Bibliotheken

• Dom-to-Image
• wkhtmltoimage (im Tool wkhtmltopdf enthalten)
• IMGKit (für Ruby und basierend auf wkhtmltoimage)
• imgkit (für Python und basierend auf wkhtmltoimage)
• python-webkit2png
• ...

Vorteile

• Die Konvertierung ist die meiste Zeit ziemlich schnell

Nachteile

• Schlechtes Rendering
• Führt kein Javascript aus
• Keine Unterstützung für aktuelle Webfunktionen (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Medienabfragen, ...)
• Manchmal nicht so einfach zu installieren
• Kompliziert maßstabsgetreu

Option 2: Verwenden Sie PhantomJs und möglicherweise eine Wrapper-Bibliothek

• PhantomJs
• Node-Webshot (Javascript-Wrapper-Bibliothek für PhantomJs)
• ...

Vorteile

• Führen Sie Javascript aus
• Ziemlich schnell

Nachteile

• Schlechtes Rendering
• Keine Unterstützung für aktuelle Webfunktionen (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Medienabfragen, ...)
• Kompliziert maßstabsgetreu
• Es ist nicht so einfach, es zum Laufen zu bringen, wenn Bilder geladen werden müssen ...

Option 3: Verwenden Sie Chrome Headless und möglicherweise eine Wrapper-Bibliothek

• Chrome Headless
• Chrome-Devtools-Protokoll
• Puppenspieler (Javascript-Wrapper-Bibliothek für Chrome Headless)
• ...

Vorteile

• Führen Sie Javascript aus
• Nahezu perfektes Rendering

Nachteile

• Es ist nicht so einfach, genau das gewünschte Ergebnis zu erzielen:
  • Timing des Seitenladens
  • Abmessungen des Ansichtsfensters
• Kompliziert maßstabsgetreu
• Ganz langsam und noch langsamer, wenn das HTML externe Links enthält

Option 4: Verwenden Sie eine API

• ApiFlash (basierend auf Chrom)
• EvoPDF (hat eine Option für HTML)
• Grabzit
• HTML / CSS to Image API
• ...

Vorteile

• Führen Sie Javascript aus
• Nahezu perfektes Rendering
• Schnell, wenn die Caching-Optionen korrekt verwendet werden
• Die Skalierung wird von den APIs übernommen
• Präzises Timing, Ansichtsfenster, ...
• Meistens bieten sie einen kostenlosen Plan an

Nachteile

• Nicht kostenlos, wenn Sie vorhaben, sie häufig zu verwenden

Offenlegung: Ich bin der Gründer von ApiFlash. Ich habe mein Bestes getan, um eine ehrliche und nützliche Antwort zu geben.

Alle Antworten hier verwenden Bibliotheken von Drittanbietern, während das Rendern von HTML in ein Bild in reinem Javascript relativ einfach sein kann. Es ist sogar ein Artikel über sie auf der Leinwand Abschnitt auf MDN.

Der Trick ist folgender:

• Erstellen Sie eine SVG mit einem ForeignObject-Knoten, der Ihre XHTML enthält
• Setzen Sie den Quellcode eines Bildes auf die Daten-URL dieser SVG
• drawImage auf die Leinwand
• Setzen Sie die Canvas-Daten auf target image.src

const {body} = document

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = canvas.height = 100

const tempImg = document.createElement('img')
tempImg.addEventListener('load', onTempImageLoad)
tempImg.src = 'data:image/svg+xml,' + encodeURIComponent('<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"><style>em{color:red;}</style><em>I</em> lick <span>cheese</span></div></foreignObject></svg>')

const targetImg = document.createElement('img')
body.appendChild(targetImg)

function onTempImageLoad(e){
  ctx.drawImage(e.target, 0, 0)
  targetImg.src = canvas.toDataURL()
}

Einige Dinge zu beachten

• Der HTML-Code in der SVG muss XHTML sein
• Aus Sicherheitsgründen fungiert die SVG als Daten-URL eines Bildes als isolierter CSS-Bereich für den HTML-Code, da keine externen Quellen geladen werden können. So hat eine Google Schrift zum Beispiel inlined werden , um ein Werkzeug wie mit diesem .
• Selbst wenn der HTML-Code in der SVG die Größe des Bildes überschreitet, wird er korrekt auf die Leinwand gezeichnet. Die tatsächliche Höhe kann jedoch nicht anhand dieses Bildes gemessen werden. Eine Lösung mit fester Höhe funktioniert einwandfrei, aber die dynamische Höhe erfordert etwas mehr Arbeit. Am besten rendern Sie die SVG-Daten in einen Iframe (für isolierten CSS-Bereich) und verwenden die resultierende Größe für die Zeichenfläche.

Sie können PhantomJS verwenden , ein Headless-Webkit (die Rendering-Engine in Safari und (bis vor kurzem) Chrome) -Treiber. Sie können lernen , wie Screen - Capture - Seiten zu tun hier . Hoffentlich hilft das!

Sie können ein HTML-zu-PDF-Tool wie wkhtmltopdf verwenden. Und dann können Sie ein PDF-to-Image-Tool wie imagemagick verwenden. Zugegeben, dies ist serverseitig und ein sehr komplizierter Prozess ...

Die einzige Bibliothek, die ich für Chrome, Firefox und MS Edge arbeiten konnte, war rasterizeHTML . Es gibt eine bessere Qualität als HTML2Canvas aus und wird im Gegensatz zu HTML2Canvas weiterhin unterstützt.

Element abrufen und als PNG herunterladen

var node= document.getElementById("elementId");
var canvas = document.createElement("canvas");
canvas.height = node.offsetHeight;
canvas.width = node.offsetWidth;
var name = "test.png"

rasterizeHTML.drawHTML(node.outerHTML, canvas)
     .then(function (renderResult) {
            if (navigator.msSaveBlob) {
                window.navigator.msSaveBlob(canvas.msToBlob(), name);
            } else {
                const a = document.createElement("a");
                document.body.appendChild(a);
                a.style = "display: none";
                a.href = canvas.toDataURL();
                a.download = name;
                a.click();
                document.body.removeChild(a);
            }
     });

Verwenden Sie html2canvas, fügen Sie einfach das Plugin und die Aufrufmethode hinzu , um HTML in Canvas zu konvertieren, und laden Sie es dann als Bild-PNG herunter

        html2canvas(document.getElementById("image-wrap")).then(function(canvas) {
            var link = document.createElement("a");
            document.body.appendChild(link);
            link.download = "manpower_efficiency.jpg";
            link.href = canvas.toDataURL();
            link.target = '_blank';
            link.click();
        });

Quelle : http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/

Ich erwarte nicht, dass dies die beste Antwort ist, aber es schien interessant genug zu sein, um etwas zu posten.

Schreiben Sie eine App, die Ihren Lieblingsbrowser für das gewünschte HTML-Dokument öffnet, das Fenster richtig dimensioniert und einen Screenshot macht. Entfernen Sie dann die Bildränder.

Verwenden Sie diesen Code, es wird sicherlich funktionieren:

<script type="text/javascript">
 $(document).ready(function () {
	 setTimeout(function(){
		 downloadImage();
	 },1000)
 });
 
 function downloadImage(){
	 html2canvas(document.querySelector("#dvContainer")).then(canvas => {
		a = document.createElement('a'); 
		document.body.appendChild(a); 
		a.download = "test.png"; 
		a.href =  canvas.toDataURL();
		a.click();
	});	 
 }
</script>

Vergessen Sie nicht, die Datei Html2CanvasJS in Ihr Programm aufzunehmen. https://html2canvas.hertzen.com/dist/html2canvas.js

Mit JavaScript allein können Sie dies nicht 100% genau tun.

Es gibt ein Qt-Webkit- Tool und eine Python-Version . Wenn Sie es selbst machen wollen, habe ich Erfolg mit Cocoa gehabt:

[self startTraverse:pagesArray performBlock:^(int collectionIndex, int pageIndex) {

    NSString *locale = [self selectedLocale];

    NSRect offscreenRect = NSMakeRect(0.0, 0.0, webView.frame.size.width, webView.frame.size.height);
    NSBitmapImageRep* offscreenRep = nil;      

    offscreenRep = [[NSBitmapImageRep alloc] initWithBitmapDataPlanes:nil
                                             pixelsWide:offscreenRect.size.width
                                             pixelsHigh:offscreenRect.size.height
                                             bitsPerSample:8
                                             samplesPerPixel:4
                                             hasAlpha:YES
                                             isPlanar:NO
                                             colorSpaceName:NSCalibratedRGBColorSpace
                                             bitmapFormat:0
                                             bytesPerRow:(4 * offscreenRect.size.width)
                                             bitsPerPixel:32];

    [NSGraphicsContext saveGraphicsState];

    NSGraphicsContext *bitmapContext = [NSGraphicsContext graphicsContextWithBitmapImageRep:offscreenRep];
    [NSGraphicsContext setCurrentContext:bitmapContext];
    [webView displayRectIgnoringOpacity:offscreenRect inContext:bitmapContext];
    [NSGraphicsContext restoreGraphicsState];

    // Create a small + large thumbs
    NSImage *smallThumbImage = [[NSImage alloc] initWithSize:thumbSizeSmall];  
    NSImage *largeThumbImage = [[NSImage alloc] initWithSize:thumbSizeLarge];

    [smallThumbImage lockFocus];
    [[NSGraphicsContext currentContext] setImageInterpolation:NSImageInterpolationHigh];  
    [offscreenRep drawInRect:CGRectMake(0, 0, thumbSizeSmall.width, thumbSizeSmall.height)];  
    NSBitmapImageRep *smallThumbOutput = [[NSBitmapImageRep alloc] initWithFocusedViewRect:CGRectMake(0, 0, thumbSizeSmall.width, thumbSizeSmall.height)];  
    [smallThumbImage unlockFocus];  

    [largeThumbImage lockFocus];  
    [[NSGraphicsContext currentContext] setImageInterpolation:NSImageInterpolationHigh];  
    [offscreenRep drawInRect:CGRectMake(0, 0, thumbSizeLarge.width, thumbSizeLarge.height)];  
    NSBitmapImageRep *largeThumbOutput = [[NSBitmapImageRep alloc] initWithFocusedViewRect:CGRectMake(0, 0, thumbSizeLarge.width, thumbSizeLarge.height)];  
    [largeThumbImage unlockFocus];  

    // Write out small
    NSString *writePathSmall = [issueProvider.imageDestinationPath stringByAppendingPathComponent:[NSString stringWithFormat:@"/%@-collection-%03d-page-%03d_small.png", locale, collectionIndex, pageIndex]];
    NSData *dataSmall = [smallThumbOutput representationUsingType:NSPNGFileType properties: nil];
    [dataSmall writeToFile:writePathSmall atomically: NO];

    // Write out lage
    NSString *writePathLarge = [issueProvider.imageDestinationPath stringByAppendingPathComponent:[NSString stringWithFormat:@"/%@-collection-%03d-page-%03d_large.png", locale, collectionIndex, pageIndex]];
    NSData *dataLarge = [largeThumbOutput representationUsingType:NSPNGFileType properties: nil];
    [dataLarge writeToFile:writePathLarge atomically: NO];
}];

Hoffe das hilft!

Installieren Sie Phantomjs

$ npm install phantomjs

Erstellen Sie eine Datei github.js mit folgendem Code

var page = require('webpage').create();
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 1024, height: 768 };
page.open('http://github.com/', function() {
    page.render('github.png');
    phantom.exit();
});

Übergeben Sie die Datei als Argument an phantomjs

$ phantomjs github.js

Das kannst du sicher. Mit der JavaScript-API von GrabzIt können Sie ein Div von einer Webseite wie der folgenden erfassen:

<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "bheight": -1, "height": -1, "width": -1}).Create();
</script>

Wobei #features die ID des zu erfassenden Div ist. Wenn Sie HTML in ein Bild konvertieren möchten. Sie könnten diese Technik verwenden:

GrabzIt("Your Application Key").ConvertHTML(
"<html><body><h1>Hello World!</h1></body></html>").Create();

Haftungsausschluss Ich habe diese API erstellt!

HtmlToImage.jar ist der einfachste Weg, ein HTML in ein Bild zu konvertieren

Konvertieren von HTML in Bilder mit Java

Sie können Ihrem Projekt den Referenz- HTML-Renderer hinzufügen und Folgendes tun:

string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));