Question

实际上，我正在尝试使用$ http获取图像，并且我将该数据存储在BLOB对象中，以便我可以在之后使用它

HTML

<body ng-app="myApp">
 <div  ng-controller="HomeCtrl">
<button ng-click="download()">download</button>
    <img id="photo"/>
</div>

控制器：

angular.module('myApp', []);

angular.module('myApp').controller('HomeCtrl', ['$scope', '$http', function($scope, $http) {

  $scope.download=function()
  {
     $http.get('https://placeholdit.imgix.net/~text?txtsize=15&txt=image1&w=120&h=120').success(function(data){
    var arrayBufferView = new Uint8Array( data );
    var blob = new Blob( [ arrayBufferView ], { type: "image/png" } );
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL( blob );
    var img = document.querySelector( "#photo" );
    img.src = imageUrl;

        }).error(function(err, status){})
  }

}]);

针对同一问题的Plunker：http://plnkr.co/edit/4kFKsigCudIlWOAs2Vsz?p=preview

Answer 1

您需要将responseType设置为“arraybuffer”

$http.get('https://placeholdit.imgix.net/~text?txtsize=15&txt=image1&w=120&h=120', {responseType: "arraybuffer"})

http://plnkr.co/edit/IKQKWkY6YMwodzpByx0f?p=preview

BLOB对象不可见

1 个答案: