Wie kann ich Image-Binär von API-Aufruf in Daten-URI in Javascript konvertieren?
Die von mir verwendete Google API überträgt Bilder nur als Binärdaten.
Ich habe absolut keine Ahnung, wie man das in einen Daten-URI einbindet, um es anzuzeigen, danke für jede Hilfe!
Der Anruf, über den ich spreche, ist dieser API-Aufruf .
Wie Sie sehen können, heißt es:
Der Server gibt Bytes des Fotos zurück.
Für den Anruf (es ist eine Erweiterung) verwende ich die chrome_ex_oauth-Methoden. Vielleicht muss ich etwas in die Kopfzeile einfügen, um echte Binärdaten zu erhalten, keine Zeichenfolge, wie sie gerade kommt ...
Was ich tun muss, ist, die resultierende Binärdatei in Daten-URI zu konvertieren, damit ich sie anzeigen kann.
Ok, ich bekomme das aus der XHR-Anfrage heraus
Nun, ich kenne binäre Sachen nicht viel. Dies ist irgendwie codierte Binärdaten, die ich vermute? Ich habe versucht, dies in btoa und andere Base64-Encoder, alles wirft einen Fehler. Ich habe versucht, MimeType mit verschiedenen Dingen zu überschreiben und die "Antwort" änderte sich auf seltsame Weise, aber nichts akzeptiert die Daten.
So, jetzt habe ich diesen Code:
%Vor%Hat jemand anderes eine Idee, wie man diese für mich nicht nachvollziehbare Antwort in eine Daten-Uri bekommt ???
Danke für jede Hilfe
4 Antworten
Ok, ich habe die Lösung gefunden ...
Zunächst muss die Anfrage den returend Type in x-user-defined
überschreiben %Vor%Danach bleiben die Daten vom Browser unberührt.
Verwenden Sie den folgenden Base64-Encoder
%Vor%Es gibt das magische Zeug, das von mozilla gepostet wurde, das mich nicht richtig codieren ließ
%Vor%Der endgültige Code würde dann so aussehen ...
%Vor%P.S. Wenn Sie das "data: image / *" direkt in das Browserfenster legen, wird die Datei heruntergeladen und kann nicht geöffnet werden. Aber wenn du es direkt in einen img src steckst, funktioniert es gut!
Nach einigen Tests, hier ist meine Antwort:
Um das Bild einfach mit dem <img> -Tag anzuzeigen, müssen Sie das Ergebnis zunächst mit Base64 codieren. Sie können dies auf zwei verschiedene Arten tun:
-
Verwenden von JavaScript: Verwenden Sie eine Base64-Encoderfunktion, wie diese . Nachdem Sie die Ergebnis-Binärdaten codiert haben, können Sie das Bild mit dem
<img>-Tag wie folgt anzeigen:<img src="data:image/*;base64,[BASE64 ENCODED BINARY]" />. Sie müssen[BASE64 ENCODED BINARY]durch die tatsächliche codierte Binärdatei des Bildes ersetzen. Ich nehme an, dass Sie bereits wissen, wie HTML-Elementattribute durch Javascript geändert werden können. Es ist ziemlich einfach, die codierte Binärdatei in dassrc-Attribut des<img>-Tags zu setzen. -
Verwendung von PHP (meine persönliche Präferenz) : Sobald Sie eine GET-Anfrage an die API senden, wird Ihnen die Binärdatei zurückgegeben. Verwenden Sie einfach die PHP
base64_encode()-Funktion.<img src="data:image/*;base64,<?php echo base64_encode($result); ?>" />
Dabei ist die Variable $result , die Sie vom API-Aufruf erhalten. Sie können die PHP cURL Bibliothek verwenden.
Ich hoffe, das hilft.
Wenn Sie einen data: URI verwenden, nehme ich an, dass Sie ältere Browser nicht interessieren. In diesem Fall verwenden Sie btoa() wie in Wie können Sie eine Zeichenfolge zu Base64 in JavaScript codieren? , und greifen Sie auf die in der zweiten Antwort erwähnte Alternative . Dann ist der data: URI einfach:
Alle anderen Lösungen sind veraltet. Kein Base64 wird benötigt. Sehen Sie sich meine Antwort auf Holen von BLOB-Daten von der XHR-Anfrage an.
Tags und Links javascript google-api data-uri