C'è un modo per eseguire il rendering html di immagini come PNG? So che è possibile con canvas ma vorrei renderizzare l'elemento html standard come div per esempio.

So che questa è una domanda piuttosto vecchia che ha già molte risposte, eppure ho ancora passato ore a cercare di fare davvero quello che volevo:

• dato un file html, genera un'immagine (png) con sfondo trasparente dalla riga di comando

Utilizzando Chrome senza testa (versione 74.0.3729.157 a partire da questa risposta), in realtà è facile:

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

Spiegazione del comando:

• esegui Chrome dalla riga di comando (qui mostrato per Mac, ma presupponendo simile su Windows o Linux)
• --headless esegue Chrome senza aprirlo ed esce al termine del comando
• --screenshotacquisirà uno screenshot (nota che genera un file chiamato screenshot.pngnella cartella in cui viene eseguito il comando)
• --window-sizeconsentire di catturare solo una parte dello schermo (il formato è --window-size=width,height)
• --default-background-color=0è il trucco magico che dice a Chrome di utilizzare uno sfondo trasparente , non il colore bianco predefinito
• infine fornisci il file html (come url locale o remoto ...)

Sì. HTML2Canvas esiste per eseguire il rendering HTML <canvas>(che è quindi possibile utilizzare come immagine).

NOTA: esiste un problema noto che non funziona con SVG

Posso raccomandare una libreria dom-to-image , che è stata scritta esclusivamente per risolvere questo problema (sono il manutentore).
Ecco come lo usi (alcuni altri qui ):

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);
    });

Ci sono molte opzioni e tutte hanno i loro pro e contro.

Opzione 1: utilizzare una delle molte librerie disponibili

• dom-to-immagine
• wkhtmltoimage (incluso nello strumento wkhtmltopdf)
• IMGKit (per rubino e basato su wkhtmltoimage)
• imgkit (per python e basato su wkhtmltoimage)
• python-webkit2png
• ...

Professionisti

• La conversione è abbastanza veloce per la maggior parte del tempo

Contro

• Cattivo rendering
• Non esegue JavaScript
• Nessun supporto per le funzionalità Web recenti (FlexBox, Selettori avanzati, Font Web, Dimensionamento box, Media query, ...)
• A volte non è così facile da installare
• Complicato per ridimensionare

Opzione 2: utilizzare PhantomJs e forse una libreria wrapper

• PhantomJs
• node-webshot (libreria wrapper javascript per PhantomJs)
• ...

Professionisti

• Esegui Javascript
• Abbastanza veloce

Contro

• Cattivo rendering
• Nessun supporto per le funzionalità Web recenti (FlexBox, Selettori avanzati, Font Web, Dimensionamento box, Media query, ...)
• Complicato per ridimensionare
• Non è così facile farlo funzionare se ci sono immagini da caricare ...

Opzione 3: utilizzare Chrome Headless e forse una libreria wrapper

• Chrome senza testa
• chrome-DevTools-protocollo
• Puppeteer (libreria wrapper javascript per Chrome senza testa)
• ...

Professionisti

• Esegui Javascript
• Rendering quasi perfetto

Contro

• Non è così facile avere esattamente il risultato desiderato per quanto riguarda:
  • tempismo di caricamento della pagina
  • dimensioni della finestra
• Complicato per ridimensionare
• Abbastanza lento e persino più lento se l'html contiene collegamenti esterni

Opzione 4: utilizzare un'API

• ApiFlash (basato su Chrome)
• EvoPDF (ha un'opzione per html)
• Grabzit
• API da HTML / CSS a Image
• ...

Professionisti

• Esegui Javascript
• Rendering quasi perfetto
• Veloce quando le opzioni di memorizzazione nella cache sono utilizzate correttamente
• La scala è gestita dalle API
• Tempi precisi, finestra, ...
• Il più delle volte offrono un piano gratuito

Contro

• Non gratuito se prevedi di usarli molto

Disclosure: sono il fondatore di ApiFlash. Ho fatto del mio meglio per fornire una risposta onesta e utile.

Tutte le risposte qui usano librerie di terze parti mentre il rendering HTML su un'immagine può essere relativamente semplice in Javascript puro. C'è stato anche un articolo su di esso nella sezione tela su MDN.

Il trucco è questo:

• crea un SVG con un nodo foreignObject contenente il tuo XHTML
• imposta lo src di un'immagine sull'URL dei dati di quel file SVG
• drawImage sulla tela
• imposta i dati del canvas su 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()
}

Alcune cose da notare

• L'HTML all'interno di SVG deve essere XHTML
• Per motivi di sicurezza, l'SVG come url di dati di un'immagine funge da ambito CSS isolato per l'HTML poiché non è possibile caricare origini esterne. Quindi, ad esempio, un carattere Google deve essere integrato utilizzando uno strumento come questo .
• Anche quando l'HTML all'interno dell'SVG supera la dimensione dell'immagine, verrà disegnato correttamente sulla tela. Ma l'altezza effettiva non può essere misurata da quell'immagine. Una soluzione ad altezza fissa funzionerà perfettamente, ma l'altezza dinamica richiederà un po 'più di lavoro. La cosa migliore è rendere i dati SVG in un iframe (per ambito CSS isolato) e usare la dimensione risultante per il canvas.

È possibile utilizzare PhantomJS , che è un driver webkit senza testa (il motore di rendering in Safari e (fino a poco tempo fa) Chrome) driver. Puoi imparare come fare la cattura dello schermo delle pagine qui . Spero che aiuti!

Puoi usare uno strumento da HTML a PDF come wkhtmltopdf. E quindi è possibile utilizzare un PDF per lo strumento di immagine come imagemagick. Certamente questo è un lato server e un processo molto complicato ...

L'unica libreria che ho potuto lavorare per Chrome, Firefox e MS Edge era rasterizeHTML . Produce una migliore qualità di HTML2Canvas ed è ancora supportato a differenza di HTML2Canvas.

Ottenere Element e scaricarlo come PNG

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);
            }
     });

Usa html2canvas includi solo il plug-in e chiama il metodo per convertire HTML in Canvas, quindi scarica come immagine PNG

        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();
        });

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

Non mi aspetto che questa sia la risposta migliore, ma mi è sembrato abbastanza interessante postare.

Scrivi un'app che apre il tuo browser preferito al documento HTML desiderato, ridimensiona correttamente la finestra e scatta una schermata. Quindi, rimuovere i bordi dell'immagine.

Usa questo codice, funzionerà sicuramente:

<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>

Non dimenticare di includere il file Html2CanvasJS nel tuo programma. https://html2canvas.hertzen.com/dist/html2canvas.js

Non puoi farlo con precisione al 100% solo con JavaScript.

C'è uno strumento Qt Webkit là fuori e una versione di Python . Se vuoi farlo da solo, ho avuto successo con Cocoa:

[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];
}];

Spero che questo ti aiuti!

Installa phantomjs

$ npm install phantomjs

Crea un file github.js con il seguente codice

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();
});

Passa il file come argomento a phantomjs

$ phantomjs github.js

HtmlToImage.jar sarà il modo più semplice per convertire un HTML in un'immagine

Conversione da HTML a immagine tramite Java

Puoi aggiungere HtmlRenderer di riferimento al tuo progetto ed eseguire le seguenti operazioni,

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