Question

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

{"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

当我这样做时，我没有得到图像。当我转到网址时，页面是空白的。我做错了什么？

Answer 1

我只需将响应转换为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}}">

使用angularjs在html中显示blob图像

1 个答案: