バッファからベース64に変換して角を使って読む

Question

こんにちは私はMEANスタックを使っているアプリを持っています。私は画像を取得するための私の終点から取得しています。イメージ配列の値は次のようになります。

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からのこの画像を読み取ることができますどのように助けることができる

を働いていないことを私にエラーを表示

Answer 1

お客様のブラウザでデータのURLがサポートされているかどうかをご確認ください。ほとんどのブラウザの現在のバージョンはそうしていますが、公式のHTML標準afaikにはありません。

別の問題は、ng-srcではなく別の属性が必要なことです。 Loading image src using a variable containing base64 data in AngularJS

また、base64データをHTML出力に書き込んでこれをデバッグし、base64 imgデータに問題があるかどうかを確認するタグ付きの独自の.htmlファイルを作成することもできます。 responseType'blob'に設定

Answer 2

：

var config = { responseType: 'blob' }; 

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

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

Answer 3

UPDATEを..私はこの解決策を見つけるまで は実際に私がしようと試みて保持：最初の

私が割り当てる必要がことがわかりましたベースモデル64に転送する機能：

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を呼び出した後、私は結果を反復処理し、その後、結果を変換し、その後に変数に割り当てることが私のarrayBufferToBase64機能を使用するforeachループをしなければなりませんforEachループを作成し、次にangleを使用して呼び出します。

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

    }); 

、その後、ここで私はビューの角度使ってそれを呼び出す：Taraaaa

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



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


     </li> 

、それが動作します