2017-04-24 3 views
-1

Blick auf meinen CodeWie konvertiert man PNG-Bild-String-Daten in PNG?

<img src='data:image/png;base64,{{imgSrc}}'> 

In meinem Controller

$scope.imgSrc = $scope.deviceDetail.imgSrc; 

Ich erhalte diese Art von Antwort von meinem Backend in imgSrc, die in mongodb gespeichert ist.

"�PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\u0003 \u0000\u0000\u0002R\b\u0002\u0000\u0000\u0000��6A\u0000\u0000\u0000\u0006bKGD\u0000�\u0000�\u0000�����\u0000\u0000 \u0000IDATx���{xT���W x\u0000\u0006%$F�c F\t�\"�V��\u0000�P\u000f\b���xEъ��T�[email protected]� \u0018�諀`�TJ�Z\u0015\t�\"R��@\u000b|H�h8\u0005\......" 

Jetzt möchte ich png Bild aus diesen Daten, habe ich diese Daten in base64 versucht, aber immer noch nicht Bild zu bekommen. Bitte schlagen Sie mir vor, was hier falsch ist?

+0

Wie werden Sie in der DB für dieses Bild zu speichern. Speichern Sie das Bild als base64-codierte Zeichenfolge anstelle von binär. – Thangadurai

+0

Überprüfen Sie diesen Beitrag, es könnte Ihnen helfen. http://stackoverflow.com/questions/4796914/store-images-in-a-mongo-database – CrazyMac

+0

@Thangadurai Ich bekomme diese Bilddaten von UbersmithAPI-Server und in Mongodb, ich habe diese Daten in Base64 versucht, aber es gibt zurück Dieser Fehler Fehler: Pfad muss eine Zeichenfolge ohne Nullbytes sein. –

Antwort

0

Sie können Bild zu Datenbasis64 Bit umwandeln.

Base64 ist eine Gruppe ähnlicher Binär-zu-Text-Codierungsschemas, die Binärdaten in einem ASCII-Zeichenfolgenformat darstellen, indem sie es in eine Radix-64-Darstellung umwandeln.

Um eine Datei mit cordova, ionic oder phonegap in base64 (Bild oder jede andere Art von Datei) zu konvertieren, benötigen wir nur das Cordova-Datei-Plugin und 1 menschliches Auge. Dann verwenden wir den FileReader, um den Inhalt einer Datei mit der Methode readAsDataURL zu lesen.

/** 
* This function will handle the conversion from a file to base64 format 
* 
* @path string 
* @callback function receives as first parameter the content of the image 
*/ 
function getFileContentAsBase64(path,callback){ 
    window.resolveLocalFileSystemURL(path, gotFile, fail); 

    function fail(e) { 
      alert('Cannot found requested file'); 
    } 

    function gotFile(fileEntry) { 
      fileEntry.file(function(file) { 
       var reader = new FileReader(); 
       reader.onloadend = function(e) { 
        var content = this.result; 
        callback(content); 
       }; 
       // The most important point, use the readAsDatURL Method from the file plugin 
       reader.readAsDataURL(file); 
      }); 
    }} 

Dann werden wir es verwenden, um ein lokales Bild zu Base64 konvertieren: var path = "file: //storage/0/downloads/myimage.png";

// Convert image 
getFileContentAsBase64(path,function(base64Image){ 
    //window.open(base64Image); 
    console.log(base64Image); 
    // Then you'll be able to handle the myimage.png file as base64 
}); 

Denken Sie daran, dass Sie das Datei-Plugin von Cordova benötigen, lesen und lernen, wie Sie es hier verwenden. Sie können die Datei-Plugin in Ihr Projekt herunterladen in Ihrem cordova CLI ausführen:

cordova plugin add cordova-plugin-file 

weiter here

https://gist.github.com/HereChen/e173c64090bea2e2fa51

http://tutsheap.com/web/javascript/get-base64-image-url/

Verwandte Themen