How to convert an HTML element or document into image ?

In this article, I will be able to show you ways to convert Html div to a picture using JQuery. Here, I'm generating an HTML div element on the client-side to image png using the html2canvas.js library.

HTML5 has some excellent features; you'll draw charts using canvas tag later you'll reserve it as image png or JPEG format.

To begin, download the latest jQuery library and import it into the online page, we'd like another js library Html2canvas.js, for both I referred cdn, when the user clicks the convert to image button, the div element gets an image printed on canvas then downloaded to the local drive as picture using client-side jQuery.

Below are the example to convert div or Html section into image:-

<!DOCTYPE html> 
<html> 

<head> 
    <title> 
        How to convert an HTML element 
        or document into image ? 
    </title> 
    
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
     <style>
     .main-content{
                background-color: #F0F0F1; 
                color: #00cc65; width: 500px;padding-left: 25px; 
                padding-top: 10px;
                }
                .heading{color: #3e4b51;}
                #html-content-holder p{color: #3e4b51;}
                
     </style>
</head> 

<body> 
    <center> 
    <h2 style="color:green"> 
        Blazingcoders 
    </h2> 
    
    <h2 style="color:purple"> 
        Convert div to image 
    </h2> 
    
    <div id="html-content-holder" class="main-content"> 
        
        <strong> 
            Blazingcoders 
        </strong> 
        
        <hr/> 
        
        <h3 class="heading"> 
            ABOUT US 
        </h3> 
    
        <p> 
            Website Design and mobile application development company in coimbatore, India. We have more than years of experience in the IT Services with more than 400 clients. Services we provide website design, web development, Business application development, Facebook marketing, Digital marketing, Mobile Application Development and SEO services
        </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() { 
        
            var element = $("#html-content-holder"); 
        
            
            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"); 
            
                
                var newData = imgageData.replace( 
                /^data:image\/png/, "data:application/octet-stream"); 
            
                $("#btn-Convert-Html2Image").attr( 
                "download", "convertedimage.png").attr( 
                "href", newData); 
            }); 
        }); 
    </script> 
    </center> 
</body> 

</html>

Tags

  • convert div to base64 image javascript

  • How to convert an HTML element or document into an image

  • Div Convert into an image using Javascript

  • convert Html div to image using jquery
  • html2canvas
  • convert div to image using canvas

  • convert Html to image javascript

  • html2canvas example

  • dom-to-image javascript
  • convert Html div to image Jquery

Related Posts

Flight Reservation Software: A Game-Changer for Travel Agencies

Flight Reservation Software: A Game-Changer for Travel Agencies

Technology is becoming a driving factor in the rapidly changing travel and tourism industry, changing how travel firms function. Flight reservation software is among the most important developments in

Read More
How To Access Hosted Website Files Without Domain Name Or Domain Control

How To Access Hosted Website Files Without Domain Name Or Domain Control

In this article, we are going to discuss how to access hosted website files without domain name/control. You can use the host's file to point hostnames(domain name) to IP addresses. This change on

Read More
What is the Difference Between Web Application and Hybrid Mobile Application

What is the Difference Between Web Application and Hybrid Mobile Application

In today's digital world, businesses have a wide array of choices when it comes to applications, ranging from web applications to hybrid mobile applications. Each serves different purposes, offeri

Read More