JS

Covert The HTML content into an image using jQuery

Here Laxmikant has explained how to Convert The HTML content into an image using jQuery.

If you want to save /convert the HTML content as an image this jQuery code can be helpful. There is a jquery plugin i.e html2canvas, By using this plugin we can easily convert the HTML content of any part i.e a particular div content also to image.

Convert The HTML content into a image using jQuery

This functionality is more useful when you have to generate unique images dynamically. Like a screenshot of HTML Content.

convert-htnl-content-image-jquery

First we need to include the jquery.min.js,html2canvas.js files to your project.
Click this link to download html2canvas.js file

This is my content here I am going to convert HTML content image and text to image by using the html2canvas library via jQuery.

 <div class="col-md-offset-4 col-md-4 col--md-offset-4 top">
        <div id="generateImg" style="border:1px solid;text-align:center;">
            <img src="logo.jpg">
            <h4> Convert the html content into a image using jquery</h4>
            <input id="txtbox" type="text" value="" placeholder="Enter text here!!..." style="background-color: transparent;border: 0px solid;" class="form-control" width="300" />
            <br />
        </div>
        <button id="generateimg" type="button" class="btn btn-info">Generate Image</button>

        <div id="img" style="display:none;">
            <img src="" id="newimage" class="image" />
        </div>
    </div>

In the above code when you click on the Generate image button then it will convert the entire first div HTML content to image and it will display as an image in the second div.

Image generation code

 <script>
        $(function () {
            $("#generateimg").click(function () {
                html2canvas($("#generateImg"), {
                    
                    onrendered: function (canvas) {
                        var textBox = $.trim($('input[type=text]').val())
                        if (textBox == "") {
                            alert("Please Enter Html Content");
                        }
                        else {
                            var imgsrc = canvas.toDataURL("image/png");
                            console.log(imgsrc);
                            $("#newimage").attr('src', imgsrc);
                            $("#img").show();

                        }
                        }
                        
                });
            });
        });
    </script>

Complete Code for Convert The HTML content into a image using jQuery

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

    <script>
        $(function () {
            $("#generateimg").click(function () {
                html2canvas($("#generateImg"), {
                    
                    onrendered: function (canvas) {
                        var textBox = $.trim($('input[type=text]').val())
                        if (textBox == "") {
                            alert("Please Enter Html Content");
                        }
                        else {
                            var imgsrc = canvas.toDataURL("image/png");
                            console.log(imgsrc);
                            $("#newimage").attr('src', imgsrc);
                            $("#img").show();

                        }
                        }
                        
                });
            });
        });
    </script>
    <style>
        .image {
            margin-top: 10px;
        }
    </style>

</head>
<body>
    <div class="col-md-offset-4 col-md-4 col--md-offset-4 top">
        <div id="generateImg" style="border:1px solid;text-align:center;">
            <img src="logo.jpg">
            <h4> Convert the html content into a image using jquery</h4>
            <input id="txtbox" type="text" value="" placeholder="Enter text here!!..." style="background-color: transparent;border: 0px solid;" class="form-control" width="300" />
            <br />
        </div>
        <button id="generateimg" type="button" class="btn btn-info">Generate Image</button>

        <div id="img" style="display:none;">
            <img src="" id="newimage" class="image" />
        </div>
    </div>
</body>
</html>

If This article helped you. Humble request to you please donate small amount only 5 Ruppes or 1 Ruppes so that I can help the needy poor people. Send amount this phonepe upi id : 8800846247@ybl or google pay 8800846247. Thank you from my bottom of heart.

Leave a Reply

Your email address will not be published. Required fields are marked *