Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
1.00/5 (3 votes)
Hello,

How to capture div as a image using c# asp.net or jquer,javascript?

Please help me.

Thanks in Advance.

Ankit Agarwal
Website Developer
Posted
Updated 1-Oct-18 1:58am
Comments
Sergey Alexandrovich Kryukov 18-Dec-13 9:09am    
Why?
—SA

 
Share this answer
 
3 options here, check it out
Take webpage screenshot using HTML5 and jQuery[^]
 
Share this answer
 
Checkout this solution using jQuery as an example:
div to image

The jQuery code is:

JavaScript
$(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);
            }
        });
    });
}); 
 
Share this answer
 
v2
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="html2canvas.min.js"></script>
    <style type="text/css">
        .labans {
            /*	color:#990000;*/
            color: #336600;
            font-family: Verdana;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
        }

        .labans1 {
            /*	color:#990000;*/
            color: #000000;
            font-family: Verdana;
            font-size: 12px;
            font-weight: 600;
        }



        .divsection {
            border: 1px solid #DDD;
            padding: 8px 15px;
            spacing: 2px;
            border-radius: 8px;
            box-shadow: #EEEEEE 0.4em 0.0em 0.2em;
            background-image: url(../Images/Front.jpg);
            height: 15cm;
            width: 9.5cm;
            background-size: 358px;
            background-position: center top;
            background-repeat: no-repeat;
            object-fit: fill;
        }
    </style>
    <title></title>
    <!--ForExport data in iamge -->
    <script type="text/javascript">
        function ConvertToImage(btnExport) {
            html2canvas($("#dvContent")[0]).then(function (canvas) {
                var base64 = canvas.toDataURL();
                $("[id*=hfImageData]").val(base64);
                __doPostBack(btnExport.name, "");
            });
            return false;
        }
    </script>
    <!--ForExport data in iamge -->

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script src="../data/assets/js/html2canvas.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">

        <div class="row" id="divhiddenInfo" runat="server" style="display: none">
            <div class="col-lg-2">
                <asp:HiddenField ID="lblCode" runat="server" />

            </div>
        </div>
        <asp:Button ID="btnDownload" Text="Download Front" runat="server" UseSubmitBehavior="false"
            OnClick="DownloadImage" OnClientClick="return ConvertToImage(this)" />

        <div id="dvContent" class="divsection">
            <asp:HiddenField ID="hfImageData" runat="server" />
            <table width="100%">
                <tr>

                    <td valign="Right">
                        <table width="88%">

                            <tr>
                                <td class="style43">
                                    <br />
                                    <asp:Image ID="Image1" runat="server" Height="155px" Width="129px" ImageAlign="Right" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="lblCategory" runat="server" CssClass="labans"></asp:Label>

                                </td>
                            </tr>
                            <tr>
                                <td>

                                    <asp:Label ID="lblCity" runat="server" CssClass="labans"></asp:Label>

                                </td>
                            </tr>
                            <tr>
                                <td>

                                    <asp:Label ID="lbllocation" runat="server" CssClass="labans"></asp:Label>

                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>



            </table>

        </div>

    </form>
</body>
</html>


using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;


protected void DownloadImage(object sender, EventArgs e)
    {
        string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
        byte[] bytes = Convert.FromBase64String(base64);
        Response.Clear();
        Response.ContentType = "image/jpeg";
        Response.AddHeader("Content-Disposition", "attachment; filename=Front.jpeg");
        Response.Buffer = true;
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.BinaryWrite(bytes);
        Response.End();
    }
 
Share this answer
 
v2
Comments
Nelek 1-Oct-18 15:40pm    
Did you realize that the question is from 2013?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900