How to render HTML to an image ?

HTML code can be converted into an image by different means such as html2canvas JavaScript library or sometimes by CSS as well it can be very helpful and useful for users who wish to share the image of the code but can’t share the exact code. The user will generate an image from the webpage and have an option to convert a particular part of the HTML page into the picture.

Example 1: This is a relatively easy implementation which converts the code into an image using CSS. The below code does not involve any JavaScript in any manner.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>HTML Code to Image</title>
  
    <style>
        .image {
            text-align: center;
            padding: 20px;
            color: white;
            font-size: 90px;
            width: 800px;
            height: 400px;
            font-family: 'Times New Roman';
            background-image: linear-gradient(
                140deg, #3a9c50 0%, #006b18 100%);
        }
    </style>
</head>
  
<body>
    <div class="image">
        <h4>GEEKS FOR GEEKS</h4>
    </div>
</body>
  
</html>

chevron_right


Output:

Example 2: The example is implemented to convert the HTML code into an image, where the preview button shows the photo which is converted. The download option is given to save it on the local computer by using html2canvas JavaScript library.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
  
    <script src=
    </script>
  
    <title>
        How to render HTML to an image?
    </title>
</head>
  
<body>
    <div id="html-content-holder"
        style="background-color: #F0F0F1;color: 
                #00cc65; width: 500px;
                padding-left: 25px;
                padding-top: 10px;">
  
        <strong>GEEKS FOR GEEKS</strong>
  
        <p style="color: #3e4b51;">
            A Computer Science portal for geeks. 
            It contains well written, well thought
            and well explained computer science 
            and programming articles, quizzes and ...
        </p>
  
        <p style="color: #3e4b51;">
            A Computer Science portal for geeks. 
            It contains well written, well thought 
            and well explained computer science and
            programming articles, quizzes and ...
        </p>
    </div>
  
    <input id="btn-Preview-Image" 
        type="button" value="Preview" />
  
    <a id="btn-Convert-Html2Image" href="#">
        Download
    </a>
      
    <br />
      
    <h3>Preview :</h3>
    <div id="previewImage"></div>
  
    <script>
        $(document).ready(function () {
  
            // Global variable
            var element = $("#html-content-holder");
            var getCanvas; // Global variable
  
            $("#btn-Preview-Image").on('click', function () {
                html2canvas(element, {
                    onrendered: function (canvas) {
                        $("#previewImage").append(canvas);
                        getCanvas = canvas;
                    }
                });
            });
  
            $("#btn-Convert-Html2Image").
                        on('click', function () {
                var imgageData = getCanvas.toDataURL("image/png");
  
                // Now browser starts downloading it 
                // instead of just showing it
                var newData = imgageData.replace(
                    /^data:image\/png/, 
                    "data:application/octet-stream");
  
                $("#btn-Convert-Html2Image")
                    .attr("download", "gfg.png")
                    .attr("href", newData);
            });
        });
    </script>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.