Posso recomendar a biblioteca dom-to-image , que foi escrita apenas para resolver este problema (eu sou o mantenedor).
Aqui está como você o usa (mais alguns aqui):

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

Opção 1: Usar uma das muitas bibliotecas disponíveis

• dom-a-imagem
• wkhtmltoimage (incluído na ferramenta wkhtmltopdf)
• IMGKit (para ruby e com base no wkhtmltoimage)
• imgkit (para python e baseado em wkhtmltoimage)
• python-webkit2png
• ...

Prós

• a conversão é bastante rápida na maioria das vezes

Cons

• má representação
• não executa javascript
• não existe suporte para funcionalidades Web recentes (FlexBox, selectores avançados, Webfonts, dimensionamento de caixas, consultas multimédia, etc ...)
• Às Vezes não é tão fácil de instalar
• complicado de escalar

• PhantomJs
• node-webshot (javascript wrapper library for PhantomJs)
• ...

Prós

• Executar Javascript
• bastante rápido

Cons

• má representação
• não existe suporte para funcionalidades Web recentes (FlexBox, selectores avançados, Webfonts, dimensionamento de caixas, consultas multimédia, etc ...)
• complicado de escalar
Não é assim tão fácil. trabalhe se houver imagens a serem carregadas ...

Opção 3: Usar o Cromo sem cabeça e talvez uma biblioteca de embalagens

• Sem Cabeça Cromada
• cromo-devtools-protocol
• Mestre das Marionetas (biblioteca de papel javascript sem cabeça cromada)
• ...

Prós

• Executar Javascript
• uma representação quase perfeita

Cons

Não é tão fácil ter exactamente o que se quer. resultado:
• calendário da carga das páginas
• dimensões da área de visualização
• complicado de escalar
• bastante lento e ainda mais lento se o html contiver ligações externas

Opção 4: Utilizar uma API

• ApiFlash (baseado no cromo)
• EvoPDF (tem uma opção para html)
• Grabzit
• ...

Prós

• Executar Javascript
Quase perfeito renderização
• Rápido quando as opções de cache são usadas correctamente
• a escala é manipulada pela APIs
Cronometragem exacta, viewport ,.. A maior parte das vezes oferecem um plano gratuito.

Cons

• não é livre se planeia usá-los muito

Disclaimer: eu sou o fundador do ApiFlash. Fiz o meu melhor para dar uma resposta honesta e útil.

Você poderia usar PhantomJS , que é um webkit sem cabeça (o motor de renderização em safari e (até recentemente) Chrome) driver. Você pode aprender como fazer captura de tela de páginas aqui. Espero que isso ajude!

Você pode usar uma ferramenta HTML para PDF como o wkhtmltopdf. E então você pode usar um PDF para ferramenta de imagem como imagemagick. Reconhecidamente este é o lado do servidor e um processo muito complicado...

Escreva um aplicativo que abre o seu navegador favorito para o documento HTML desejado, dimensiona a janela adequadamente e faz uma captura de ecrã. Em seguida, remover os contornos da imagem.

A única biblioteca que consegui trabalhar para o Chrome, o Firefox e o MS Edge foi rasterizeHTML. Ele produz uma melhor qualidade que o HTML2Canvas e ainda é suportado ao contrário do HTML2Canvas.

Obter o elemento e transferir 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);
            }
     });

Você não pode fazer isso 100% com precisão apenas com JavaScript.

Existe uma ferramenta do Qt Webkit lá fora, e uma versão em python . Se queres ser tu a fazê-lo, tive sucesso com o cacau.

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

Instale phantomjs

$ npm install phantomjs

Criar um github ficheiro.js com o seguinte 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();
});

$ phantomjs github.js

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

Onde # recursos é o ID DO div para capturar. Se você quiser converter HTML para uma imagem. Você poderia usar esta técnica:

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

Disclaimer eu construí esta API!

Desenhar os objectos DOM numa tela mostra uma forma rápida de o conseguir.

De um ponto de vista de desempenho, este método deve ser leve. Porque o renderizador svg e o renderizador dom podem aparentemente passar buffers para trás e para a frente, conforme necessário. O que faz sentido, porque é tudo código principal.

Usar html2canvas apenas incluir o 'plugin' e o método de chamada para converter HTML em área de desenho e depois transferir como imagem 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();
        });

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

Use este código, ele certamente vai 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>

Não se esqueça de incluir o ficheiro Html2CanvasJS no seu programa. https://html2canvas.hertzen.com/dist/html2canvas.js

Podes Adicionar referência HtmlRenderer para o seu projecto e faça o seguinte,

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