angularjs - 如何使用 blob 图像 url 显示图像？

Question

我有图像的 blob url 并想显示它。我尝试的一种方法是使用createObjectURL()。

 $scope.preview = function(path) {
        //path is 'data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAA....'
        var file = new Blob([ path ], {  
            type : 'image/jpeg'
        });
        var fileURL = URL.createObjectURL(file); 
        //fileURL is blob:http://localhost:8080/a8610a32-521f-407c-8f....
        console.log('fileurl: ', fileURL);
        $('img.image-preview').attr('ng-src', fileURL);

}

我得到的 blobl 网址是ng-file-upload 7.2.2。

Answer 1

你也可以试试这个

$scope.preview = function(path) {
    $http.get(path)
       .then(function(response) {
           $scope.image = "data:image/jpg;base64," + btoa(String.fromCharCode.apply(null, new Uint8Array(response.data)));
           $('img.image-preview').attr('ng-src', $scope.image);
    });           
}

Answer 2

如果您需要从 url 获取 blob：

var config = { responseType: 'blob' };
$http.get(itemsUrl, config).then(function onSuccess(response) {
    var blob = response.data;
    var contentType = response.headers("content-type");
  $scope.createImageFromBlob(blob); 
});

但是既然你已经有了那个blob

 $scope.preview = function(path) {
        //path is 'data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAA....'
        var file = new Blob([ path ], {  
            type : 'image/jpeg'
        });

        $scope.createImageFromBlob(file)

}

$scope.createImageFromBlob(blob) {
    let reader = new FileReader();
    reader.addEventListener('load', () => {
       let photo = reader.result;
       $scope.Imagebase64 = photo.replace('data:image/jpeg;base64','data:image/gif;base64');
    }, false);
       reader.readAsDataURL(blob);

}