For security reasons, you can’t set the value of a file-input element directly.
If you want to use a file-input element:
- Create an image from the canvas (as you’ve done).
- Display that image on a new page.
- Have the user right-click-save-as to their local drive.
- Then they can use your file-input element to upload that newly created file.
Alternatively, you can use Ajax to POST the canvas data:
You asked about blob:
var blobBin = atob(dataURL.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
array.push(blobBin.charCodeAt(i));
}
var file=new Blob([new Uint8Array(array)], {type: 'image/png'});
var formdata = new FormData();
formdata.append("myNewFileName", file);
$.ajax({
url: "uploadFile.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
}).done(function(respond){
alert(respond);
});
Note: blob is generally supported in the latest browsers.