Wie in Base64 Zeichenfolge das binäre Bild aus Antwort analysieren?

Question

Ich möchte das angeforderte Bild von meiner REST-API in base64-Zeichenfolge analysieren.

Erstens ... Ich dachte, es wäre leicht, nur window.btoa() Funktion für diesen Zweck zu verwenden.

Wenn ich versuche, es in einem solchen Teil meiner Anwendung zu tun:

.done(function(response, position) { 
    var texture = new Image(); 
    texture.src = "data:image/png;base64," + window.btoa(response); 

ich den nächsten Fehler haben: Uncaught InvalidCharacterError: Fehler ‚btoa‘ auf ‚Fenster‘ auszuführen: Die Zeichenfolge codiert sein, enthält Zeichen außerhalb des Latin1-Bereichs.

Wie ich hier lesen: javascript atob returning 'String contains an invalid character'

Das Problem tritt auf, weil die newlines in the response und deshalb window.btoa() gescheitert. Jedes binäre Bildformat wird natürlich Zeilenumbrüche haben ... Aber wie von dem Link oben war der Vorschlag, diese Zeichen zu entfernen/ersetzen - ist ein schlechter Vorschlag für mich, denn wenn einige Zeichen aus dem binären Bild zu entfernen/ersetzen wird es einfach beschädigt sein.

Natürlich beziehen sich die möglichen Alternativen zu dem API-Design: - eine Funktion hinzuzufügen, die Base64-Darstellung zurückkehren - eine Funktion hinzuzufügen, die URL zum Bild zurückkehren

Wenn ich nicht reparieren Ich werde die Base64-Darstellung vom Server zurückgeben, aber ich mag das nicht.

Gibt es einen Weg, um mein Problem mit der Handhabung von Binärbild aus der Antwort zu lösen, wie es oben im Teil des Screenshots gezeigt wird, nicht wahr?

Answer 1

Base 64 Bilddaten werden für mich gearbeitet wie

<img src="data:image/png;base64,' + responce + '" />

Answer 2

Im Erraten escape auf der Zeichenfolge zu verwenden, bevor Sie es an die Funktion übergeben, ohne den API-Aufruf ich mich nicht testen kann.

Test

encodeURI("testñ$☺PNW¢=") 

kehrt

"test%C3%B1$%E2%98%BAPNW%C2%A2=" 

Es entkommt nur alle Zeichen, sollte es alle illegalen Zeichen in der Zeichenfolge

Test

encodeURI("¶!┼Æê‼_ðÄÄ┘Ì+\+,o▬MBc§yþó÷ö") 

retur entkommen

ns

"%C2%B6!%E2%94%BC%C3%86%C3%AA%E2%80%BC_%C3%B0%C3%84%C3%84%E2%94%98%C3%8C++,o%E2%96%ACMBc%C2%A7y%C3%BE%C3%B3%C3%B7%C3%B6" 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

Answer 3

Das Problem, das Sie stoßen sind, ist, dass die Reaktion in Betracht gezogen wird, um einen Unicode-String.Siehe den Abschnitt über Unicode-Strings hier: window.btoa

Mehrere Lösungen werden in diesem post angeboten

Answer 4

denke ich, ein Teil des Problems ist, den Sie treffen, dass jQuery.ajax nicht not nativ XHR2 Blob/Arraybuffer-Typen unterstützen, die gut umgehen kann Binärdaten (siehe Reading binary files using jQuery.ajax).

Wenn Sie ein natives XHR-Objekt mit xhr.responseType = 'arraybuffer' verwenden, dann lesen Sie das Antwort-Array und konvertieren Sie es in Base64, Sie bekommen, was Sie wollen.

Hier ist eine Lösung, die funktioniert für mich:

// http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/ 
 
function fetchBlob(uri, callback) { 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('GET', uri, true); 
 
    xhr.responseType = 'arraybuffer'; 
 

 
    xhr.onload = function(e) { 
 
    if (this.status == 200) { 
 
     var blob = this.response; 
 
     if (callback) { 
 
     callback(blob); 
 
     } 
 
    } 
 
    }; 
 
    xhr.send(); 
 
}; 
 

 
fetchBlob('https://i.imgur.com/uUGeiSFb.jpg', function(blob) { 
 
    // Array buffer to Base64: 
 
    var str = btoa(String.fromCharCode.apply(null, new Uint8Array(blob))); 
 

 
    console.log(str); 
 
    // Or: '<img src="data:image/jpeg;base64,' + str + '">' 
 
});

https://jsfiddle.net/oy1pk8r3/2/

Produziert Base64-codierte Ausgabe der Konsole: /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAIBAQIBAQICAgICAgICAw.....

Answer 5

statt mit _arrayBufferToBase64 durch den Klecks Looping (), verwenden apply() um die Konvertierung zu tun, es 30-mal schneller in meinem Browser und ist prägnanter

// http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/ 
 
function fetchBlob(uri, callback) { 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('GET', uri, true); 
 
    xhr.responseType = 'arraybuffer'; 
 

 
    xhr.onload = function(e) { 
 
    if (this.status == 200) { 
 
     var blob = this.response; 
 
     if (callback) { 
 
     callback(blob); 
 
     } 
 
    } 
 
    }; 
 
    xhr.send(); 
 
}; 
 

 
fetchBlob('https://i.imgur.com/uUGeiSFb.jpg', function(blob) { 
 
    var str = String.fromCharCode.apply(null, new Uint8Array(blob)); 
 
    console.log(str); 
 
    // the base64 data: image is then 
 
    // '<img src="data:image/jpeg;base64,' + btoa(str) + '" />' \t 
 
});