Send large canvas data to server

Question

I have tried sending canvas data as an image but when the image is big it is not sending the data so I tried to send as form data but i am stuck in receiving the code. The codebehind receives as htmlinputelementobject. How can I receive it? Can someone please help.

Html:

var data = canvas.toDataURL("image/png");
    data = data.substr(data.indexOf(',') + 1).toString();
var dataInput = document.createElement("input");
    dataInput.setAttribute("name", "imgdata");
    dataInput.setAttribute("value", data);
    dataInput.setAttribute("type", "hidden");
var myForm = document.createElement("form");
    myForm.appendChild(dataInput);

Ajax:

$.ajax({
    url: "HTML5Camera.aspx/Upload",
    type: "POST",
    // data : $('form').serialize(),
    data: "{ 'image': '" + data1 + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data, status) {
        alert('success')
    }
});

CodeBehind:

[WebMethod(EnableSession = true)]
    public static string Upload(string image)    

    {

    }

Answer 1

Try adjusting the request limit in web.config:

<system.web>
    ...
    <httpRuntime maxRequestLength="8192" ... />

Here 8 mb as an example (the ... are indicating other information you might have in the file/tag). All base-64 encoded files has a 33% increase in size, something to consider when setting max limit.

(It could possibly be an error when you copied the example into the post, but data1 is not defined anywhere, ref. the ajax method).

Update for completeness (from comments):

<system.web.extensions> 
  <scripting> 
    <webServices> 
      <jsonSerialization maxJsonLength="2147483647"/> 
    </webServices>
  </scripting> 
</system.web.extensions>