If you're looking for a solution to convert DOM elements to images, I highly recommend checking out the dom-to-image library. This library was specifically created to tackle this issue and I happen to be the maintainer of it.
To use the library, follow these simple steps (additional information can be found here):

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

domtoimage.toPng(element)
    .then(function (dataUrl) {
        var image = new Image();
        image.src = dataUrl;
        document.body.appendChild(image);
    })
    .catch(function (error) {
        console.error('Oops, something went wrong!', error);
    });

Absolutely. You can utilize HTML2Canvas to convert HTML into a <canvas> element, which can then be used as an image.

Keep in mind that there is a limitation with SVG compatibility when using this method.

While many answers rely on third-party libraries to render HTML to an image, it can actually be done quite simply with pure Javascript. There was even an article about this technique in the canvas section on MDN.

The key is as follows:

• Create an SVG with a foreignObject node that contains your XHTML content
• Set the src attribute of an image to the data URL of that SVG
• Use drawImage to draw onto the canvas
• Set the canvas data to the target image's 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()
}

Here are some important points:

• The HTML inside the SVG must be in XHTML format
• For security reasons, external sources cannot be loaded when using the SVG as a data URL for an image. Any resources like Google Fonts need to be inline using a tool such as this one.
• Even if the HTML content inside the SVG exceeds the size of the image, it will still be drawn correctly onto the canvas. However, measuring the actual height from the image itself may not work accurately. A fixed height approach should work fine, but dynamic height will require more effort. It's recommended to render the SVG data into an iframe (for isolated CSS scope) and use the resulting size for the canvas.

Although there are numerous answers to this old question, I found myself spending hours trying to achieve what I wanted:

• convert an html file into a (png) image with a transparent background using the command line

With Chrome headless (version 74.0.3729.157 at the time of writing), it is surprisingly simple:

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

Breakdown of the command:

• launch Chrome from the command line (demonstrated on a Mac, but similar process on Windows or Linux)
• --headless enables Chrome to run without opening and exits after executing the command
• --screenshot captures a screenshot (note: creates a file named screenshot.png in the current directory)
• --window-size specifies the dimensions of the captured area (syntax: --window-size=width,height)
• --default-background-color=0 instructs Chrome to use a transparent background instead of the default white color
• lastly, you provide the path to the html file (either local or remote URL...)

One great option is to utilize Puppeteer, a headless browser tool similar to PhantomJS. It can help you easily capture screenshots of web pages by following the instructions here. Give it a try and see how it works for you!

The library that has shown compatibility with Chrome, Firefox, and MS Edge for me is rasterizeHTML. It delivers higher-quality outputs compared to HTML2Canvas and is actively maintained unlike HTML2Canvas.

Retrieving Element and Saving as PNG

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

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

A useful technique is to convert HTML to PDF using software such as wkhtmltopdf, followed by converting the PDF into an image using a tool like imagemagick. While this method may seem complex and server-side oriented...

After reading Sjeiti's intriguing answer, I was inspired by the concept of rendering HTML in an image using plain JavaScript with just a few lines of code.

Of course, it's essential to understand the limitations of this approach (refer to Sjeiti's answer for more details).

In my exploration, I decided to take Sjeiti's code a few steps further.

An SVG image offers virtually unlimited resolution due to its vector graphics nature. However, you may have observed that the image generated by Sjeiti's code lacked high resolution. To address this, I enhanced the code in my example below by scaling the SVG image before transferring it to the canvas element. Additionally, I implemented the final step of saving it as a PNG file to provide a comprehensive solution.

I present two runnable code snippets:

The first snippet showcases the infinite resolution capability of an SVG. Try running it and zooming in with your browser to observe that the resolution remains consistent even at higher magnifications.

In the following runnable snippet, I utilized backticks to define a template string with line breaks for better clarity when viewing the rendered HTML. If the HTML is on a single line, the code appears concise like this:

const body = document.getElementsByTagName('BODY')[0];
const img = document.createElement('img')
// Rest of the code here...
body.appendChild(img);

Below is the same snippet presented as a runnable demonstration:

// Code block goes here

Zoom in and witness the infinitely scalable resolution of the SVG.

The subsequent runnable snippet below incorporates two additional enhancements mentioned earlier: improving resolution through SVG scaling and then saving the result as a PNG image.

// More code here

