Article

Convert Div Content to Image Using Javascript in Asp.net

13 Jun 2015 Kamal Pratap
0 Comments 1764 Views



Here we explain how to convert a HTML div to image using javascript.

JavaScript :

<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function PrintDiv() {
            html2canvas($('#image'), {
                onrendered: function (canvas) {
                    var img = canvas.toDataURL()
                    window.open(img);
                }
            });
        }
    </script>

put the above code in the head section of the webpage

Asp.net :

<head runat="server">
    <title>Save Div As image in asp.net</title>
    <script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function PrintDiv() {
            html2canvas($('#image'), {
                onrendered: function (canvas) {
                    var img = canvas.toDataURL()
                    window.open(img);
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    Convert div into image
    <div id="image" style="width: 500px;">
        <table border="1" width="500" bgcolor="pink">
            <tr>
                <td>
                    Asp.Net
                </td>
                <td>
                    Asp.Net
                </td>
                <td>
                    Asp.Net
                </td>
            </tr>
            <tr>
                <td>
                    Asp.Net
                </td>
                <td>
                    Asp.Net
                </td>
                <td>
                    Asp.Net
                </td>
            </tr>
            <tr>
                <td>
                    Asp.Net
                </td>
                <td>
                    Asp.Net
                </td>
                <td>
                    Asp.Net
                </td>
            </tr>
            <tr>
                <td>
                    Asp.Net
                </td>
                <td>
                    Asp.Net
                </td>
                <td>
                    Asp.Net
                </td>
            </tr>
            <tr>
                <td>
                    Asp.Net
                </td>
                <td>
                    Asp.Net
                </td>
                <td>
                    Asp.Net
                </td>
            </tr>
        </table>
    </div>
    <br />
    <asp:Button ID="btnSave" runat="server" Text="Save As Image" OnClientClick="return PrintDiv();" />
    </form>
</body>
</html>

 

Kamal Pratap

I have 6+ years experience in .Net technologies like Asp.Net, C#, WCF, Web Services, SQL Server, Ajax, LinQ. Currently I am working in Netcarrots Loyalty Services as a Software Developer.

Comments

No coments found to display!

Leave a Comment