Wie png binäre Daten in ein img-Tag einfügen und es als Bild anzeigen?
Ich benutze das
%Vor%um ein Bild herunterzuladen, und es erscheint im Binärformat und sieht so aus
node.js gibt es als
zurück %Vor%Aber jetzt, wie lege ich das in ein Bild-Tag und zeige es als Bild. Hinweis: Ich nicht möchte Rückdaten als base64-Codierung haben, es muss binär sein. Es ist in Ordnung mit der Konvertierung der binären in base64 auf Client-Seite.
Wenn ich es an die readAsDataURL übergebe, heißt es TypeError exception.
Danke
BEARBEITEN
%Vor% Dies scheint es in eine base64-Codierung umzuwandeln, die als data:application/octet-stream;base64, beginnt, aber kein Bild anzeigt ...
4 Antworten
jQuery Ajax unterstützt keine binären Antworten ( Okay, jetzt tut es ), gibt es einen Trick, der overrideMimeType ('text / plain; charset = x-user-defined') verwendet, um jedes Byte als ein Zeichen in der Antwortzeichenfolge zurückzugeben und dann zu loopen durch die Antwort, um ein Byte-Array der Daten zu erstellen.
Aber mit blankem XMLHttpRequest kann dies leicht mit der Eigenschaft responseType durchgeführt werden.
%Vor% Musas Antwort ist eine großartige Lösung, ich habe etwas Ähnliches in eckig implementiert und funktioniert großartig, wenn Sie responseType = 'blob' definieren, wird Ihre Antwort kein String mehr sein, sondern ein blobartiges Objekt.
Ich musste nur einen zusätzlichen Parameter zum Header-Objekt hinzufügen (nicht sicher, ob es in jQuery notwendig ist). %Code%,
Mein vollständiges Anfrageobjekt:
Verwenden Sie new Blob(data, {type : 'image/png'}) anstelle von new Blob([data])
Dadurch wird sichergestellt, dass der Medientyp des Blobs ein PNG ist.
Quelle: Ссылка
Welchen Framework / Lib Sie auch verwenden:
- Wenn Sie das Bild (a
File) erhalten, fragen Sie nach einem BLOB-Typ - Verwenden Sie die folgende Funktion, um einen Blob zu erstellen und eine URL daraus zu erhalten
- Setze dein Bild
srcauf diese URL
Code:
%Vor% Wenn Sie irgendwann entscheiden, dass das Bild nicht mehr nützlich ist, vergessen Sie nicht, es zu reinigen: URL.revokeObjectURL(yourUrl)