javascript - AngularJS - Displaying multiple PNG images from buffer received from $http call -

i getting stream of information $http api call. , use extract information follows in angular js,

angularjs controller:

thumbnailsfactory.getthumbnails().then(   function(res) {     var fourbytes = 4;     var twobytes = 2;     var offsetval = 0;      var dataview = new dataview(res, offsetval);     // 4 bytes signature     var sign = dataview.getint32(offsetval);     offsetval += fourbytes;     //  2 bytes unsupportedversionexception() - must 1     var version1 = dataview.getint16(offsetval);     offsetval += twobytes;     // 2 bytes thumbnailmultistream - must 1         var thumbnailstream = dataview.getint16(offsetval);     offsetval += twobytes;     //  2 bytes unsupportedversionexception() - must 1             var version2 = dataview.getint16(offsetval);     offsetval += twobytes;      // total number of images     var cnt = dataview.getint32(offsetval);     offsetval += fourbytes;      // skip 4 bytes past offset vector position.     offsetval += fourbytes;      // read ids     var ids = [];     for(var = 0; < cnt; i++) {       var id = {         id: dataview.getint32(offsetval),         img: ""       };       ids.push(id);       offsetval += fourbytes;         }      // skip past offset vector     for(var = 0; < cnt; i++) {       offsetval += fourbytes;         }       // thumbnailmultistream     for(var = 0; < cnt; i++) {       var l = dataview.getint32(offsetval);       offsetval += fourbytes;         var img = "";             // read image data       for(var j = 0; j < l; ) {         var read = l - j;         if(read > 4096) read = 4096;         img = new dataview(res, offsetval, read);         offsetval += read;          if(img < 0) {           // error           break;         }         j += read;       }        ids[i].img = "data:image/png;base64," + btoa(img);       ids[i].buffer = json.stringify(img);     }      $scope.sign = sign;     $scope.version1 = version1;     $scope.thumbnailstream = thumbnailstream;     $scope.version2 = version2;     $scope.thumbnails = ids;   },   function(error) {      // error   } ); 

angularjs service:

thumbnailsfactory.getthumbnails = function() {   var deferred = $q.defer();   var url = "http://192.168.1.61:4321/thumbnails";   var requestconfig = {         url: url,         method: "get",         headers: {             'content-type': 'application/x-www-form-urlencoded',             'install_id': 'titnmzwajek6tbab2ga55g'         },         timeout: 3000,         responsetype: 'arraybuffer'     };     $http(requestconfig).then(         function(res) {             deferred.resolve(res.data);         },         function(error) {             deferred.reject(error);         }     );     return deferred.promise;          } 

html:

    sign: {{ sign }}<br>     version check 1: {{ version1 }}<br>     kind = {{ thumbnailstream }}<br>     version check 2: {{ version2 }}<br>           images: <br>      <div ng-repeat="tn in thumbnails">         <p> id: {{ tn.id }} </p>         <p> image buffer: {{ tn.buffer }}</p>         <img ng-src="{{tn.img}}" alt="loading...{{ tn.img }}"/>     </div> 

output:

sign: 2074848171 version check 1: 1 kind: 3 version check 2: 1  images:      id: 31     buffer: { "bytelength": 557, "buffer": { "bytelength": 2021 },      "byteoffset": 38 } loading...data:image/png;base64,w29iamvjdcbeyxrhvmlld10=     id: 32     buffer: { "bytelength": 1422, "buffer": { "bytelength": 2021 }, "byteoffset": 599 } loading...data:image/png;base64,w29iamvjdcbeyxrhvmlld10= 

buffer extraction correct, getting next id of image correctly while reading buffer. problem not getting png image correctly.

how can image buffer? please me guys.

i think use of btoa wrong. need extract string dataview.

to that, here : how use strings javascript typed arrays

i extracted piece of code :

dataview.prototype.getutf8string = function(offset, length) {     var utf16 = new arraybuffer(length * 2);     var utf16view = new uint16array(utf16);     (var = 0; < length; ++i) {         utf16view[i] = this.getuint8(offset + i);     }     return string.fromcharcode.apply(null, utf16view); }; 

then, eveything should work fine.