Как хранить динамическое изображение на стороне клиента

Blade, у них есть много разных методов для этого. Я покажу вам один. С localstorage Json db. Вы можете использовать другой метод, такой как Blob с XMLHttpRequest Level 2. Для получения дополнительной информации об этом вы можете проверить эту ссылку → Сохранение изображений и файлов в localStorage - javascript

Хранение изображений (сначала нужно сохранить все ваши фотографии с помощью localStorage.SetItem....)

Идея здесь заключается в том, чтобы иметь возможность загрузить изображение, загруженное на текущую веб-страницу, и сохранить его в localStorage. Как мы установили выше, localStorage поддерживает только строки, поэтому мы должны сделать это, превратив изображение в URL-адрес данных. Один из способов сделать это для изображения - загрузить в элемент холста. Затем с холстом вы можете прочитать текущее визуальное представление в холсте в виде URL-адреса данных.

Давайте посмотрим на этот пример, где у нас есть изображение в документе с идентификатором "слон":

    // Get a reference to the image element
    var elephant = document.getElementById("elephant");

    // Take action when the image has loaded
    elephant.addEventListener("load", function () {
    var imgCanvas = document.createElement("canvas"),
    imgContext = imgCanvas.getContext("2d");

    // Make sure canvas is as big as the picture
    imgCanvas.width = elephant.width;
    imgCanvas.height = elephant.height;

    // Draw image into canvas element
    imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height);

    // Get canvas contents as a data URL
    var imgAsDataURL = imgCanvas.toDataURL("image/png");

    // Save image into localStorage
    try {
        localStorage.setItem("elephant", imgAsDataURL);
    }
    catch (e) {
        console.log("Storage failed: " + e);
    }
}, false); 

Затем, если мы хотим принять его дальше, мы можем использовать объект JavaScript и выполнить проверку даты с помощью localStorage. В этом примере мы загружаем изображение с сервера через JavaScript в первый раз, но после каждой загрузки страницы мы вместо этого считываем сохраненное изображение из localStorage:

HTML

<figure>
    <img id="elephant" src="about:blank" alt="A close up of an elephant">
    <noscript>
        <img src="elephant.png" alt="A close up of an elephant">
    </noscript>    
    <figcaption>A mighty big elephant, and mighty close too!</figcaption>
</figure>

JAVASCRIPT

// localStorage with image
var storageFiles = JSON.parse(localStorage.getItem("storageFiles")) || {},
    elephant = document.getElementById("elephant"),
    storageFilesDate = storageFiles.date,
    date = new Date(),
    todaysDate = (date.getMonth() + 1).toString() + date.getDate().toString();

// Compare date and create localStorage if it not existing/too old   
if (typeof storageFilesDate === "undefined" || storageFilesDate < todaysDate) {
    // Take action when the image has loaded
    elephant.addEventListener("load", function () {
        var imgCanvas = document.createElement("canvas"),
            imgContext = imgCanvas.getContext("2d");

        // Make sure canvas is as big as the picture
        imgCanvas.width = elephant.width;
        imgCanvas.height = elephant.height;

        // Draw image into canvas element
        imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height);

        // Save image as a data URL
        storageFiles.elephant = imgCanvas.toDataURL("image/png");

        // Set date for localStorage
        storageFiles.date = todaysDate;

        // Save as JSON in localStorage
        try {
            localStorage.setItem("storageFiles", JSON.stringify(storageFiles));
        }
        catch (e) {
            console.log("Storage failed: " + e);
        }
    }, false);

    // Set initial image src    
    elephant.setAttribute("src", "elephant.png");
}
else {
    // Use image from localStorage
    elephant.setAttribute("src", storageFiles.elephant);
}