find and solve || findandsolve.com
Please wait.....

Convert HTML Document into Image using javascript

Convert HTML Document into Image using javascript



canvas is an HTML element you can used to draw graphics using  javascript scripting.This is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph; however through WebGL it allows 3D shapes and images and so-on. HTML5 Canvas also helps in making 2D games.


The following code creates a Canvas element in an HTML5 page as a give below

<canvas id="canvasExample" width="300" height="300">
This canvas element text is display when your browser is not support HTML5.
</canvas>

After that using JavaScript, you can draw on the canvas in HTML5 supported browser as a give below

var demoExample = document.getElementById('canvasExample');
var context = demoExample .getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

Okay Let's Start Html convert to Image.

Step.1. First open your html page and  Include jquery   Library in your project in the head section as give below.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

After that Include HTMLCanvas  Library in your project in the head section as above under <head> Section.

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src= "https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"> </script> 
</head>


For Example in your html page

<!DOCTYPE html> 
     <html>  
       <head> 
         <title> 
       How to convert html to image using javascript
         </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> 
<style>
    .main_body {
        width: 200px;
        height: 400px;
    }
    .main_body_vertical {
        height: 250px;
        width: 400px;
    }
    .school_header {
        width: 250px;
        height: 60px;
        color: white;
        font-style: unset;
        background-color: blue;
        color: skyblue;
    }
    .school_header_vertical {
        width: 250px;
        height: 60px;
        text-align: center;
        color: white;
        font-style: unset;
        background-color: blue;
        color: skyblue;
    }
    .school_header_horigental {
       width: 400px;
    height: 60px;
    text-align: center;
    color: white;
    font-style: unset;
    background-color: #a9104173;
    }

    .student_body {
        background-color: skyblue;
        color: white;
        width: 250px;
        height: 260px;
    }
    .student_body_vertical {
        background-color: #1a02e8;
        color: white;
        height: 155px;
        width: 400px;
    }
    .image_div_horizontal {
        width: 60px;
        height: 70px;
        margin-left: 30%;
        margin-right: 9%;
        margin-top: 5px;
        float: right;
    }
        .image_div_horizontal img {
            border: 2px solid #cfe418;
            border-top-left-radius: 1em;
            width: 120%;
            height: 110%;
        }
    .image_div_vertical img {
        border: 2px solid #cfe418;
        width: 120%;
        height: 110%;
    }
    .image_div_vertical {
        height: 60px;
        width: 60px;
        margin-left: 30%;
        margin-right: 30%;
        margin-top: 5px;
    }
    .id_card_name {
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        background-color: white;
        color: skyblue;
    }
    .id_card_name_vertical {
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        margin-top: 5px;
        background-color: white;
        color: skyblue;
    }
    .content_text {
        color: white;
        font-size: medium;
        font-family: Aparajita;
        margin-top: 5px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .content_text_vertical {
        color: white;
        font-size: medium;
        font-family: Aparajita;
        margin-top: 5px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .lable_record {
        float: left;
        margin-left: 10px;
    }
    .lable_record_vertical {
        float: left;
        margin-left: 10px;
    }
    .lable_record_value {
        float: left;
        margin-left: 4%;
    }
    .lable_record_value_vertical {
        float: right;
        margin-right: 20px;
    }
    .school_footer_vertical {
        width: 400px;
        height: 10px;
        color: white;
        font-size: 8px;
        font-style: unset;
        background-color: blue;
        color: skyblue;
        text-align: center;
    }
    .school_footer_horizontal {
        width: 250px;
        height: 10px;
        color: white;
        font-size: 8px;
        font-style: unset;
        background-color: blue;
        color: skyblue;
        text-align: center;
    }
</style>
</head>   
<body> 
    <center> 
    <h2> 
             <span style="color:blue">Find</span>
             <span style="color:green;">and</span>
            <span style="color:red;">Solve</span>
    </h2> 
      
    <h2 style="color:purple"
       Convert this html dive to Imave
    </h2> 
      
    <div id="html-convert-to-image" style="background-color: #F0F0F1;  
                color: #00cc65; width: 500px;padding-left: 25px;  
                padding-top: 10px;"
          
                 <div class="main_content">
                        <div class="school_header_horigental">
                               <div class="col-sm-1">
                                   <!-- This is image code  base64String -->
                                <span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAoCAMAAAB0DnycAAAAAXNSR0IB2cksfwAA
AAlwSFlzAAALEwAACxMBAJqcGAAAAZJQTFRFAAAAABD3ABL3ABL5/xUi+xIi/BEi/BIi/BIiARL4+xIj/RIi/BIh/BIi/xQh/
BIi/BIi/BEi/BEh/BIi/BEi/REi/xEi8g0m/BIh/BMi/xQh/BEj+xIi/BIi+xEj/RMi/RIi9xAg+xAg/BIi+xIi/xEi+xIi/BEi/RMi+xIh/wAAARH4/
BIi/RIi/BEi/xQf/BIi/BIi+xIi/REi/RIi+RMgAFELAVAKAVAKAVAKAFAI/BEj/BEh/BEi9hIkAFAJ+xEh/RMi+xIi/BIi/BIi1AAqAU8KAVAKAFEJAE4K/w8e/
BAh/RIh+xIi+RIjAlAKAFAK/BIj/BIi+xMhAU8KAVEK/xUjAFIKAVAKAVAKAVAJ/BIj+xIi/BIi/RIi/BEiAFAQAVAKAVAK/RMh/BEi/xIk/BIi+xIhAFAKAFEJ+xIh/RIi+xAh/
wwk+hIi/RIi/xMiAFAJAE4H/BMi/BIiAFEKAFAK/BIi/RIi/BMjAlAJAVAKAVAK/RMj/xAg6hUq+A8k+xIj/BMj/REi/BEj/xwccp5QUgAAAIZ0Uk5TAECAfyWAr+
///4v3mZ1OqsTqv5+VzUwUY5cnZsrFO5fzIEDujTzEzIlGAr/gnFkZtvq9adgodcPq/0BJktsccD15tvK6BtHtbk4RTorLV5yAV7R7qtEkTuvlv5vRu9ejEN
+7bFsq94tQOUWOPhVw1FJzJLLKTGn2z1CJ0vBtEAwjOlFoWAnrUUhQAAABtElEQVR4nO3UZVfDMBQG4ADrVtzddbjbLe7
OhkPRAcXd3fnfNOm6rmnZyfoV3i85d0mesyT3FKH//MmEhKoJ840my2yc3cHjOOyczYwJN8SEiYjktURGWWSieSqWmBha4WOtMHFka3x
CIpcUm6w4KaZMiPG0WlJ1fyCNVOnBMxlkY6ZaZuEqO3gmR3+MXFzlBc/kEyZaLQtIgmdQIXGKigMsYWFKvM/sLC0rD8hU+
MW4JlNrmMqq6prfGb+YMKjWv/Xq6jmLDGrQN3FjEyPT3NIKIGjL2to7dFAn0910AY6gW9nd09vnY/oHzBj6pQZhaHhEEKhf0ejY+
ITXmWRhAFx4cLvdtISmpgkzw8LMwpyiYYZq23l9UwdiFhZhSRRFAFFEKB5vW9YmV3CdwMII4AtCSXjbqja5hut1BmbDA5su+
WLkQ8mn2iKn2FYnpR1c7jIwewD7eFTu5kB5m8Mj6RhlxJyckuqMgTkHuNAYdGn4FvNXiIG5lvffyH3jZaRTWrmlPxrmV+xRL1jpG8muV+
7uERODHh6f/Bj5W+HUkNrnF3o5e17f3j8+ua2vg2/rxn8s5AceFVDym/K2ewAAAABJRU5ErkJggg==" height="40" width="40"></span>
      </div>
    <div class="col-sm-11" style="text-align:center">
                     <span>Shree  kalika Secondary School</span><br>
                     <span>10-1-1980</span><br>
                     <span>97541055</span><br>
     </div>
   </div>
      <div class="student_body_vertical">
          <div class="id_card_name" style="text-align:center;">
               Student Identity Card
            </div>
           <div class="image_div_horizontal">
           <!-- This is also image code base64String -->
     <img src="data:image/png;base64,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
pKbKzkoyLBgAAAABJRU5ErkJggg==">
        <center>Author Signature</center>
        </div>
         <div class="lable_record">
                                <span>ID No</span><br>
                                <span>Name</span><br>
                                <span>Class</span><br>
                                <span>Faculty</span><br>
                                <span>Address</span><br>
                                <span>Blood Group</span><br>
                                <span>Validity</span><br>
                            </div>
                            <div class="lable_record_value" style="margin-top:-74px;">
                                <span>:</span><br>
                                <span>:Devin Karmal</span><br>
                                <span>:Ten </span><br>
                                <span>:1-10 English medium </span><br>
                                <span>:  </span><br>
                                <span>:</span><br>
                                <span>:21/1/2021</span><br>
                            </div>
                        </div>
                        <div class="school_footer_vertical">
                            <span style="margin-right:30px;"> Email:info.findandsolve.com</span> &nbsp;&nbsp;
                            <label>URL:www.findandsolve.com</label>
                        </div>
                    </div>    
          </div> 
  
    <input id="view-button" type="button"  value="Preview" />  
      <a id="downloadCanvas-Image" href="#"
        Download This Image
    </a>   
    <br/>       
    <h3>Converted Image View :</h3>       
    <div id="previewCanVasImage"></div>       

  //Start script here
    <script> 
        $(document).ready(function() { 
          
            // Global variable 
            var element = $("#html-convert-to-image");  
          
            // Global variable 
            var getCanvas;  
  
            $("#view-button").on('click', function() { 
                html2canvas(element, { 
                    onrendered: function(canvas) { 
                        $("#previewCanVasImage").append(canvas); 
                        getCanvas = canvas; 
                    } 
                }); 
            }); 
  
            $("#downloadCanvas-Image").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"); 
              
                $("#downloadCanvas-Image").attr( 
                "download", "findandsolve.png").attr( 
                "href", newData); 
            }); 
        }); 
    </script> 
//End Script here
    </center> 
</body> 
  
</html> 

Note: Copy all this code and past your html page.This code is working fine.

Sundar  Neupane

Sundar Neupane

I like working on projects with a team that cares about creating beautiful and usable interfaces.

Comments



Report Response