【问题标题】：Displaying Blob image in angularjs在angularjs中显示Blob图像
【发布时间】：2017-12-16 14:49:49
【问题描述】：

我们在 HTML 页面中显示用户的详细信息，除了其他详细信息之外，它还包含一个链接项，该链接项从数据库中检索存储为用户 BLOB 的图像。我们编写了 Angular 服务，单击链接项将打开一个显示图像的浏览器窗口（实际上是数据库中该图像的文件名）。存储和检索图像都可以正常工作现在我们的要求是在第一次加载 HTML 页面时将图像作为预览加载。

Angular 服务就像

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

我是 AngularJs 的新手，如果只能获取资源或文档来寻找这个。这会很有帮助

【问题讨论】：

不生成 Blob 而是对 base64 执行 arraybuffer；然后添加 data:image/jpeg;base64,responsestring 当您将其作为图像标签的 src 时，将为您提供正确的图像。参考：stackoverflow.com/questions/9267899/…。对于下载，只需使用与数据相同的响应字符串：application/octate-stream;base64,responsestring

标签： javascript angularjs blob

【解决方案1】：

我假设您的图像已完美下载并且 fileURL 包含图像的路径，那么你可以做，但首先将 fileURL 传递给控制器和你的模板文件：

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

在控制器中：

你会像这样调用你的 Angular 服务：

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

服务中

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

【讨论】：

是的，图像正在完美下载，我想 PathURL 也是正确的。我可以简单地将这个 fileURL 变量从服务传递到控制器..？ ...因为我正在这样做，但图像没有加载到 img 标签中。
@MozifBeigh 你可以在回调中传递变量。
如果将变量传递回控制器，console.log (fileURL) 只包含状态代码 (200) 而不是 URL。在服务中，URL 正确显示 blob:localhost:8080/405f0b1d-fcb7-42a8-860e-2d04f033f01b.
是的。它的工作.... URL 被正确传递，但图像仍未在 HTML 页面上呈现。
注释你的 html 代码和存储 imageUrl 的变量

【解决方案2】：

不要从数组缓冲区创建 dataURL，而是将 responseType 设置为“blob”。

要将 blob 显示为带有 ng-src directive 的图像，请将 blob 转换为带有 URL.createObjectURL() 的数据 URL：

  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.com/YnjcO.jpg"
  $http.get(url,config)
    .then(function(response) {
      vm.blob = response.data;
      vm.dataURL = URL.createObjectURL(vm.blob);
  });
})

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

更新

img src 指向 URL，但它显示图像 src 不安全 blob 并仅提供小图像图标。我尝试添加
$compileProvider.aHrefSanitizationWhitelist(
     /^\s*(https?|ftp‌‌|mailto|chrome-ext‌en‌sion):/
  ); 
$compileProvider.imgSrcSanitizationWhitelist(
    /^\s*(https?|f‌‌tp|mailto|chrome-ex‌t‌ension):/
);  
但仍然面临同样的问题

使用AngularJS V1.6或将默认的卫生设置设置为：

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

如需了解更多信息，

【讨论】：

img src 指向 URL，但它显示图像 src 不安全 blob 并仅提供小图像图标。我尝试添加 $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp‌|mailto|chrome-exten‌sion):/); $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|f‌tp|mailto|chrome-ext‌ension):/);但仍然面临同样的问题
您使用的是哪个版本的 AngularJS？它适用于上述 Demo 中的 V1.6。
这个解决方案有时有效，而不是设置响应类型 blob 我认为数组缓冲区解决了@wasif 提到的问题