從緩衝區轉換爲基址64使用角度閱讀

你好，我有一個應用程序使用MEAN堆棧。我從我的終點獲取圖像。圖像陣列值看起來像：從緩衝區轉換爲基址64使用角度閱讀

8,8,7,7,9,8,9,8,9,8,9,9,8,8,8,8,7,9,7,7,9,10,16,13,8,8,16,9,7,8,12,33,14,15,1

當我嘗試使用的角度這是行不通的閱讀，它表現出同樣的。

我決定使用這個函數將它轉換爲64位，這樣我就可以讀取它。

所以在我的控制，我寫這樣的：

export class MainController { 

    constructor($http) { 
    'ngInject'; 

    this.$http = $http; 
    this.getMessages(); 
    this.getImages(); 
    this.arrayBufferToBase64 = function(buffer) { 
     var binary = ''; 
     var bytes = new Uint8Array(buffer); 
     var len = bytes.byteLength; 
     for (var i = 0; i < len; i++) { 
     binary += String.fromCharCode(bytes[i]); 
     } 
     return window.btoa(binary); 
    } 


    }

，這是我的函數：

getImages() { 



    var vm = this; 
    this.$http.get('http://localhost:5000/api/photo').then(function(result) { 

     vm.images = result.data; 
     console.log(result.data); 

    }); 
    }

然後在我的前端角頁我做這樣的：

<img ng-src="data:image/png;base64,{{arrayBufferToBase64(image.img.data.data)}}" alt="" />

當我嘗試讀取像這樣的圖像。：

<img ng-src="{{image.img.data.data)}}" alt="" />

它給我的錯誤，這是二進制

但隨後仍然沒有工作

任何人可以幫助我如何可以讀取該圖片來自我的MongoDB的到來，我的節點API

來源

2017-03-01 Hesham El Masry

請檢查您的瀏覽器是否支持數據url。大多數瀏覽器的當前版本都這樣做，但它不在官方的HTML標準afaik中。

另一個問題是你需要另一個屬性，而不是ng-src。見Loading image src using a variable containing base64 data in AngularJS

，你也可以嘗試「調試」這寫的的base64數據到HTML輸出，並創建一個標籤自己的.html文件，以檢查是否有您的base64 IMG數據中的一個問題。

來源

2017-03-01 22:27:09

設置responseType到'blob'：

var config = { responseType: 'blob' }; 

$http.get(url, config).then(function (response) { 
    $scope.imageBlob = response.data; 
});

<img ng-src="{{imageBlob}}">

來源

2017-03-02 10:12:46 georgeawg

UPDATE .. 其實我一直在嘗試和努力，直到我發現這個解決方案：

首先我發現我必須分配將其轉換爲base64到我的視圖模型的功能：

vm.arrayBufferToBase64 = function(buffer) { 

    console.log(buffer); 
    var binary = ''; 
    var bytes = new Uint8Array(buffer); 
    var len = bytes.byteLength; 
    for (var i = 0; i < len; i++) { 
    binary += String.fromCharCode(bytes[i]); 
    } 
    return window.btoa(binary); 
}

，然後後，我打電話給我的API，它爲我的圖像我必須做出一個foreach循環遍歷結果迭代，然後用我的arrayBufferToBase64函數將結果轉換，然後分配到變量中forEach循環，然後我使用角度來調用它。

this.$http.get('http://localhost:5000/api/photo').then(function(result) { 


    result.data.forEach(
    function(x) { 
     x.img.base64 = vm.arrayBufferToBase64(x.img.data.data); 

    });

，然後在這裏我叫它爲視圖採用了棱角分明：

<li class="list-group-item" ng-repeat="image in main.images"> 



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


     </li>

和它的作品Taraaaa

來源

2017-03-02 21:19:27

從緩衝區轉換爲基址64使用角度閱讀

回答

相關問題