javascript - url is an image, but the browser shows the base64 encoding -

i'm trying upload image windows azure blob storage javascript.

i upload blob block , can commit blobk blob list.

but, when try navigate image base64 encode of , browser fails render image.

you can try here: base64 image

how can show in browser? must download string , use the

<img src="data:image/jpeg;base64," /> 

tag?

how can download image fast?

thank help.

here can see jsfiddle copy , paste of link

https://jsfiddle.net/66e47znh/

---

edit: code

the snippet use read file:

var reader = new filereader(); reader.onload = function(e){     var data = reader.result;     var binary = '';     var bytes = new uint8array(data);     var len = bytes.bytelength;      (var = 0; < len; i++) {         binary += string.fromcharcode( bytes[ ] );     }      var tosend = {         ext : fileext,         file : btoa(binary)     };     uploadmanager.startblobupload("newspic", tosend.file, tosend.ext, {        //callbacks when upload finish     });  }; var file = document.getelementbyid("image").files[0]; var filename = file.name; var fileext = filename.substr(filename.lastindexof(".")+1); reader.readasarraybuffer(file); 

the snippet use read file's chunk

uploadmanager.bloburl = sasquery.bloburl; uploadmanager.submituri = uploadmanager.bloburl + "?" + sasquery.sasquerystring;  //file reader    uploadmanager.reader = new filereader();  uploadmanager.reader.onload = function(e){     var data = uploadmanager.reader.result;          uploadmanager.uploadslicedchunk(data);  };  var filecontent = file.slice(uploadmanager.currentfilepointer,  uploadmanager.currentfilepointer + uploadmanager.maxblocksize);   uploadmanager.reader.readasarraybuffer(new blob([filecontent]), {type : 'image/'+uploadmanager.fileext, endings : 'native'}); 

the snippet use upload chunck

var num = '' + uploadmanager.blockidcounter; while(num.length < 10){     num = '0'+num;  }  var blockid = btoa("block-"+num);  var uri = uploadmanager.submituri.substr(0,4)+uploadmanager.submituri.substr(4, uploadmanager.submituri.length)         +"&comp=block&blockid="+blockid; uri = uri.replace(":80", "");    var requestdata = new uint16array(data);   var ajaxoption = {     url : uri,     type : "put",     data : requestdata,     headers : { "access-control-request-headers" : "x-requested-with" },     crossdomain : true,     processdata : false,     beforesend: function(xhr) {         xhr.setrequestheader('x-ms-blob-type', 'blockblob');         xhr.setrequestheader("content-type", uploadmanager.filetype);         xhr.setrequestheader('content-length', requestdata.length);         xhr.withcredentials = true;     },      success : function (data, status) {          //upoad successfull -> update everything.         uploadmanager.blockids.push(blockid);         uploadmanager.blockidcounter += 1;         uploadmanager.bytessent += requestdata.length;         uploadmanager.currentfilepointer += uploadmanager.maxblocksize;         uploadmanager.totalremainingbytes -= uploadmanager.maxblocksize;         if(uploadmanager.totalremainingbytes < uploadmanager.maxblocksize){             uploadmanager.maxblocksize = uploadmanager.totalremainingbytes;         }          //prepare next upload;                           var percentcomplete = ((parsefloat(uploadmanager.bytessent) / parsefloat(uploadmanager.filelen)) * 100).tofixed(2);         if(uploadmanager.totalremainingbytes > 0){             var filecontent = uploadmanager.file.slice(uploadmanager.currentfilepointer,                      uploadmanager.currentfilepointer+uploadmanager.maxblocksize);             uploadmanager.reader.readasarraybuffer(new blob([filecontent]), {type : 'image/'+uploadmanager.fileext, endings : 'native'});         } else {             uploadmanager.commitblob();         }      },     error : function(jqxhr, status, error){         alert(status + ", "+error+": "+jqxhr.responsetext);     } };  $.ajax(ajaxoption); 

it works, see pen

http://codepen.io/cakeinpanic/pen/lvgprb

also works jpg, png, jpeg