How to Convert HTML Content into Image

    Jan 10, 2016       by Pankaj Kumar
html-content-to-image.jpg

Today, We will create a demo app(javascript sample application) to  convert any html content into image file using jquery  html2canvas Plugin. While web application development we need some time to get some filtered record into image so that it could be shared anywhere easily. There are much things which can be performed with this plugin. But now we will only use this plugin to get the html content into image.

For this we need to create an html page which we will use for converting into image file. Lets have a look in code of the html file.

 

 
<table ng-model="table" class="ng-pristine ng-valid">
                     <colgroup>
                        <col/>
                        <col width="60x"/>
                        <col width="100px"/>
                     </colgroup>
                     <thead>
                        <tr>
                         <th class="cell value">Value</th>
                         <th class="cell freq">Freq</th>
                         <th class="cell value"></th>
                        </tr>
                     </thead>
                     <tbody>
            <tr ng-repeat="rowKey in table.rowKeys | orderBy:elementRowSort " ng-click="onSelect(rowKey, $event.shiftKey)" ng-class="{true:'selected'}[isSelected(rowKey)]" data-key="0" class="selectable ng-scope">
                        <td class="cell value"><span tooltip="0 to 19" class="ng-scope ng-binding">0 to 19</span>
                        </td>
            
                        <td class="cell freq ng-binding">17.2%</td>
                        <td class="cell glyph">
                         <span class="bar bar-both" ng-style="{width: (table.getBothPct(rowKey) | barSize)+'%' }" style="width: 17.234468937875754%;"></span>
                         <span class="bar bar-fg" ng-style="{width: (table.getFgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
                         <span class="bar bar-bg" ng-style="{width: (table.getBgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
                        </td>
                     </tr><tr ng-repeat="rowKey in table.rowKeys | orderBy:elementRowSort " ng-click="onSelect(rowKey, $event.shiftKey)" ng-class="{true:'selected'}[isSelected(rowKey)]" data-key="20" class="selectable ng-scope">
                        <td class="cell value"><span tooltip="20 to 39" class="ng-scope ng-binding">20 to 39</span>
                        </td>
                        <td class="cell freq ng-binding">18.0%</td>
                        <td class="cell glyph">
                         <span class="bar bar-both" ng-style="{width: (table.getBothPct(rowKey) | barSize)+'%' }" style="width: 18.03607214428858%;"></span>
                         <span class="bar bar-fg" ng-style="{width: (table.getFgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
                         <span class="bar bar-bg" ng-style="{width: (table.getBgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
                        </td>
                     </tr><!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort --><tr ng-repeat="rowKey in table.rowKeys | orderBy:elementRowSort " ng-click="onSelect(rowKey, $event.shiftKey)" ng-class="{true:'selected'}[isSelected(rowKey)]" data-key="40" class="selectable ng-scope">
                        <td class="cell value"><span tooltip="40 to 59" class="ng-scope ng-binding">40 to 59</span>
                        </td>
            
                        <!--<td >{{table.getRowPercent('current', rowKey) | percent}}</td>-->
                        <td class="cell freq ng-binding">34.3%</td>
                        <td class="cell glyph">
                         <!--<div class="bar bar-both" style="width: {{(row.current.pct * 100)||2}}px; " ></div>-->
                         <span class="bar bar-both" ng-style="{width: (table.getBothPct(rowKey) | barSize)+'%' }" style="width: 34.2685370741483%;"></span>
                         <span class="bar bar-fg" ng-style="{width: (table.getFgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
                         <span class="bar bar-bg" ng-style="{width: (table.getBgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
                        </td>
                     </tr><!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort --><tr ng-repeat="rowKey in table.rowKeys | orderBy:elementRowSort " ng-click="onSelect(rowKey, $event.shiftKey)" ng-class="{true:'selected'}[isSelected(rowKey)]" data-key="60" class="selectable ng-scope">
                        <td class="cell value"><span tooltip="60 to 79" class="ng-scope ng-binding">60 to 79</span>
                        </td>
            
                        <!--<td >{{table.getRowPercent('current', rowKey) | percent}}</td>-->
                        <td class="cell freq ng-binding">24.0%</td>
                        <td class="cell glyph">
                         <!--<div class="bar bar-both" style="width: {{(row.current.pct * 100)||2}}px; " ></div>-->
                         <span class="bar bar-both" ng-style="{width: (table.getBothPct(rowKey) | barSize)+'%' }" style="width: 24.04809619238477%;"></span>
                         <span class="bar bar-fg" ng-style="{width: (table.getFgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
                         <span class="bar bar-bg" ng-style="{width: (table.getBgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
                        </td>
                     </tr><!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort --><tr ng-repeat="rowKey in table.rowKeys | orderBy:elementRowSort " ng-click="onSelect(rowKey, $event.shiftKey)" ng-class="{true:'selected'}[isSelected(rowKey)]" data-key="80" class="selectable ng-scope">
                        <td class="cell value"><span tooltip="80 to 99" class="ng-scope ng-binding">80 to 99</span>
                        </td>
            
                        <!--<td >{{table.getRowPercent('current', rowKey) | percent}}</td>-->
                        <td class="cell freq ng-binding">6.4%</td>
                        <td class="cell glyph">
                         <!--<div class="bar bar-both" style="width: {{(row.current.pct * 100)||2}}px; " ></div>-->
                         <span class="bar bar-both" ng-style="{width: (table.getBothPct(rowKey) | barSize)+'%' }" style="width: 6.4128256513026045%;"></span>
                         <span class="bar bar-fg" ng-style="{width: (table.getFgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
                         <span class="bar bar-bg" ng-style="{width: (table.getBgPct(rowKey) | barSize) +'%' }" style="width: 0%;"></span>
                        </td>
                     </tr><!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort -->
                     <tr ng-show="getShowMean()" class="">
                        <td class="stat">Mean</td>
                        <td class="ng-binding">46.1</td>
                     </tr>
            
            
                     </tbody>
                    </table>
 

 

In the above I have just created the list of some data. After that I have downloaded html2canvas javascript library and inculde on page.

 

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

 

Code for Image generation using html2canvas

 
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
 
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
});
 

 

On clicking the button Save PNG, html2canvas rendered the html content and set the created image in the div with id img-out.

Find complete source code over GitHub

 

That’s all for now . Thank you for reading and I hope this demo(Javascript Sample Application) will be very helpful for converting html content into image.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

 

javascript html2canvas

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS