500 (Internal Server Error) when sending AJAX post to ASP

Question

When sending the following POST, I keep getting 500 (Internal Server Error) from my server. When replacing the dataUrl with a simple string 'xxxxx', no error.

This is the AJAX code:

function takepic() 
{
    var canvas = document.createElement('canvas');
    var video = document.getElementById('myVideo');

    canvas.width = 640;
    canvas.height = 480;

    var ctx = canvas.getContext('2d');

    //draw image to canvas. scale to target dimensions
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    //convert to desired file format
    var dataUrl = canvas.toDataURL('image/png').replace('data:image/png;base64,', '');

    $.ajax({
        type: "POST",
        url: "MyPage.aspx/UploadImage",
            data: '{ "imageData" : "' + dataUrl + '" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
            }
        });
}

This is the server code:

[WebMethod]
public static void UploadImage(string imageData)
{
    byte[] data = Convert.FromBase64String(imageData);
}

Answer 1

Resolved by changing the web.config as:

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