Wie man png-Binär-Daten in ein img-tag und zeigen Sie Sie als ein Bild?

Ich bin mit diesem

        $.ajax({
            type: "GET",
            url: 'template/bump1/purse.png',
            datatype:"image/png",
            success: function (data) {


                var reader = new FileReader();

                reader.onload = function (e) {
                  var img = document.getElementById("CaptchaImg");
                  img.src = e.target.result;
                };
                reader.readAsDataURL(data);


                //$('#CaptchaImg').attr('src', data);
            }
         });

herunterladen Sie ein Bild, und es kommt im binary suchen mag dieses

Wie man png-Binär-Daten in ein img-tag und zeigen Sie Sie als ein Bild?

node.js ist es wieder wie

                        WriteHeaderMode('image/png', res, 200);
                        res.end(data, 'binary');

Aber jetzt, wie übertrage ich das in ein image-tag und zeigen Sie es als ein Bild. Hinweis: ich nicht haben wollen, Rückgabe der Daten als base64-Codierung, hat es sich als binäre. Im gut mit der Umwandlung der Binär-in base64-auf client-Seite aber.

Wenn ich an den readAsDataURL sagt es TypeError Ausnahme.

Dank

BEARBEITEN

                var img = document.getElementById("CaptchaImg");

                  var reader = new FileReader();

                  reader.onload = function(e) {
                      //img.src = e.target.result;
                      $("body").html(e.target.result);
                    };

                  reader.readAsDataURL(new Blob([data]));

dies scheint eine Konvertierung in das base64-Codierung, die beginnt, als data:application/octet-stream;base64, aber kein Bild anzeigt...

  • Ich habe nicht recherchiert, so viel, aber ich vermute, da application/octet-stream ist im Grunde sagen "download me", könnte man versuchen, eine gerade .replace("application/octet-stream", "image/png");. Lohnt sich ein Schuss lol
  • Ich habe es versucht, aber es hat nicht funktioniert.
  • und zumindest ich weiß, ich war nicht verrückt für die Annahme, es. Aber anstatt zu versuchen, es zu reparieren als das problem, vielleicht versuchen, neu zu denken und die Logik? Nur durch die Einstellung der src - Attribut, um die Bild-URL werden Sie der download der das Bild so, dass anstelle von AJAX nur das tun,
  • Ich will nicht zu tun, weil ich kann es nicht hier, aber ich bin auch der Versand einer FormData() als eine Anlage, die hat ein Bild. d.h. ich versuche zum hochladen und laden Sie ein Bild in der gleichen ajax-call.
  • Ich habe versucht, Ihre Lösung, aber ich verwendet, eckig $http, und legen Sie responseType auf "blob". Dann hat es geklappt mit deiner Lösung, aber mit reader.readAsDataURL(data.data);. Die tatsächlichen Daten einer Immobilie auf das response-Objekt. Ich bin mir nicht sicher, ob dies ist nur ein Unterschied, wie jQuery und angular arbeitet.
InformationsquelleAutor sneaky | 2015-08-19
  1. 5

    jQuery Ajax nicht unterstützt binäre Antworten(okay jetzt funktioniert es), gibt es einen trick, verwendet overrideMimeType('text/plain; charset=x-user-defined'), um jedes byte als ein Zeichen in der Antwort-string und dann eine Schleife durch die response zu erstellen ein byte-array mit den Daten.

    Jedoch mit nackten XMLHttpRequest dies kann leicht getan werden mit der Nutzung der responseType Eigenschaft.

    var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        var img = document.getElementById("CaptchaImg");
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response);
    }
}
xhr.open('GET', 'template/bump1/purse.png');
xhr.responseType = 'blob';
xhr.send();
    InformationsquelleAutor Musa
  2. 2

    Musa ' s Antwort ist eine großartige Lösung, das ich umgesetzt habe etwas ähnliches auch in eckig und funktioniert großartig, wenn Sie definieren responseType = 'blob' Ihre Antwort wird nicht ein string mehr, es wird ein blob-Typ-Objekt.
    Ich brauchte nur zu fügen Sie einen zusätzlichen parameter an die Header-Objekt (nicht sicher, ob es notwendig ist, in jQuery). headers: {'Content-Type': "image/png"},
    Meine vollständigen request-Objekt:

    var request = {
            url: "_/get_image_/get",
            method:"GET",
            headers: {'Content-Type': "image/png"},
            responseType: 'blob'
        }
    InformationsquelleAutor Landeta
  3. 1

    Versuchen Sie es mit new Blob(data, {type : 'image/png'}) statt new Blob([data])

    Dadurch wird sichergestellt, dass der media-Typ der blob ist ein png.

    Quelle: https://developer.mozilla.org/en-US/docs/Web/API/Blob

    • Das habe ich versucht, es erstellt das png base64, aber es funktioniert immer noch nicht, wird das Bild nicht angezeigt
    • dropbox.com/s/pa8e3orbvo10rnu/base64.txt?dl=0
    • ist dies eine Antwort aus der xhr-request?
    • nicht die von jquery
    • jquery ajax() ist im Grunde eine Erweiterung des Browsers XMLHttpRequest(). Aber ich werde denke mal, dass das die Antwort, die Sie bekam, von diesem Antrag zu Ihren nodejs script. Dann hast du ein problem, da es scheint nicht zu einem gültigen Datensatz für ein Bild und noch weniger für die eine base64-codierte nichts.
    • Ich habe lange gesucht, die Lösung mehr als 30mn, prost!

    InformationsquelleAutor Thomas Connard
  4. 0

    Was framework/lib du verwendest:

    • Wenn immer das Bild (ein File), bitten Sie um einen BLOB-Typ
    • Verwenden Sie die folgende Funktion zum erstellen einer Blob, und bekommen Sie eine URL aus der es
    • Festlegen, dass Ihr Bild src zu dieser URL

    Code:

    export function fileToImageBase64Url(file: File): string {
  const blob = new Blob([file], { type: 'image/png' });
  return URL.createObjectURL(blob);
}

    Wenn Sie irgendwann entscheiden, dass das Bild nicht mehr nützlich, vergessen Sie nicht, um es zu reinigen: URL.revokeObjectURL(yourUrl)

    InformationsquelleAutor maxime1992
Schreibe einen Kommentar