¿Hay alguna manera de representar html en una imagen como PNG? Sé que es posible con el lienzo, pero me gustaría representar el elemento html estándar como div, por ejemplo.

Sé que esta es una pregunta bastante antigua que ya tiene muchas respuestas, pero aún así pasé horas tratando de hacer lo que quería:

• dado un archivo html, generar una imagen (png) con fondo transparente desde la línea de comando

Con Chrome sin cabeza (versión 74.0.3729.157 a partir de esta respuesta), en realidad es fácil:

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

Explicación del comando:

• ejecuta Chrome desde la línea de comandos (aquí se muestra para Mac, pero suponiendo que sea similar en Windows o Linux)
• --headless ejecuta Chrome sin abrirlo y sale después de completar el comando
• --screenshotcapturará una captura de pantalla (tenga en cuenta que genera un archivo llamado screenshot.pngen la carpeta donde se ejecuta el comando)
• --window-sizePermitir capturar solo una parte de la pantalla (el formato es --window-size=width,height)
• --default-background-color=0es el truco de magia que le dice a Chrome que use un fondo transparente , no el color blanco predeterminado
• finalmente proporcionas el archivo html (como una url local o remota ...)

Si. HTML2Canvas existe para renderizar HTML <canvas>(que luego puede usar como imagen).

NOTA: Existe un problema conocido, que esto no funcionará con SVG

¿Puedo recomendar la biblioteca dom-to-image , que fue escrita únicamente para resolver este problema (soy el responsable)
Así es como lo usa (un poco más aquí ):

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

Hay muchas opciones y todas tienen sus ventajas y desventajas.

Opción 1: use una de las muchas bibliotecas disponibles

• dom-to-image
• wkhtmltoimage (incluido en la herramienta wkhtmltopdf)
• IMGKit (para ruby ​​y basado en wkhtmltoimage)
• imgkit (para python y basado en wkhtmltoimage)
• python-webkit2png
• ...

Pros

• La conversión es bastante rápida la mayor parte del tiempo

Contras

• Mala representación
• No ejecuta javascript
• No se admiten funciones web recientes (FlexBox, Selectores avanzados, Fuentes web, Tamaño de cuadro, Consultas de medios, ...)
• A veces no es tan fácil de instalar
• Complicado a escala

Opción 2: usar PhantomJs y tal vez una biblioteca de contenedor

• PhantomJs
• node-webshot (biblioteca de contenedor javascript para PhantomJs)
• ...

Pros

• Ejecutar Javascript
• Bastante rapido

Contras

• Mala representación
• No se admiten funciones web recientes (FlexBox, Selectores avanzados, Fuentes web, Tamaño de cuadro, Consultas de medios, ...)
• Complicado a escala
• No es tan fácil hacerlo funcionar si hay imágenes para cargar ...

Opción 3: use Chrome Headless y tal vez una biblioteca de contenedor

• Chrome sin cabeza
• protocolo-devtools de Chrome
• Titiritero (biblioteca de envoltura de JavaScript para Chrome sin cabeza)
• ...

Pros

• Ejecutar Javascript
• Representación casi perfecta

Contras

• No es tan fácil tener exactamente el resultado deseado con respecto a:
  • tiempo de carga de la página
  • dimensiones de la ventana gráfica
• Complicado a escala
• Bastante lento e incluso más lento si el html contiene enlaces externos

Opción 4: usar una API

• ApiFlash (basado en cromo)
• EvoPDF (tiene una opción para html)
• Grabzit
• API HTML / CSS a imagen
• ...

Pros

• Ejecutar Javascript
• Representación casi perfecta
• Rápido cuando las opciones de almacenamiento en caché se usan correctamente
• La escala es manejada por las API
• Tiempo preciso, ventana gráfica, ...
• La mayoría de las veces ofrecen un plan gratuito.

Contras

• No es gratis si planeas usarlos mucho

Divulgación: soy el fundador de ApiFlash. Hice todo lo posible para proporcionar una respuesta honesta y útil.

Todas las respuestas aquí usan bibliotecas de terceros, mientras que el procesamiento de HTML en una imagen puede ser relativamente simple en Javascript puro. No se fue incluso un artículo al respecto en la sección de lienzo en el MDN.

El truco es este:

• crear un SVG con un nodo foreignObject que contenga su XHTML
• establecer el src de una imagen a la url de datos de ese SVG
• drawImage en el lienzo
• establecer datos de lienzo para image.src de destino

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

Algunas cosas a tener en cuenta

• El HTML dentro del SVG tiene que ser XHTML
• Por razones de seguridad, el SVG como URL de datos de una imagen actúa como un alcance CSS aislado para el HTML ya que no se pueden cargar fuentes externas. Por lo tanto, una fuente de Google, por ejemplo, tiene que estar en línea usando una herramienta como esta .
• Incluso cuando el HTML dentro del SVG excede el tamaño de la imagen, se dibujará correctamente en el lienzo. Pero la altura real no se puede medir a partir de esa imagen. Una solución de altura fija funcionará bien, pero la altura dinámica requerirá un poco más de trabajo. Lo mejor es representar los datos SVG en un iframe (para un alcance CSS aislado) y usar el tamaño resultante para el lienzo.

Podrías usar PhantomJS , que es un webkit sin cabeza (el motor de renderizado en safari y (hasta hace poco) Chrome). Puedes aprender cómo hacer capturas de pantalla de páginas aquí . ¡Espero que ayude!

Puede utilizar una herramienta HTML a PDF como wkhtmltopdf. Y luego puede usar una herramienta de PDF a imagen como imagemagick. Es cierto que esto es del lado del servidor y un proceso muy complicado ...

La única biblioteca que pude trabajar para Chrome, Firefox y MS Edge fue rasterizeHTML . Produce una mejor calidad que HTML2Canvas y todavía es compatible a diferencia de HTML2Canvas.

Obtener elemento y descargar como 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);
            }
     });

Use html2canvas solo incluya el complemento y el método de llamada para convertir HTML a Canvas y luego descargue como imagen 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();
        });

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

No espero que esta sea la mejor respuesta, pero me pareció lo suficientemente interesante como para publicar.

Escriba una aplicación que abra su navegador favorito al documento HTML deseado, ajuste el tamaño de la ventana correctamente y tome una captura de pantalla. Luego, elimine los bordes de la imagen.

Use este código, seguramente funcionará:

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

Simplemente no olvide incluir el archivo Html2CanvasJS en su programa. https://html2canvas.hertzen.com/dist/html2canvas.js

No puede hacer esto 100% con precisión solo con JavaScript.

Hay una herramienta Qt Webkit por ahí, y una versión de Python . Si quieres hacerlo tú mismo, he tenido éxito 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];
}];

¡Espero que esto ayude!

Instalar phantomjs

$ npm install phantomjs

Cree un archivo github.js con el siguiente código

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

Pase el archivo como argumento a phantomjs

$ phantomjs github.js

HtmlToImage.jar será la forma más sencilla de convertir un html en una imagen

Convertir HTML a imagen usando Java

Puede agregar HtmlRenderer de referencia a su proyecto y hacer lo siguiente,

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