[英]Display blob image in html with angularjs
我有一些圖像作為blob存儲在mysql數據庫中。 我想將其顯示為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>
在createObjectURL
之后得到的fileURL
是blob:http://192.168.1.19/6d5ab92f-7e86-4537-893c-f22826ed1b5a
當我這樣做時,我不會得到圖像。 當我轉到url時頁面為空白。 我究竟做錯了什么?
我只需要將響應轉換為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}}">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.