Как отобразить изображение с URL-адресом BLOB-изображения?

Question

У меня есть 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);

}

URL-адрес блобла, который я получаю, - ng-file-upload 7.2.2.

Answer 1

В случае, если вам нужно получить BLOB из URL:

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

но так как у вас уже есть этот блоб

 $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);

}

Answer 2

Вы также можете попробовать это

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