Open In App

How to render HTML to an image ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.




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


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.




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


Output:



Last Updated : 21 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads