Jak zapisać obraz w pamięci lokalnej i wyświetlić go na następnej stronie?

Question

Tak więc, w zasadzie, muszę robić tak, jak wskazuje tytuł; Załaduj pojedynczy obraz, zapisz go na localStorage, a następnie wyświetl go na następnej stronie.

Obecnie mam pliku HTML Dodano:

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

który korzysta z tej funkcji, aby wyświetlić obraz na stronie

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

obraz jest wyświetlany od razu na stronie przez użytkownika w celu widzieć. Następnie prosi się o wypełnienie pozostałej części formularza. Ta część działa idealnie.

Po wypełnieniu formularza, naciśnij przycisk "Zapisz". Po naciśnięciu tego przycisku zapisuję wszystkie wejścia formularzy jako ciągi znaków localStorage. Potrzebuję sposobu, aby zapisać obrazek jako element localStorage.

Przycisk Zapisz spowoduje również skierowanie ich na nową stronę. Ta nowa strona wyświetli dane użytkowników w tabeli, a obraz będzie na górze.

Po przejściu do przycisku "Zapisz" należy zapisać i zapisać go na następnej stronie: localStorage.

znalazłem kilka rozwiązań, takich jak ta ryba: http://jsfiddle.net/8V9w6/

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

Choć nadal jestem bardzo mylić, jak to działa, a ja tylko naprawdę potrzebują prostego rozwiązania. Zasadniczo, po prostu trzeba znaleźć obraz poprzez getElementByID po naciśnięciu przycisku "Zapisz", a następnie przetwarzania i zapisywania obrazu.

Cała pomoc jest bardzo doceniana. Dzięki!

Answer 1

Aby kto potrzebuje również ten problem rozwiązany:

Po pierwsze, łapię mój obraz z getElementByID i zapisać obraz jako base64. Następnie zapisuję ciąg Base64 jako wartość localStorage.

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

Oto funkcja, która przetwarza obraz do Base64 Sting:

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

Następnie na kolejnej stronie stworzyłem obraz z pustego src tak:

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

I kiedy strona się ładuje, używam następnych trzech linii, by pobrać ciąg base64 z localstorage i zastosować go do obrazu z pustym src I:

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

Testowałem to w kilku różnych przeglądarkach i wersjach i wydaje się, że działa całkiem dobrze.

Answer 2

Można przekształcić obraz do postaci Data URI. Jest tutorial w tym blog post. To wytworzy ciąg, który możesz przechowywać w lokalnej pamięci. Następnie na następnej stronie użyj danych uri jako źródła obrazu.

Answer 3

pisałem trochę 2,2kb bibliotekę zapisywanie obrazu w localStorage JQueryImageCaching Zastosowanie:

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