Javascript 如何在客户端存储动态图像

首先，如果我问的是之前问过的问题，我很抱歉，但事实上我什么都没有得到
我的asp.net页面上有一些

。我使用Javascript从Url分配背景图像。下面是代码

hdnFloorImgSplit

is数组包含图像的url。这是因为我正在使用Azure云服务
当客户端刷新页面或回发页面时，每次都会下载图像。 我想要的是，我想把它存储在客户端浏览器上，如果存在的话，从那里使用它。这将节省服务器和客户端的带宽，并且速度将显著提高

对不起，我找不到路。我有许多图像要存储和重试。正因为如此，我的网站变得越来越慢。

---

任何需要帮助的人，他们都有很多不同的方法。我给你看一个。使用localstorage Json db。 您可以在XMLHttpRequest级别2中使用另一种方法，如Blob。 有关它的更多信息，您可以查看此链接 ->

存储图像（您首先需要使用localStorage.SetItem将所有图片存储在图像中…） 这里的想法是能够获取已加载到当前网页中的图像，并将其存储到localStorage中。如上所述，localStorage只支持字符串，因此我们需要在这里将图像转换为数据URL。对图像执行此操作的一种方法是加载到画布元素中。然后，使用画布，可以将画布中的当前视觉表示作为数据URL读取

让我们看看这个例子，文档中有一个id为“大象”的图像：

    // 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

一头巨大的大象，也非常接近！

JAVASCRIPT

//带有映像的本地存储
var storageFiles=JSON.parse（localStorage.getItem（“storageFiles”））|{}，
大象=document.getElementById（“大象”），
storageFilesDate=storageFiles.date，
日期=新日期（），
todaysDate=（date.getMonth（）+1.toString（）+date.getDate（）.toString（）；
//比较日期并创建本地存储（如果不存在/太旧）
如果（StorageFileDate的类型==“未定义”| | StorageFileDate

这很好，但是LocalStorage有大小限制，从iOS 5.1开始，Safari Mobile将LocalStorage数据存储在缓存文件夹中，在操作系统的要求下（通常是在空间不足的情况下），缓存文件夹会偶尔进行清理。Safari Mobile的私有浏览模式还可以防止完全写入本地存储。因此，基本上本地存储在跨浏览器时的处理方式完全不同，我建议使用indexdb并将其存储为博客。

    // 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); 

<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>

// 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's 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);
}