how to display image with blob image url?

Question

I have blob url for image and want to display it. One method I tried is by using 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);

}

The blobl url I am getting is by ng-file-upload 7.2.2.

You mix angularjs call with jQuery which is not good practice. when you add `ng-src` attribute using jquery `attr()`, angularjs does not know automatically about this DOM change. — Zamrony P. Juhara, Apr 08 '18 at 06:16

Arash · Answer 1 · 2018-04-08T08:11:09.447

in case you need to get blob from 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); 
});

but since you have that blob already

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

}

getting errror: failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. — YaSh Chaudhary, Apr 08 '18 at 06:34
i edited the answer , you should send blob to CreateImageFromBlob function — Arash, Apr 08 '18 at 08:05

score 0 · Answer 2 · answered Nov 09 '18 at 11:54

You can also try this

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

how to display image with blob image url?

2 Answers2