Rendering byte[] zu Bild mit jQuery

Question

Ich lese gerade ein Bild aus einer SQL Server-Datenbank als byte[]. Ich möchte das Bild entweder als byte[] oder ein echtes Bild an jQuery übergeben und es dynamisch laden.

Wie und was wäre der beste Ansatz dafür?

Vielen Dank im Voraus :)

Edita: Hier ist die Lösung:

1. Server-seitig / C#: string json = JsonConvert.SerializeObject(employee);
2. Client-seitig / Ajax: $('#image').attr('src', "data:image/jpg;base64,"+employee.Image);

Answer 1

Geben Sie das Byte[] vom Webserver mit dem richtigen Content-Type zurück, so dass Sie es als Quelle für ein Bild-Tag verwenden können. Das sollte die einfachste Lösung sein.

Answer 2

Wenn Sie es auf diese Weise machen müssen, können Sie die Bilddaten direkt in das src-Attribut einfügen, indem Sie die folgende Syntax verwenden:

data:image/<type>;base64,<data>

Ersetzen Sie durch den Bildtyp (jpg, png, gif) und durch Ihre Daten, kodiert in Base 64.

Wie decyclone jedoch sagt, wäre es am besten, eine separate Seite zu erstellen, die nur Ihre Bilddaten ausgibt und den entsprechenden Content-Type-Header sendet. Setzen Sie dann das Bild src so, dass es auf diese Seite verweist.

Answer 3

Ich glaube nicht, dass die Verwendung von jQuery ist hier das Richtige zu tun. Das ist eine Sache der Kunden. JavaScript, um genau zu sein.

Normalerweise erstellen Sie eine Seite, die all diese Bytes in ein Array schreibt, indem Sie Response.Write() und die Einstellung des Inhaltstyps auf jpeg, bmp usw. je nach Bildtyp.

Answer 4

Ich lese gerade ein Bild aus einer JSON Antwort. Ich möchte diese kodierte Zeichenkette an das Bildsteuerelement auf Jquery Vorlage und laden Sie es dynamisch, Wie und was wäre der beste Ansatz, dies zu tun? Die Vorlage ist wie folgt:

<script id="ImageDiv" type="image/png">
    <div style="width:200px;height:150px;>
            <img src="${ImageView}" alt="" />
        </div>
</script>

Js-Datei lautet wie folgt:

var demo = new Object();

$.each(msg.images, function (key, value) 
            {
                if (this.IsImage)
                 {
                    demo["ImageView"]="data:image/png;base64,"+this.Image;
                    $('#ImageDiv').tmpl(demo).appendTo("#Demo-Image");

                 }
            });

JSON Die Antwort lautet wie folgt:

msg = {"Images":[ "Description": "Image1", "Image": "encoded string of image", "IsImage": true, "MimeType": "image/png", } ]

weniger Platz zum Kopieren der kodierten Zeichenfolge des Bildes.