How to render HTML to an image ?

21 Jun, 2020
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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">    </script>      <script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js">    </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:
CSS-Misc
HTML-Misc
Picked
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS