returning image/jpeg as arraybuffer or blob

Question

I am currently making a call to my api which returns an image as an image/jpeg. My issue is the when calling the url through javascript angular .factory resource I am getting my array buffer as empty {}. Also, the bytes length is 0. If I make the call to the api url with response type '' or 'text' I do see value of multiple types. What am I missing here? Thank you for your help!

JS:

.factory("Img", function($resource) {
    return $resource("http://mypathTo/image/:id", {
      id: "@id"
    }, {
      responseType: '' //arraybuffer return empty
    });
  });

app.controller //code

    $scope.getImage = function(productid) {
      console.log(productid);
      par = {id: [productid]};
      Img.getImage(par).$promise.then(
        function(data){
          console.log("success:" + data); //I am able to see bytes when coming back as text but not with arraybuffer as data.bytelength = 0
          scope.productionPicturePath = data;
          return data;
        },
        function(data){
          console.log("error" + data);
        }
      );
    }
}

The $resource service can only return JavaScript objects or arrays depending on isArray. To get exotic objects such as ArrayBuffer or Blob, use the $http service. — georgeawg
– georgeawg, Commented Dec 12, 2017 at 19:09
@georgeawg thank you for your response i was actually able to implement this and received a response with something! thank you! — paul590
– paul590, Commented Dec 12, 2017 at 19:44
Read the docs in link @george supplied. Default is it parses response from json to object/array which definitely is not what you are working with — charlietfl
– charlietfl, Commented Dec 12, 2017 at 19:57
Show us a sample of the response that you are getting with the default responseType. — georgeawg
– georgeawg, Commented Dec 12, 2017 at 20:08

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

The $resource service can only return JavaScript objects or arrays depending on isArray. To get exotic objects such as ArrayBuffer or Blob, use the $http service.

The DEMO

angular.module("app",[])
.controller("ctrl", function($scope,$http) {
    var vm = $scope;
    var url="//i.imgur.com/fHyEMsl.jpg";

    var config = { responseType: 'blob' };
    $http.get(url,config)
      .then(function(response) {
        console.log("OK");
        //console.log(response.data);
        vm.blob = response.data;
        vm.dataURL = URL.createObjectURL(vm.blob);
        console.log(vm.dataURL);
    }).catch(function(response) {
        console.log("ERROR");
        throw response;
    });
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
      BLOB type {{blob.type}}<br>
      BLOB size {{blob.size}}<br>
    <img ng-src="{{dataURL}}" height="100" />
  </body>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 12, 2017 at 21:28

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

paul590 Over a year ago

this did it thank you for your help and demo it helped a ton!

Collectives™ on Stack Overflow

returning image/jpeg as arraybuffer or blob

JS:

app.controller //code

1 Answer 1

The DEMO

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

JS:

app.controller //code

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related