Save Html2canvas image to server in asp.net

Question

I want to save HTM2Canvas image to server. Tried some code but fail to save image to directory. I want to save the screen shot in directory and want to save the the path to database.

I have posted my code, in this example i want to save the image in directory only. but unable to do this. please help me out to resolve this issue.

    <form id="myForm" method="post" action="demo.aspx"  runat="server">
    <div id="target">

<div id="wrapper">
  <div id="header">
  <div class="text">
  <Span>This Space for rent/price</Span>
    <h1>This Space for Property
      Address</h1>
      <h1>This Space for Data</h1>
      </div>
    </div>
  <h1 style="text-transform:uppercase;">This Space For advert heading</h1>


  </div>

    </div>
         <asp:Button ID="btnSave" runat="server" Text="Save As Image" OnClientClick="return PrintDiv();" />     

    <script src="js/html2canvas.js"></script>
    <script type="text/javascript">
        function PrintDiv() {
            html2canvas(document.body, {
                onrendered: function (canvas) {
                    var img = canvas.toDataURL().replace(/^data[:]image\/(png|jpg|jpeqg)[;]base64,/i, "");
                    alert(img);
                    $.ajax({
                        type: "POST",
                        url: "demo.aspx/UploadImage",                      
                        data: {"imageData": name },
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            alert(msg.d);
                        }
                    });

                }
            });
            function OnSuccess(response) {
                alert(response.d);
            }
        }
    </script>

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


ASP.NET Code behind File:


    [WebMethod()]   

    public static void UploadImage(string imageData)
    {
        string fileNameWitPath = "~/Client/ScreenShot/custom_name.png";
        using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
        {
            using (BinaryWriter bw = new BinaryWriter(fs))
            {
                byte[] data = Convert.FromBase64String(imageData);//convert from base64
                bw.Write(data);
                bw.Close();
            }
        }
    }

Answer 1

try this for javascript

html2canvas(document.body, {
     onrendered: function (canvas) {
        var image = canvas.toDataURL("image/png");
        image = image.replace('data:image/png;base64,', '');
        var param = { imageData: image };
        $.ajax({
              url: "demo.aspx/UploadImage",
                        data: JSON.stringify(param),
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            alert('Image saved successfully !');
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            var err = eval("(" + XMLHttpRequest.responseText + ")");
                        }
                    });
                    }
                });

try this for code behind

[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
        public static void UploadImage(string imageData)
        {
            try
            {
                string fileNameWitPath = "~/Client/ScreenShot/custom_name.png";
                using (FileStream fs = new FileStream(fileNameWithPath, FileMode.Create))
                {
                    using (BinaryWriter bw = new BinaryWriter(fs))
                    {
                        byte[] data = Convert.FromBase64String(imageData);
                        bw.Write(data);
                        bw.Close();
                    }
                }
            }
            catch (Exception ex)
            {

            }           
        }