How to convert an HTML element or document into image ?

Last Updated : 02 Aug, 2024

This article is going to tell and guide the users to convert a div element into an image using AngularJS. The user will be generating an image from the webpage and also be able to convert a particular part of the HTML page into the picture. Also, the user needs an HTML tag and html2canvas JavaScript library. By using this, we can create the pictures i.e. converting the HTML page to an image in PNG or JPEG formats. Also handling the ul, li and the required div tag to the image format. To summarize it, the html2canvas library will be rendering the HTML page to the preferred image format that is mentioned by the user. It means that the user will be able to create the screenshot of the div or any element of the WebPage.

Approach:

There are two buttons in the web-page, one used for preview the image of web-page and other button is used to download the image of web-page.
Convert an html page into image using html2canvas JavaScript library.
When user click on preview button, the html2canvas() function called and this function also call another function which append the preview of canvas image.
When user click on Download button, then first change the document into image format and then start downloading it instead of displaying the image.

Example:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to convert an HTML element
        or document into image ?
    </title>
    
    <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>
</head>

<body>
    <center>
    <h2 style="color:green">
        GeeksForGeeks
    </h2>
    
    <h2 style="color:purple">
        Convert div to image
    </h2>
    
    <div id="html-content-holder" style="background-color: #F0F0F1; 
                color: #00cc65; width: 500px;padding-left: 25px; 
                padding-top: 10px;">
        
        <strong>
            GeeksForGeeks
        </strong>
        
        <hr/>
        
        <h3 style="color: #3e4b51;">
            ABOUT US
        </h3>
    
        <p style="color: #3e4b51;"> 
            <b>GeeksForGeeks</b> is a portal and a forum
            for many tutorials focusing on Programming
            ASP.Net, C#, jQuery, AngularJs, Gridview, MVC,
            Ajax, Javascript, XML, MS SQL-Server, NodeJs,
            Web Design, Software and much more
        </p>
    
        <p style="color: #3e4b51;">
            How many times were you frustrated while 
            looking out for a good collection of 
            programming/algorithm/interview questions? 
            What did you expect and what did you get?
            This portal has been created to provide
            well written, well thought and well
            explained solutions for selected questions.
        </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"); 
        
            // Global variable
            var getCanvas; 

            $("#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", "GeeksForGeeks.png").attr(
                "href", newData);
            });
        });
    </script>
    </center>
</body>

</html>

Output:

How To Convert Image To Text In Google Docs

AbhinandanBhatnagar

Improve

Article Tags :

How to convert an HTML element or document into image ?

Similar Reads

Thank You!

What kind of Experience do you want to share?