Yani temelde, başlık devletler gibi yapmak için; tek bir resim Yükleme, localStorage kaydedin, bir sonraki sayfada görüntülemek istiyorum.

Şu anda, HTML dosya upload benim var:

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

Bu işlev sayfasında görüntüyü görüntülemek için kullanır

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]);
    }
}

Görüntü anında kullanıcı görmek için sayfada görüntülenir. Sonra formun tamamını doldurmanız istenir. Bu kısmı mükemmel çalışıyor.

Form tamamlandıktan sonra, onlar da bir '' düğmesine basın. Kaydet tuşuna basın Bu düğmeye basıldığında, ben localStorage dizeleri olarak giriş formu kaydedin. Bir taraftan da localStorage bir öğe olarak kaydetmek istiyorum.

Kaydet düğmesine de yeni bir sayfaya yönlendirecektir. Bu yeni imaj sayfa üstünde bir tabloda kullanıcı verileri görüntüler.

Bu kadar düz ve basit localStorage görüntüyü bir kez Kaydet 'düğmesine basıldığında, ve sonra localStorage. Bir sonraki sayfadaki görüntü kredi Kurtarmak' ihtiyacım var

Bu keman gibi bazı çözümler buldum: http://jsfiddle.net/8V9w6/

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

Hala bu eserler hakkında son derece şaşkın olmama rağmen, ben sadece gerçekten basit bir çözüm lazım. Temelde, ben sadece getElementByID ile görüntü 'düğmesine basıldığında, ve sonra ve görüntüyü işlemek kaydedin. kaydettikten sonra bulmalıyız

Tüm yardım büyük beğeni topluyor. Teşekkürler!

Ayrıca bu sorun, ihtiyacı kim çözmüş:

Öncelikle, getElementByID ile görüntü alıp bir Base64 olarak kaydetmek. O zaman ben localStorage benim DEĞER gibi Base64 dize kaydedin.

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

Burada Base64 sting: görüntü dönüştüren fonksiyon

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,/, "");
}

Sonra, bir sonraki sayfada şu şekilde: boş bir src ile bir resim oluşturdum

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

Direk sayfa yüklendiğinde, bu önümüzdeki üç satır localstorage gelen base64 dize almak ve boş src yarattım ile görüntüye uygulamak için cann:

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

Pek çok farklı tarayıcıları ve sürümlerinde test edilmiş ve oldukça iyi iş gibi görünüyor.