$.ajaxFileUpload used with canvas - asp.net

Question

How can I use the $.ajaxFileUpload to upload the image rendered in a canvas so that it will be part of the HttpContext.Current.Request.Files?
Works fine with normal file upload:
$.ajaxFileUpload({
url: "<%=AppRoot %>" + "upload",
secureuri: false,
fileElementId: "fld_image",
dataType: "json",
success: function (data, status) {
if (typeof (data.error) != "undefined") {
if (data.error) {
//print error
alert(data.error);
}
}
else {
$("#fld_image_hidden").remove();
$(".heading").css("background-image", "url(<%= AppRoot %>" + data.Url + ")");
var imagehidden = $("<input type=\"hidden\" id=\"fld_image_hidden\" name=\"fld_image_hidden\" value=\"" + data.Url + "|" + data.Name + "\" />");
$("#Template_ID").after(imagehidden);
}
$("#fld_image").remove();
},
error: function (data, status, e) {
alert(e);
}});
But cannot get it to work using canvas:
var upload = $("<input type=\"file\" id=\"fld_image\" name=\"fld_image\" />");
upload.on("change", function () {
if ($(this)[0].files[0].size > 5000000) {
alert("The file size may not exceed 5 MB.");
return;
}
var filesToUpload = $(this)[0].files;
var file = filesToUpload[0];
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function (e) {
console.log(e);
img.src = e.target.result;
var canvas = $("#canvasImage")[0];
var MAX_WIDTH = 500;
var MAX_HEIGHT = 500;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataurl = canvas.toDataURL();
console.log(dataurl);
//Do ajaxFileUpload here
$.ajaxFileUpload({
url: "<%=AppRoot %>" + "upload",
secureuri: false,
fileElementId: "canvasImage",
dataType: "json",
success: function (data, status) {
},
error: function (data, status, e) {
alert(e);
}
});
});
The canvas is used to make the image smaller before uploading it to the server.

Answer 1

In the end I went this way, with guidance from this post, Canvas Upload:
var dataurl = canvas.toDataURL("image/png");
dataurl = dataurl.replace('data:image/png;base64,', '');
var ajax = new XMLHttpRequest();
ajax.open("POST", "<%=AppRoot %>" + "upload", false);
ajax.setRequestHeader("Content-Type", 'application/upload');
ajax.send(dataurl);
And on the server:
File.WriteAllBytes