Returning Image/jpeg As Arraybuffer Or Blob

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 ar

Solution 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;
    });
})

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