Wie speichere ich ein Bild in localStorage und zeige es auf der nächsten Seite an?

Question

Also im Grunde muss ich wie die Titelzustände tun; Laden Sie ein einzelnes Bild hoch, speichern Sie es in localStorage und zeigen Sie es dann auf der nächsten Seite an.

Derzeit habe ich meinen HTML-Datei-Upload:

<input type='file' id="uploadBannerImage" onchange="readURL(this);" /> 

, die diese Funktion verwendet, um auf der Seite das Bild anzuzeigen

function readURL(input) 
{ 
    document.getElementById("bannerImg").style.display = "block"; 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      document.getElementById('bannerImg').src = e.target.result; 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

Das Bild sofort auf der Seite für den Benutzer angezeigt wird sehen. Sie werden dann gebeten, den Rest des Formulars auszufüllen. Dieser Teil funktioniert perfekt.

Sobald das Formular vollständig ist, drücken sie einen 'Speichern' Knopf. Sobald diese Schaltfläche gedrückt wird, speichere ich alle Formulareingaben als localStorage Zeichenfolgen. Ich brauche eine Möglichkeit, das Bild auch als localStorage Artikel zu speichern.

Die Schaltfläche Speichern wird sie auch auf eine neue Seite leiten. Auf dieser neuen Seite werden die Benutzerdaten in einer Tabelle angezeigt, wobei das Bild oben angezeigt wird.

So einfach und einfach, ich muss das Bild in localStorage speichern, sobald die Schaltfläche "Speichern" gedrückt wird, und dann leihen Sie das Bild auf der nächsten Seite aus localStorage.

fand ich einige Lösungen wie diese Geige: http://jsfiddle.net/8V9w6/

Und dies: https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

Obwohl ich immer noch sehr verwirrt bin, wie das funktioniert, und ich brauche nur wirklich eine einfache Lösung. Im Grunde muss ich nur das Bild über getElementByID finden, sobald die Schaltfläche "Speichern" gedrückt wird, und dann das Bild verarbeiten und speichern.

Alle Hilfe wird sehr geschätzt. Vielen Dank!

Answer 1

Um wer braucht auch dieses Problem gelöst:

Erstens packe ich mein Bild mit getElementByID und das Bild als Base64 speichern. Dann speichere ich die Base64-Zeichenfolge als mein localStorage-Wert.

bannerImage = document.getElementById('bannerImg'); 
imgData = getBase64Image(bannerImage); 
localStorage.setItem("imgData", imgData); 

Hier ist die Funktion, die das Bild in einem Base64 Stachel konvertiert:

function getBase64Image(img) { 
    var canvas = document.createElement("canvas"); 
    canvas.width = img.width; 
    canvas.height = img.height; 

    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0); 

    var dataURL = canvas.toDataURL("image/png"); 

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
} 

Dann auf meiner nächsten Seite, die ich mit einem leeren src ein Bild erstellt, wie so:

<img src="" id="tableBanner" /> 

Und gerade, wenn die Seite geladen wird, verwende ich diese nächsten drei Zeilen, um die Base64-Zeichenfolge aus dem lokalen Speicher abzurufen und auf das Image mit der leeren Quelle anzuwenden, die ich erstellt habe:

var dataImage = localStorage.getItem('imgData'); 
bannerImg = document.getElementById('tableBanner'); 
bannerImg.src = "data:image/png;base64," + dataImage; 

Getestet in etlichen verschiedenen Browsern und Versionen und es scheint recht gut zu funktionieren.

Answer 2

Sie könnten das Bild in einen Daten-URI serialisieren. Es gibt ein Tutorial in diesem blog post. Dadurch wird eine Zeichenfolge erzeugt, die Sie im lokalen Speicher speichern können. Verwenden Sie dann auf der nächsten Seite die Daten uri als Quelle des Bildes.

Answer 3

ich ein wenig 2,2kb Bibliothek des Sparens Bild in localstorage JQueryImageCaching Verwendung schrieb:

<img data-src="path/to/image"> 
<script> 
    $('img').imageCaching(); 
</script>