AJAX - seltsame Zeichen im img Tag nach Anfrage Antwort

Ich habe Probleme bei der Lösung eines Problems mit einer AJAX-Anfrage, die ich mache (ich bin neu bei AJAX). Ich habe ein API-Setup und ich möchte ein PNG-Bild mit einem Authorization-Header abrufen, die ein Token verwendet, das ich bereitstelle (die im lokalen Speicher gespeichert ist). So zum Beispiel, wenn ich das Bild mit dem Auth-Header zugreifen waren, dann würde ich das tun ...AJAX - seltsame Zeichen im img Tag nach Anfrage Antwort

$.ajaxSetup({headers: {"Authorization" : localStorage.token}});

Ich bin in der Lage, das Bild abzurufen. Ich kann es in der Registerkarte „Netzwerk“ in Chrome sehen, aber wenn ich es auf meine div mit diesem unten anhängen ...

$.ajax({ 
    //Use commas for several parameters 
    type: 'GET', 
    url: *url of image*, 
    contentType: 'image/png', 
    success: function (data) { 
    binary = data; 
    $("#image").attr("src", 'data:image/png;base64,'+ data); 
}

... es kommt in diesem seltsamen Zeichenformat aus (wie weiter unten zu sehen) :

div id = "image" src = "Daten: image/png, base64, PNG

IHDRww^ÀþIDATxÚìÝ | ÔWº þ½¿ÿ½Ý.ÅâÉd2îdâ®BB ayy ) îÞbÅÝ ¥ TÐzi) Ô? ÞRún »rï]» + w · {þçùÌ < Ã ð] ùVìçõz¿H & I ° Ï ÷ ç < çï} OÊø; æO1 ªzhÔÀdÆþKÈ¤! .......“ etc

Ich würde es gerne wieder als Bild oder eine b64 Zeichenfolge kommen, die ich einfach in die src param setzen können. Ich habe überall online gesucht und finde keine Antwort.

Irgendwelche Ideen? Ich schätze deine Zeit sehr.

This is the response I receive

Quelle

2017-12-23 D. Jones

Was bekommen Sie als 'Daten' in Ihrem' Erfolgshandler'? –

Ich bekomme "NPNG ... etc" mit vielen dieser " " -Diamantenzeichen –

Ihr Code heruntergeladen wird das Bild, das im Binärformat ist.

Sie müssen die Binärdatei nach base64 codieren, um das Bild in base64 anzuzeigen. Verwenden Sie btoa wie in dieser Antwort erläutert: https://stackoverflow.com/a/247261/2223027

Quelle

2017-12-23 18:26:15 pyb

Danke für solch eine schnelle Antwort. Ich habe versucht, mit btoa (unescape (encodeURIComponent (binary)))), wobei "binary" ist die seltsame codierte Zeichenfolge und ich tatsächlich in der Tat, was eine b64-Zeichenfolge zu sein, aber wenn ich das hier in diesen Konverter [https://codebeautify.org/base64-to-image-converter], das Bild wird nicht angezeigt. Ich glaube nicht, dass es die Zeichenfolge korrekt codiert hat. Nochmals vielen Dank - irgendwelche anderen Gedanken? –

Hmm nicht sicher, warum Sie sowohl 'unescape' als auch 'encodeURIComponent' verwenden müssen. Eine Alternative ist [Canvas.toDataURL()] zu verwenden (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) 1. Baue ein leinwandElement mit dem Bild URL 2. Holen Sie sich die Daten-URL (siehe Link oben und https://Stackoverflow.com/a/7101807/2223027) – pyb

Wäre ich noch in der Lage, meine Anfrage Header mit diesem zu verwenden? Das Bild kommt durch, aber ich bin mehr davon überzeugt, dass es nur eine Konvertierung ist, die ich ausführen muss. Ich habe mich tatsächlich in Chrome umgesehen und die gültige B64-Zeichenfolge kommt durch. Ich habe Inspect Element geöffnet, oben auf die Registerkarte "Netzwerk" geklickt und dann auf das Bild und die ausgewählte Vorschau geklickt, und ich kann es sehen. Ich lege es in den Konverter und es funktioniert, aber ich weiß nicht, wie man es speichert.Schau mal hier: http://tinypic.com/r/9ia3kl/9. Vielen Dank nochmal –

Es scheint, als ob Sie Bilddatei im binären Datenformat und nicht das Base64-Format erhalten, wie Sie erwarten, in das Attribut img-Tag src zu setzen.

Wenn Sie Bild-URL haben, können Sie es in die img src direkt keine Notwendigkeit von Ajax Anruf setzen.

Quelle

2017-12-23 18:28:14 Dharmang

Ja, ich verstehe. Die Art und Weise, wie ich alles konfiguriert habe, ist die Art, wie es eingerichtet wird. Was komisch ist, ist, dass ich das Bild tatsächlich mit einer Chrome-Erweiterung "ModHeader" erstellen kann, wo ich den Authorization-Header fest codieren kann, aber mit dem, was ich oben gezeigt habe, kann ich es nicht sehen: / –

AJAX - seltsame Zeichen im img Tag nach Anfrage Antwort

Antwort

Verwandte Themen