Skip to content
Related Articles

Related Articles

Improve Article

How to render HTML to an image ?

  • Last Updated : 21 Jun, 2020
Geek Week

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :