用angularjs在html中显示blob图像

我在mysql数据库中有一些图像存储为blob。我想用html显示它。我得到这样的服务器的响应：用angularjs在html中显示blob图像

{"data":[{"ClassImage":{"type":"Buffer","data":[91,111,98,106,101,99,116,32,70,105,108,101,93]}}],"status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"http://192.168.1.19:80/getImage","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"OK"}

我真的不知道我在做什么。在搜索后，我发现我必须将blob响应转换为base64，然后为图像创建一个临时url并使用它为图像设置src。

当我将responseType设置为blob时，响应的数据部分为空（{}）。当我没有设置任何响应类型时，我将它作为[91,111,98,106,101,99,116,32,70,105,108,101,93]。

这是代码：

$scope.getImage = function(){ 
     $http({ 
      method:'GET', 
      url: $scope.ipForHttp+"getImage" 
      // responseType:'arrayBuffer' 
     }) 
     .then(function(response){ 
      var u8 = new Uint8Array(response.data[0].ClassImage.data); 
      var b64encoded = btoa(String.fromCharCode.apply(null, u8)); 
      var file = new Blob(u8, {type: 'image/png'}); 
      $scope.fileURL = URL.createObjectURL(file); 
      $scope.content = $sce.trustAsResourceUrl($scope.fileURL); 

      console.log($scope.fileURL); 
      console.log(JSON.stringify(response)); 
     }) 
    }

的HTML：

 <div> 
      Image: 
      <!-- <img ng-src="{{content}}"> --> 
      <!-- <img data-ng-src="data:image/png;base64,{{b64encoded}}"> --> 
      <img ng-src="{{fileURL}}"> 
      <p>{{fileURL}}</p> 
     </div>

的fileURL的createObjectURL后，我得到的是blob:http://192.168.1.19/6d5ab92f-7e86-4537-893c-f22826ed1b5a

当我做到这一点我没有得到的图像。当我转到url时，页面是空白的。我究竟做错了什么？

来源

2016-09-23 Abhi

图像保存为数据库中的斑点是一个坏主意。将图像保存为base64编码数据是一件可怕的事情http://stackoverflow.com/a/38829952/267540 – e4c5

@ e4c5。是的。这是用户数据..我的老板希望它在数据库中成为一团糟。你能帮我展示吗？ – Abhi

对不起，我拒绝为坏习惯做出贡献。 – e4c5

我只是将响应转换为base64并显示它。

$scope.getImage = function(){ 
    $http({ 
     method:'GET', 
     url: $scope.ipForHttp+"getImage" 
      // responseType:'arrayBuffer' 
     }) 
    .then(function(response){ 

     $scope.b64encoded = btoa(String.fromCharCode.apply(null, response.data[0].ClassImage.data)); 

     }) 
    }

，而在HTML：

<img data-ng-src="data:image/png;base64,{{b64encoded}}">

来源

2016-09-24 07:17:28 Abhi

用angularjs在html中显示blob图像

回答

相关问题