admin管理员组

文章数量:1289879

We are displaying the details of the user in an HTML page and apart from other details it contains a link item in it, which retrieves the image stored as BLOB of the user from the database. Our angular Service is written, Click on the link item opens (which is actually the filename of that image in the database) up a browser window displaying the Image. Both storing and retrieving the image works fine Now our requirement is to just load on first load of HTML page the Image as a preview.

Angular service is like

getDownloadDoc: function(empId) {

  return $http.get(contextPath1 + "/PdfServletDoc?documentID=" + empId + "", {
    responseType: 'arraybuffer'
  }).then(function(response) {
    var data = response.data;
    var file = new Blob([data], {
      type: 'image/jpeg'
    });
    var fileURL = URL.createObjectURL(file);
    window.open(fileURL);
    return response;
  });
},

I am new to AngularJs, if could only get the resources or documentations to look for this. That will be helpful

We are displaying the details of the user in an HTML page and apart from other details it contains a link item in it, which retrieves the image stored as BLOB of the user from the database. Our angular Service is written, Click on the link item opens (which is actually the filename of that image in the database) up a browser window displaying the Image. Both storing and retrieving the image works fine Now our requirement is to just load on first load of HTML page the Image as a preview.

Angular service is like

getDownloadDoc: function(empId) {

  return $http.get(contextPath1 + "/PdfServletDoc?documentID=" + empId + "", {
    responseType: 'arraybuffer'
  }).then(function(response) {
    var data = response.data;
    var file = new Blob([data], {
      type: 'image/jpeg'
    });
    var fileURL = URL.createObjectURL(file);
    window.open(fileURL);
    return response;
  });
},

I am new to AngularJs, if could only get the resources or documentations to look for this. That will be helpful

• javascript
• angularjs
• blob

Share Improve this question Follow edited Jul 14, 2017 at 6:56 Priya 1,55411 gold badge1414 silver badges3333 bronze badges asked Jul 12, 2017 at 9:06 Mozif BeighMozif Beigh 11111 gold badge11 silver badge88 bronze badges 1

• 2 Don't generate Blob instead do arraybuffer to base64; then adding data:image/jpeg;base64,responsestring will give you proper image when you will give that as a src to image tag. Ref: stackoverflow./questions/9267899/… . For download just use the same respponse string with data:application/octate-stream;base64,responsestring – Priya Commented Jul 12, 2017 at 9:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I am assuming that your image is downloaded perfectly and fileURL contains path to image, then you can do but first pass fileURL to controller and in your template file:

<img ng-src={{fileURL}}></img>

In Controller:

you will call your angular service like this:

function yourImageSuccessHandler(fileUrl, options) {
            $scope.fileUrl = fileUrl; // now you will have fileUrl in 
                                      // controller
        }
        yourService.getDownloadDoc(empId, {
            successCallBack: yourImageSuccessHandler
        });

In Service

getDownloadDoc : function(empId, options) {

    return $http.get(contextPath1+"/PdfServletDoc?documentID="+empId+"", {
                        responseType : 'arraybuffer'
                    }

            ).success(function(data) {
                var file = new Blob([ data ], {
                    type : 'image/jpeg'
                });
                var fileURL = URL.createObjectURL(file);

                if(options && options.successCallBack) {
                    return options.successCallBack(fileURL, {});
                }
            });
        },

Instead of creating a dataURL from an arraybuffer, set the responseType to 'blob'.

To display the blob as an image with the ng-src directive, convert the blob to a data URL with URL.createObjectURL():

  var config = {
      responseType: 'blob'
  };
  $http.get(url,config)
    .then(function(response) {
      vm.blob = response.data;
      vm.dataURL = URL.createObjectURL(vm.blob);
  });

  <h1>Blob image demo</h1>
  <img ng-src="{{dataURL}}">

The DEMO

angular.module("app",[])
.run(function($rootScope, $http) {
  var vm = $rootScope;
  var config = {responseType: 'blob'};
  var url = "https://i.imgur./YnjcO.jpg"
  $http.get(url,config)
    .then(function(response) {
      vm.blob = response.data;
      vm.dataURL = URL.createObjectURL(vm.blob);
  });
})

<script src="//unpkg./angular/angular.js"></script>
  <body ng-app=app>
    <h1>Blob image demo</h1>
    <img ng-src="{{dataURL}}" style="width: 200px">
  </body>

---

Update

the img src is pointing to the URL but it is showing image src unsafe blob and giving just small image icon. I tried to add

$pileProvider.aHrefSanitizationWhitelist(
     /^\s*(https?|ftp‌​‌​|mailto|chrome-ext‌​en‌​sion):/
  ); 
$pileProvider.imgSrcSanitizationWhitelist(
    /^\s*(https?|f‌‌​​tp|mailto|chrome-ex‌​t‌​ension):/
);  

But still facing same issue

The use AngularJS V1.6 or set the default sanitation settings to:

var aHrefSanitizationWhitelist = 
                 /^\s*(https?|ftp|mailto|tel|file):/;
var imgSrcSanitizationWhitelist = 
                 /^\s*((https?|ftp|file|blob):|data:image\/)/;

For more information,

• GitHub AngularJS Source code sanitizeUri.js Line #9
• AngularJS $pileProvider API Reference

本文标签： javascriptDisplaying Blob image in angularjsStack Overflow