Umwandeln Byte-array Base64-string in Angularjs

Ich bin immer byte-array im service die Antwort und das Bild würde in einem Bild gezeigt werden Bereich meiner html-Seite. Irgendeine Idee, wie kann ich dies umsetzen. Ich habe versucht, herauszufinden, die Lösung für dieses über stack overflow aber nicht in der Lage, gültige Lösung. Bitte helfen Sie. Mein code ist:

this.getPrescription = function(pres_id) {
     var deff = $q.defer();
     $http({
           method: "GET",
           url: "www.abc.com/api/&prescriptionOnly=false&page=1",
           headers: {
           'Authorization': 'Bearer ' + localStorage.getItem("chemist_access_token"),
           'Content-Type': 'application/json'
           },
           responseType: 'arraybuffer'
           }).then(function(objS) {
                   console.log("getPrescription:\n" + JSON.stringify(objS))
                   deff.resolve(objS);
                   }, function(objE) {
                   errorHandler.serverErrorhandler(objE);
                   deff.reject(objE);
                   });
     return deff.promise;
     };

und in meinem controller rufe ich gerne:

$scope.getPrescription = function(id) {
    $ionicLoading.show({
        template: '<ion-spinner icon="spiral"></ion-spinner>',
        noBackdrop: false
    });
    serverRepo.prescriptionGet(id).then(function(objS) {
        console.log("orderByCustomer:\n" + JSON.stringify(objS));
        $scope.picdata=$window.URL.createObjectURL(new Blob([objS.data], {type: 'image/png'}));

        $ionicLoading.hide();
        console.log("getOrderByNew_success_loadMore:\n" +$scope.picdata);
    }, function(objE) {
        $ionicLoading.hide();
    });
}

und wenn ich meine Konsole zeigt:
getOrderByNew_success_loadMore:
blob:file:///0aa86d9f-61a1-4049-b18c-7bf81e05909f

Veröffentlichen Sie Ihren code !
versuchen Sie, wie dieses <img src="data:image/jpg;base64,{{yourData}}" />
serverRepo.prescriptionGet(id).dann(function(objS) {$scope.picdata = objS.data;}, function(objE) { $ionicLoading.hide(); }); ich bin immer byte-array in objS.Daten und mit picData in meinem html wie: <img ng-src="data:image/JPEG;base64,{{picdata}}"/>
was die Anzeige picdata in der Konsole?

InformationsquelleAutor Anjaney Mishra | 2016-05-07

  1. 5

    Verwenden Sie diesen filter, umwandeln byte-array base64 -

    app.filter('bytetobase', function () {
    return 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);
    };
});

    binden es als Bild verwenden 

    <img ng-src="data:image/JPEG;base64,{{picture | bytetobase}}" alt="..." width="100" height="100">

    Oder wenn Sie müssen, weisen Sie es einer Variablen verwenden

    var image = $filter('bytetobase')($scope.picture );

    InformationsquelleAutor Nair Athul

  2. 3

    Wenn Sie brauchen, um die Anzeige und das Bild von byte-Arrays Sie können ein Objekt erstellen, das mithilfe von Blob-und bekommen es, die URL zu übergeben, die in die image-Tags Quelle. Der Letzte parameter, die in einem Blob-Konstruktor enthält Informationen über blob-Typ, so sollten Sie die richtige Art während der blob Schöpfung.

    $http.get(url, {responseType: 'arraybuffer'})
  .then(function(response) {
    return $window.URL.createObjectURL(new Blob([response.data], {type: 'image/png'}));
  });

    Und wenn Sie nicht Vorhaben, mit Ihrem Objekt mehr (z.B. nach Bild geladen wurde, in die entsprechenden img-tag)

    Update

    Alternative Lösung mit base64

    $scope.getPrescription = function(id) {
  $ionicLoading.show({
    template: '<ion-spinner icon="spiral"></ion-spinner>',
    noBackdrop: false
  });
  serverRepo.prescriptionGet(id).then(function(objS) {
    console.log("orderByCustomer:\n" + JSON.stringify(objS));
    //Creating file reader
    var reader = new window.FileReader();
    //Creating blob from server's data
    var data = new Blob([objS.data], {type: 'image/jpeg'});
    //Starting reading data
    reader.readAsDataURL(data); 
    //When all data was read
    reader.onloadend = function() {
      //Setting source of the image
      $scope.picdata = reader.result;
      //Forcing digest loop
      $scope.$apply();
    }

    $ionicLoading.hide();
    console.log("getOrderByNew_success_loadMore:\n" +$scope.picdata);
    }, function(objE) {
    $ionicLoading.hide();
  });
}
    Ich führen Sie die Funktion wie folgt:- serverRepo.prescriptionGet(id).dann(function(objS) { $scope.picdata=$Fenster.URL.createObjectURL(new Blob([objS.Daten], {type: 'image/png'})); },function(err){}); Und die folgenden ist der code von html:- <center><img ng-src="{{picdata}}"/></center> Und ich bekam folgende Antwort von der Funktion:- blob:file:///a3831c70-79ef-42db-8c9e-6d3548ca1bf2
    Vergaß hinzuzufügen, responseType-parameter in get-Anfrage $http.get(url, {responseType: 'arraybuffer'})
    Ich habe responseType in meinem Dienst rufen, aber die URL, die ich wieder nicht angezeigt wird Bild-in <img>
    Sind Sie sicher, dass Sie Hinzugefügt {responseType: 'arraybuffer'} , $http.Holen Sie sich nennen und nicht zu prescriptionGet? Und überprüfen Sie Ihre browser-Konsole, um zu sehen, ob irgendwelche Fehler aufgelaufenen.
    Ich änderungen in meiner Frage.Meine code in Frage. Bitte überprüfen Sie und lassen Sie mich wissen, wo ich bin, Begehen Fehler.

    InformationsquelleAutor k10der

Schreibe einen Kommentar