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.
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.
Risposte:
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:
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:
--headless
esegue Chrome senza aprirlo ed esce al termine del comando--screenshot
acquisirà uno screenshot (nota che genera un file chiamato screenshot.png
nella cartella in cui viene eseguito il comando)--window-size
consentire 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--screenshot='absolute\path\of\screenshot.png'
ha funzionato per me
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);
});
domtoimage.toSvg
), quindi esegui il rendering da solo su tela e prova a giocare con la risoluzione di quella tela in qualche modo. Probabilmente è possibile implementare tale funzionalità come una sorta di opzione di rendering nella libreria stessa, in modo da poter passare le dimensioni dell'immagine in pixel. Se ne hai bisogno, ti sarei grato per aver creato un problema su Github.
Ci sono molte opzioni e tutte hanno i loro pro e contro.
Professionisti
Contro
Professionisti
Contro
Professionisti
Contro
Professionisti
Contro
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:
drawImage
sulla telaconst {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
Document
un raster (ad esempio a Canvas
), ma poiché nessuno si è preso la briga di standardizzarlo, dobbiamo ricorrere alla follia come illustrato sopra (nessuna offesa per l'autore di questo codice).
È 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 ...
Node.js
. Che ne dici di un semplice frontend?
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);
}
});
rasterizeHTML.drawHTML(node.innerHTML, canvas)
nota che sto chiamando innerHTML sul nodo
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
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));