Làm cách nào để lưu hình ảnh vào localStorage và hiển thị nó trên trang tiếp theo?

Vì vậy, về cơ bản, tôi cần tải lên một hình ảnh duy nhất, lưu nó vào localStorage, sau đó hiển thị nó trên trang tiếp theo.

Hiện tại, tôi có tệp tải lên HTML của mình:

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

Sử dụng chức năng này để hiển thị hình ảnh trên trang

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

Hình ảnh được hiển thị ngay lập tức trên trang để người dùng nhìn thấy. Sau đó, họ được yêu cầu điền vào phần còn lại của mẫu đơn. Phần này đang hoạt động hoàn hảo.

Khi biểu mẫu hoàn tất, họ sẽ nhấn nút 'Lưu'. Khi nhấn nút này, tôi lưu tất cả các đầu vào mẫu dưới dạng localStoragechuỗi. Tôi cần một cách để lưu hình ảnh như một localStoragemục.

Nút lưu cũng sẽ hướng họ đến một trang mới. Trang mới này sẽ hiển thị dữ liệu người dùng trong một bảng, với hình ảnh ở trên cùng.

Rất đơn giản và đơn giản, tôi cần lưu hình ảnh localStoragesau khi nhấn nút 'Lưu' và sau đó mượn hình ảnh trên trang tiếp theo localStorage.

Tôi đã tìm thấy một số giải pháp như fiddle này và bài viết này tại moz: // a HACKS .

Mặc dù tôi vẫn vô cùng bối rối về cách thức hoạt động của nó, và tôi chỉ thực sự cần một giải pháp đơn giản. Về cơ bản, tôi chỉ cần tìm hình ảnh qua getElementByIDmột lần nhấn nút 'Lưu', sau đó xử lý và lưu hình ảnh.

Cho bất cứ ai cũng cần giải quyết vấn đề này:

Đầu tiên, tôi lấy hình ảnh của mình getElementByIDvà lưu hình ảnh dưới dạng Base64. Sau đó, tôi lưu chuỗi Base64 làm localStoragegiá trị của tôi .

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

Đây là chức năng chuyển đổi hình ảnh thành chuỗi 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,/, "");
}

Sau đó, trên trang tiếp theo của tôi, tôi đã tạo một hình ảnh với một khoảng trống srcnhư vậy:

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

Và ngay khi trang tải, tôi sử dụng ba dòng tiếp theo để lấy chuỗi Base64 từ đó localStoragevà áp dụng nó cho hình ảnh với khoảng trống srctôi đã tạo:

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

Đã thử nghiệm nó trong khá nhiều trình duyệt và phiên bản khác nhau, và nó dường như hoạt động khá tốt.

Tôi đã viết một thư viện lưu trữ hình ảnh 2,2kb nhỏ trong localStorage JQueryImageCaching Cách sử dụng:

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

Bạn có thể tuần tự hóa hình ảnh thành URI dữ liệu. Có một hướng dẫn trong bài viết trên blog này . Điều đó sẽ tạo ra một chuỗi bạn có thể lưu trữ trong bộ nhớ cục bộ. Sau đó trên trang tiếp theo, sử dụng dữ liệu uri làm nguồn của hình ảnh.

"Lưu ý rằng trước tiên bạn cần phải có hình ảnh được tải đầy đủ (nếu không kết thúc bằng việc có hình ảnh trống), vì vậy trong một số trường hợp, bạn cần phải xử lý thành: bannerImage.addEventListener (" load ", function () {}); - yuga ngày 1 tháng 11 năm 17 lúc 13:04 "

Điều này là vô cùng QUAN TRỌNG. Một trong những tùy chọn tôi đang khám phá chiều nay là sử dụng các phương thức gọi lại javascript thay vì addEventListener vì điều đó dường như cũng không liên kết chính xác. Chuẩn bị tất cả các yếu tố trước khi tải trang mà KHÔNG làm mới trang là rất quan trọng.

Nếu bất cứ ai cũng có thể mở rộng theo cách này, vui lòng thực hiện - như trong, bạn đã sử dụng phương thức thanh toán, chờ đợi, gọi lại hoặc phương thức addEventListener để có kết quả mong muốn. Cái nào và tại sao?

Tôi đã đưa ra một vấn đề tương tự, thay vì lưu trữ hình ảnh, cuối cùng lại tràn bộ nhớ cục bộ, bạn chỉ có thể lưu trữ đường dẫn đến hình ảnh. cái gì đó như:

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