Input type="file" set base64 image data

Just create a hidden input element in your form. (notice the type)

<input type="hidden" name="myHiddenField"> 

Attach your data to the value of the element before submitting.

var imageData = canvas.toDataURL('image/png');document.getElementsByName("myHiddenField")[0].setAttribute("value", imageData);

UPDATE

If your server demands to have the parameter "filename" in the submitted data, then include that string as the name of the input element.

<input type="hidden" name="filename"/>

This will trick the form to submit your data with the "filename" parameter included in it.

If you want to use XMLHttpRequest for this, following is a sample:

//Prepare data to be sentvar imageData = canvas.toDataURL('image/png');var params = "filename=" + imageData;//Initiate the requestvar httpRequest = new XMLHttpRequest();            httpRequest.open('POST', 'test.php', true);//Send proper headershttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");httpRequest.setRequestHeader("Content-length", params.length);httpRequest.setRequestHeader("Connection", "close");//Send your datahttpRequest.send(params);

You can use FileReader, check examples here: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications