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

Zasadniczo muszę przesłać pojedynczy obraz, zapisać go w localStorage, a następnie wyświetlić na następnej stronie.

Obecnie mam załadowany plik HTML:

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

Który używa tej funkcji do wyświetlenia obrazu 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 natychmiast wyświetlany na stronie, aby użytkownik mógł go zobaczyć. Następnie proszeni są o wypełnienie pozostałej części formularza. Ta część działa idealnie.

Po wypełnieniu formularza naciskają przycisk „Zapisz”. Po naciśnięciu tego przycisku zapisuję wszystkie dane wejściowe formularza jako localStorageciągi. Potrzebuję sposobu na zapisanie obrazu jako localStorageelementu.

Przycisk Zapisz również przekieruje ich na nową stronę. Ta nowa strona wyświetli dane użytkowników w tabeli, z obrazem u góry.

Tak prosty i prosty, że localStoragepo naciśnięciu przycisku „Zapisz” muszę zapisać obraz , a następnie wypożyczyć go na następnej stronie localStorage.

Znalazłem rozwiązania, takie jak to skrzypce i ten artykuł na moz: // a HACKS .

Chociaż nadal jestem bardzo zdezorientowany, jak to działa, i naprawdę potrzebuję tylko prostego rozwiązania. Po prostu muszę znaleźć obraz za pomocą getElementByIDprzycisku „Zapisz”, a następnie przetworzyć i zapisać obraz.

Do każdego, kto również potrzebuje rozwiązania tego problemu:

Po pierwsze, pobieram obraz getElementByIDi zapisuję go jako Base64. Następnie zapisuję ciąg Base64 jako moją localStoragewartość.

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

Oto funkcja, która konwertuje obraz na ciąg Base64:

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 mojej następnej stronie utworzyłem obraz z pustym miejscem src:

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

I od razu po załadowaniu strony używam tych trzech kolejnych wierszy, aby pobrać ciąg Base64 z localStoragei zastosować go do obrazu z pustym, srcktóry utworzyłem:

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

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

Napisałem małą bibliotekę 2,2kb do zapisywania obrazu w localStorage JQueryImageCaching Usage:

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

Możesz serializować obraz do identyfikatora URI danych. W tym poście na blogu znajduje się samouczek . Spowoduje to utworzenie ciągu, który można przechowywać w pamięci lokalnej. Następnie na następnej stronie użyj adresu URI danych jako źródła obrazu.

„Zauważ, że najpierw musisz w pełni załadować obraz (w przeciwnym razie skończy się to na pustych obrazach), więc w niektórych przypadkach musisz opakować obsługę w: bannerImage.addEventListener (" load ", function () {}); - yuga 1 listopada 2017 o 13:04 "

To jest niezwykle WAŻNE. Jedną z opcji, które badam dziś po południu, jest użycie metod wywołania zwrotnego javascript zamiast addEventListeners, ponieważ to również nie wydaje się być poprawnie powiązane. Przygotowanie wszystkich elementów przed załadowaniem strony BEZ odświeżania strony jest krytyczne.

Jeśli ktokolwiek może to rozwinąć, zrób to - tak jak w, czy użyłeś settimeout, wait, callback lub metody addEventListener, aby uzyskać pożądany wynik. Który i dlaczego?

Wymyśliłem ten sam problem, zamiast przechowywać obrazy, które ostatecznie przepełniają lokalną pamięć, możesz po prostu zapisać ścieżkę do obrazu. coś jak:

let imagen = ev.target.getAttribute('src');
arrayImagenes.push(imagen);