CODEWITHSUNDEEP
javascripthtmlfile-upload
Andrej
Andrej

Reputation: 736

base64 image from canvas to file upload HTML control

is it possible to have an image exported via canvas (canvas.toDataURL("image/png")) and bound to <input type="file" /> upload control programmatically without the usage of server side technology (so, only javascript)?

So basically, my client has a <form> and among other fields he would like to have an editable image field which would be added to the file upload HTML control on POST. I can't do it any other way since the existing <form> is third party which means I can't modify the server side logic and the client insist on keeping that third party <form>.

So, I have a specific wish from a client and I rally don't know if this is possible. Any tips/pointers/help would be appreciated. Thanks!

EDIT: probably should have mentioned that the solution must work cross-browser up to an including IE7

Upvotes: 1

Views: 2404

Answers (1)

Minko Gechev
Minko Gechev

Reputation: 25682

Probably you can achieve it using FormData. You need to covert the canvas image to binary using BlobBuilder. With FormData you can:

var dataURL = canvas.toDataURL('image/jpeg', 0.5),
    blob = dataURItoBlob(dataURL),
    fd = new FormData(document.getElementById('form'));
fd.append("canvasImage", blob);

Here you can read more about this approach Convert Data URI to File then append to FormData

Upvotes: 2

Related Questions