jQuery AJAX file upload from html5 canvas – not working via AJAX POST

If your code is right and you are using something like this:

var imgUrlCanvas= document.getElementById(“canvas”).toDataURL(“image/png”);
imgUrlCanvas = imgUrlCanvas.replace(‘data:image/png;base64,’, ”);

type: ‘POST’,
url: “fileupload.aspx/UploadCanvasImage”,
data: ‘{ “imageData” : “‘ + dataURL + ‘” }’,
contentType: ‘application/json; charset=utf-8’,
dataType: ‘json’,
success: function (msg) {


and your .ASPX or MVC is like this:

public static string UploadCanvasImage(string canvasImgData)
string Pic_Path = HttpContext.Current.Server.MapPath(“MyPicture.png”);
using (FileStream fs = new FileStream(Pic_Path, FileMode.Create))
using (BinaryWriter bw = new BinaryWriter(fs))
byte[] data = Convert.FromBase64String(canvasImgData);
return “success”;


You, find out that the the WebMethod method is not being called.

Reason: It seems the canvas image is large.

You need to add this to the web.config to make this work:

<jsonSerialization maxJsonLength=”10000000″ />


Now, the JQUERY AJAX will be able to call the method successfully.

Leave a Reply

Your email address will not be published. Required fields are marked *