<table border="0">
    <tr>
        <td colspan="2">
            Additional info about the HTML-text and imagery.
        </td>
    </tr>
    <tr>
        <td width="250">
            // Source div presentation here
        </td>
        <td valign="top">
            // Image generation UI components here
        </td>
    </tr>
</table>

Experiment with different scalings. For instance, setting the scale to 10 results in a significantly improved resolution in the PNG output. I've also included a small enhancement: a checkbox to toggle transparency in the PNG image if desired.

Note:

Due to certain browser restrictions, the Save button does not function correctly in Chrome and Edge when executing this script within Stack Overflow. This limitation is explained in detail here.

To address this issue, I've shared this code snippet on https://jsfiddle.net/7gozdq5v/ where it operates smoothly in those browsers.

While this may not be the ultimate solution, I found it intriguing enough to share.

Create a program that launches your preferred web browser to a specific HTML file, adjusts the window size accordingly, captures a screenshot, and then eliminates any borders from the image.

Transform your HTML into a canvas image by using the html2canvas plugin, which allows you to easily convert HTML elements into images in PNG format.

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

Resource:

For a solution that is sure to work, try using this code snippet:

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

Just make sure to include the Html2CanvasJS file in your development environment.

Using only JavaScript, achieving 100% accuracy might not be possible.

However, there are alternative options available such as a Qt Webkit tool and a python version. If you prefer a DIY approach, Cocoa has proven to be successful:

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

    // Generating 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];  

    // Saving out the thumbnails
    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];

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

I trust this information proves useful!

Here is a summary of what I've accomplished.

Please refer to App.js for the actual code snippet.

Access the complete source code here

If you found it useful, feel free to give it a star!✌️

Latest Update:

import * as htmlToImage from 'html-to-image';
import download from 'downloadjs';

import logo from './logo.svg';
import './App.css';

const App = () => {
  const onButtonClick = () => {
    var domElement = document.getElementById('my-node');
    htmlToImage.toJpeg(domElement)
      .then(function (dataUrl) {
        console.log(dataUrl);
        download(dataUrl, 'image.jpeg');
      })
      .catch(function (error) {
        console.error('Oops, something went wrong!', error);
      });
  };
  return (
    <div className="App" id="my-node">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Modify <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a><br></br>
        <button onClick={onButtonClick}>Download as JPEG</button>
      </header>
    </div>
  );
}

export default App;

I delved into this issue myself and discovered a fantastic solution for your problem.

We can utilize the html-to-image JavaScript library to convert HTML code into an image.

npm install html-to-image

HTML Code

<div>
<div id="capture">
 <p>
    <span>Heading Of Image</span><br></br>
    <span>This is color Image</span><br></br>
    <img src="Your/ImagePath/ifany.jpg" width="100%" />
    <span>Footer Of the Image</span>
 </p>
</div>
<h2>Generated Image</h2>
<div id="real">
</div></div>

Javascript Code

var htmlToImage = require('html-to-image');
var node = document.getElementById('capture');
htmlToImage.toJpeg(node, { quality: 1, backgroundColor: "#FFFFFF", height: node.clientHeight, width: node.clientWidth })
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        var div = document.getElementById("real")
        div.appendChild(img)
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

This example allows you to view your image within a <div> tag with id = 'real'. You now have the option to include saving, downloading, or uploading the image in the code.

A useful npm package to consider is "html-to-image".

Overview: ✂️ This package generates an image from a DOM node using HTML5 canvas and SVG.

How to use:

Installation

npm install --save html-to-image

Example Usage

/* Using ES6 syntax */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

To obtain a PNG image base64-encoded data URL and download it (using the download function):

htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {
    download(dataUrl, 'my-node.png');
  });

Begin by installing phantomjs

$ npm install phantomjs

Next, create a file named github.js with the following code:

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

Finally, pass the file as an argument to phantomjs using the command:

$ phantomjs github.js

One of the great features of Playwright is the ease with which you can capture a screenshot using the page.screenshot() method. This functionality is available not only in Python, but also in Node.js, Java, and .NET.

In the below example, we demonstrate how to capture a screenshot in Python:
from playwright.async_api import async_playwright

async with async_playwright() as p:
     browser = await p.chromium.launch()
     page = await browser.new_page()
     await page.goto('https://google.com')
     await page.screenshot(path=f'screenshot.png')
     await browser.close()

Easily transform HTML into an image with the HtmlToImage.jar tool.

Check out this resource for guidance on converting HTML to an image using Java: Converting HTML to image using java