2012-07-20 9 views
6

Ich habe erfolgreich zugelassen, dass ein Benutzer ein Bild in den lokalen Speicher hochladen kann, aber ich möchte dann dieses Bild aufnehmen und ein Bildelement auf der Seite ausfüllen damit.Laden eines Bildes in localStorage und Festlegen eines Bilds src an diesem Speicherort

<h3>Please upload the image you wish to use.</h3> 
<input id="photoin" type="file" accept="image/*;capture=camera"></input> 
<a href="#delete_1" data-role="button" onClick="save()">Submit</a> 

<script> 
    var i = 0; 
    function save(){     
     var input = document.getElementById("photoin").value; 
     var name = "photo_" + i; 
     localStorage.setItem(name, input);  
     $("#QR").src = window.localStorage[name]; 
     i++; 
    } 
</script> 

Ich bin auf der Suche nach etwas, das mir die URL des Bildes in Speicher erfolgreich geben, da „window.localStorage [name]“ gibt nur den Wert mit diesem Schlüssel gepaart.

Danke!

+0

Warum genau willst du das tun? Reicht der Browser-Cache nicht aus, um Ihre Bilder auf dem Host-Computer zu behalten? – devundef

+0

Ich möchte, dass der Benutzer den Inhalt einer Seite ändern kann (d. H. Ich möchte, dass der Benutzer sein Bild hochlädt, nicht mein, und dann erscheint dieses Bild auf der Seite) – NodeNodeNode

+0

Ich verstehe es! Sie können das Bild in base64 konvertieren und dann src = "data: image/png; <.. base64 image data ...>" einfügen. Sie müssen HTML5-Datei-API verwenden, um die Bilddatei zu lesen und dann die Daten in base64 zu konvertieren. Dieser Beitrag wird Ihnen bei der Konvertierung helfen: http://stackoverflow.com/questions/246801/how-can-you-encode-to-base64-using-javascript#246813 – devundef

Antwort

12

Nun können Sie speichern die eigentlichen Bilddaten in localstorage (wenn auch vorsichtig sein - es gibt eine Grenze)

Werfen Sie einen Blick auf the HTML5 rocks tutorial & nach unten scrollen, um die Bit-Leitung Lesen von Dateien

Hier wird die Datei gelesen wird, dann wird die Ausgabe in den Tag img: src geschrieben. Sie könnten es auch in localStorage setzen

Beispiel: http://jsfiddle.net/8V9w6/ - wählen Sie eine Bilddatei, siehe das Vorschaubild? Laden Sie dann die Seite neu. Das Thumbnail sollte dort bleiben. (Funktioniert am neuesten Chrome/Firefox)

+0

das ist genau das, was ich will! Ich werde es ausprobieren und Sie wissen lassen, wie es funktioniert! – NodeNodeNode

Verwandte Themen