Rufen Sie ein image vom server, speichern Sie es in "localStorage", und zeigen Sie es

Dies sollte einfach genug sein, aber nach dem Ringkampf mit ihm für Stunden, ich kann es immer noch nicht, dass es funktioniert. Bisher sind alle meine versuche haben dazu geführt, das Bild zu 'beschädigt oder abgeschnitten wird', laut firefox.

Um das Bild vom server mit der jquery-ajax-call:

 $.ajax({
                async: false,
                url: db[key]["DocumentLink"],
                success: function (result2) {

Base64-codieren Sie das Bild und speichern Sie es in localStore:

In diesem Beispiel verwende ich das jquery base64-encoding plugin, aber ich habe versucht mehrere.

                        var dbKey = "Doc " + db[key]["ID"] + " " + db[key]["Title"];
                        console.log("storing: " + db[key]["DocumentLink"] + " in " + dbKey + "\n");
                        localStorage.removeItem(dbKey);
                        var base64Image = $.base64Encode(result2);
                        console.log(base64Image.length);
                        localStorage.setItem(dbKey, base64Image);
                       console.log("is stored: " + db[key]["DocumentLink"] + " in " + dbKey + "\n");
                }
})

Display das Bild mit einem data-url:

function openImageFromDB(dbKey) {
    console.log("Trying to display image with key " + dbKey);
    var base64Img = localStorage.getItem(dbKey);
    document.getElementById("documentHolder").src='data:image/jpeg;base64,' + base64Img;
}

Die entsprechenden img:

 <img id="documentHolder" alt="Image view placeholder" src="" />

Aber auf jeden versuchen, firefox zeigt:

Image corrupt or truncated: data:image/jpeg;base64,77+977+977+977+9a<... much longer string>

Die Url: Punkte, um eine gültige jpeg-Bild, und die base64Image.die Länge und die Fehlermeldung zeigen, dass die var /localStorage tatsächlich enthalten, was zu sein scheint base64-codierten Daten.

Irgendwelche Ideen?

InformationsquelleAutor TinkerTank | 2011-03-19
  1. 9

    Javascript (AJAX call)

    function LoadImg(filename) {
    var xmlhttp;
    if (window.XMLHttpRequest) { //code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { //code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {     
            document.getElementById("documentHolder").src = "data:image/png;base64," + xmlhttp.responseText;
        }
    };    
    xmlhttp.open("GET", 'load.php?LoadImg='+filename );
    xmlhttp.send(null);
}

    PHP - ( load.php )

    <?php
 if (isset($_GET['LoadImg'])) {
  header("Content-Type: image/png");
  $file = file_get_contents($_GET['LoadImg']);
  echo base64_encode($file);
}
?>

    Lesen, das könnte Ihnen helfen:

    PS: vielleicht Ihre Base64 ist falsch?

    • Danke für deine schlüssige Antwort. Bitte beachten Sie, dass auf diese Weise, das Bild ist immer noch konvertiert die base64-auf der server-Seite. Ich würde gerne konvertieren Sie es auf der client-Seite, aber ich fange an zu glauben, dass das Bild bekommen könnte entstellt in den Prozess der AJAX-Aufruf irgendwie.<br> p.s. - Ich bin mit asp.net aber sollte ich definitiv in der Lage sein, um herauszufinden, eine Möglichkeit zum codieren base64-Bilder-server-Seite. Ich würde nur gerne weniger abhängig von der server-Seite code.
    • Sie sollte definitiv weniger abhängig von der client-Seite, als der server-Seite. jeder Prozess maked auf server-Seite ist schneller, und sichern Sie dann die client-Seite. 😉
    InformationsquelleAutor Luca Filosofi
  2. 6

    Browser haben Größenbeschränkungen für andere als die localStorage-limit von 5 MB. Die Daten für die <img src="data:image/jpeg;base64,..."> ist auch begrenzt und wird in der Regel viel weniger als 5MB. Der einfachste Weg, um dieses ist es, einfach die Datei-Namen per localStorage-und lassen Sie das Browser-caching die Arbeit machen.

    InformationsquelleAutor bartonlp
  3. 2

    Stellt sich heraus, AJAX kann nicht zuverlässig verwendet werden, um die übertragung von binären Daten. Die Lösung ist die Ausführung des Base64-encoding server-Seite, und übertragen Sie die resultierende Zeichenfolge durch AJAX.

    Den obigen php-code funktioniert. Wer auf der Suche für ein ASP.Net /C# - Lösung:

        public string Image(string relpath)
    {
        Response.ContentType = "image/jpeg";

        string base64;
        string filename = Request.PhysicalApplicationPath + relpath;
        try
        {
            using (var fs = new FileStream(filename, FileMode.Open, FileAccess.Read))
            {
                var buffer = new byte[fs.Length];
                fs.Read(buffer, 0, (int)fs.Length);
                base64 = Convert.ToBase64String(buffer);
            }
        }
        catch (IOException e)
        {
            return filename + " /" + e.Message;
        }
        return base64;
    }

    Bitte beachten Sie, dass dieser code ist NICHT SICHER zu setzen, die direkt auf die äußere Welt.
    Ich persönlich benutze eine wrapper-Funktion, die analysiert den Pfad aus einer db.

    InformationsquelleAutor TinkerTank
  4. 0

    Können Sie Daten abrufen, die uri (die enthalten die base-64-Codierung), die über JavaScript mit dem HTML5 canvas-element. 

            //I'm assuming here you've put the image in an <img> tag on the page already.
        //If not, you'll need to adapt this a bit, or perhaps this approach is just
        //not right for your situation.
        var image = document.getElementById('id-of-image-you-want');

        var canvas = w.document.createElement("canvas"); 
        canvas.width = image.width;
        canvas.height = image.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0);
        try {
            var dataUri = canvas.toDataURL();    
        } catch (e) {
            console.log("D'oh!"); //Improve this error handling, obviously.
        }

    dataUri enthält nun die Daten-uri für das Bild enthalten wird, zusammen mit einem kurzen Präfix, die base-64-Codierung des Bildes.

    Werden Sie sicher, dass Sie die Erkennung für die canvas-Unterstützung. IE 8 und älter nicht unterstützt.

    InformationsquelleAutor Trott
Schreibe einen Kommentar