jquery - Convert base64 data:url to image blob -

i have image cropper takes in image, converts blob

blob {type: "image/jpeg", size: 40092, slice: function}size: 40092type:  "image/jpeg"__proto__: blob 

before loading canvas. after cropping, image output in base64. need able convert base64 image blob or image, can post image through ajax api endpoint. have following of this, can't figure out how convert rendered image blob post. current url used post, looks in console after hitting render, using encodeuricomponent(dataurl):

http://url.com/rest/v1/utils/guid/encode?data%3aimage%2fjpeg%3bbase64%2c%2f…hlgozintrwlh2qg7az0okbrunvtqxsasoakkkk0jsadrtqaotoqgp%2f9k%3d&imageid=test

this code used in fiddle @ bottom

    $(function () {   var fileinput = document.getelementbyid("file")     , renderbutton = $("#renderbutton")     , imgly = new imglykit({         container: "#container",         ratio: 1 / 1       });    // user selects file...   fileinput.addeventlistener("change", function (event) {     var file;      var filetoblob = event.target.files[0];           var blob = new blob([filetoblob], {"type":filetoblob.type});           // stuff blob           console.log(blob);     // find selected file     if(event.target.files) {       file = event.target.files[0];     } else {       file = event.target.value;     }      // use filereader turn selected     // file data url. imglykit needs     // data url or image     var reader = new filereader();     reader.onload = (function(file) {       return function (e) {         data = e.target.result;          // run imglykit selected file         try {           imgly.run(data);         } catch (e) {           if(e.name == "nosupporterror") {             alert("your browser not support canvas.");           } else if(e.name == "invaliderror") {             alert("the given file not image");           }         }       };     })(file);     reader.readasdataurl(file);   });    // user clicks render button...   // listen "render final image" click   renderbutton.click(function (event) {     var dataurl;       imgly.rendertodataurl("image/jpeg", { size: "1200" }, function (err, dataurl) {       // `dataurl` contains resized rendered image       // width of 300 pixels while keeping ratio         //convert dataurl blob send on ajax         function datauritoblob(dataurl) {         // convert base64 raw binary data held in string         // doesn't handle urlencoded datauris - see answer #6850276 code         var bytestring = atob(dataurl.split(',')[1]);          // separate out mime component         var mimestring = dataurl.split(',')[0].split(':')[1].split(';')[0];          // write bytes of string arraybuffer         var ab = new arraybuffer(bytestring.length);         var ia = new uint8array(ab);         (var = 0; < bytestring.length; i++) {             ia[i] = bytestring.charcodeat(i);         }         // write arraybuffer blob, , you're done         //var bb = new blobbuilder();         //bb.append(ab);         //return bb.getblob(mimestring);         }       var blob = datauritoblob(dataurl);     var fd = new formdata(document.forms[0]);     var xhr = new xmlhttprequest();      var saveimage = encodeuricomponent(dataurl);     //console.log(saveimage);       fd.append("myfile", blob);     xhr.open('post', 'http://url.com/rest/v1/utils/guid/encode?' + saveimage + '&imageid=' + imageid.value, true);     xhr.send(fd);  var image = $("<img><br>").attr({         src: dataurl       });        image.appendto($(".result"))       $button = $('<button class="btn btn-default remove">')             .text('remove')             .on('click', function () {                 image.remove();                 $(this).remove();                 return false;             });         $button.appendto($(".result"));     });   }); }); 

jsfiddle: jsfiddle

datauritoblob doesn't return anything, should returning blob

return new blob([ab], {type: 'image/jpeg'}); 

also why putting data url of image in url of ajax post request?