javascript - Upload Picture as base64 String to Parse -

i have following problem. i´m using canvas resize pictures user uploaded webapp. retrieve picture canvas base64 encoded string , try upload parse server. since parse supports base64 thought work.

when upload images however, there no image instead message every image file upload:

{"_contenttype":"image/jpg","_applicationid":"my application id","_javascriptkey":"my javascript key","_clientversion":"js1.3.5","_installationid":"the installation id","_sessiontoken":"the session token of current user"}

i can retrieve files, no image.

here code uploading pictures:

var fileuploadcontrol = $("#product_pictureuploadmodal")[0];                 if (fileuploadcontrol.files.length > 0) {                      //the user selected file                      var file = fileuploadcontrol.files[0];                     if(file.type.match(/image.*/)){                          //resize image , return base64 string                          var resizedimage = resizeimage(file);                          //create parse file                          var name = "picture.jpg";                         var parsefile = new parse.file(name, {base64: resizedimage}, "image/jpg");                         parsefile.save().then(function() {                                                  //image uploaded                         },                         function(error){                         alert(error.message);                         });                      }else{                         //the user didnt chose picture                      }                 }else{                     //the user didnt select file                  } 

here code resizing pictures:

function resizeimage(file){     var max_width = 400;     var image = new image();     var canvas = document.createelement("canvas");     var ctx = canvas.getcontext("2d");     var url = window.url || window.webkiturl;     var src = url.createobjecturl(file);     image.src = src;     return image.onload = function(){     ctx.clearrect(0, 0, canvas.width, canvas.height);     if(image.width > max_width){         if(image.width > image.height){             image.height = (image.height%image.width)*400;         }else{             image.height = (image.height/image.width)*400;         }         alert("image height " + image.height);         image.width = 400;      }     canvas.width = image.width;     canvas.height = image.height;     ctx.drawimage(image, 0, 0, image.width, image.height);     url.revokeobjecturl(src);     var filerezized = encodeuricomponent(canvas.todataurl("image/jpg"));     return filerezized;      }; } 

what missing here?

i hope guys me. put lot of work , time in , seem not further this.

i want resize image in browser because otherwise upload speed might slow people, application available mobile phones well.

greetins germany, marvin

there error in line:

var filerezized = encodeuricomponent(canvas.todataurl("image/jpg")); 

there no mime-type image/jpg in canvas. default image/png instead guess confuse receiver. correct line to:

var filerezized = encodeuricomponent(canvas.todataurl("image/jpeg")); 

i don't know parse.com, try doing this line:

var parsefile = new parse.file(name, {base64: resizedimage}, "image/jpeg"); //                                                                    ^^ 

test case

var canvas = document.queryselector("canvas"), out = document.queryselector("div");    out.innerhtml = canvas.todataurl("image/jpg") + "<br><br>";  // png  out.innerhtml += canvas.todataurl("image/jpeg");             // jpeg

<canvas width=1 height=1></canvas><div></div>