如何在客户端存储动态图像
How to store dynamic image at client side
首先,如果我问的是之前问过的问题,我很抱歉,但事实上我什么都没得到
我的asp.net页面上有一些<Div>
。使用Javascript,我从Url中分配背景图像。下面是代码
divFloor.style.backgroundImage = "url(Images/FloorPlan/" + hdnFloorImgSplit[1] + ")";
hdnFloorImgSplit
是数组,包含图像的url。这是因为我正在使用Azure云服务
当客户端刷新页面或张贴回页面时,每次都会下载图像。我想要的是,我想把它存储在客户端浏览器上,并在那里使用它(如果存在的话)。这将节省服务器和客户端的带宽,并且速度将显著提高。
对不起,我找不到路。我有许多图像要存储并重试。正因为如此,我的网站变得越来越慢。感谢的任何帮助
Blade,他们有很多不同的方法。我给你看一个。带有本地存储Json数据库。您可以使用另一种方法,如具有XMLHttpRequest Level 2的Blob。有关它的更多信息,您可以查看此链接->在本地存储中保存图像和文件-javascript
存储图像(您需要首先使用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
<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'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);
}
- 可在多个相册文件夹中查找的动态图像库
- 如何在浏览器中呈现动态图像
- 动态图像加载是否会减少服务器过载
- 如何在客户端存储动态图像
- ASP中的动态图像.NET Web应用程序
- 创建一个动态图像上传PHP
- 在fancybox中显示动态图像
- jQuery 将多个动态图像集中在不同大小的容器中
- 动态图像放置帮助 - CSS / javascript / jquery.
- 使文本在动态图像中居中
- 具有排序问题的流体动态图像布局
- 在javascript之后从php加载的动态图像需要运行
- 获取动态图像宽度
- Javascript 将动态图像从 URL 绘制到画布元素上
- Jquery 在动态图像上不起作用的图像错误
- 开放海龙动态图像
- 如何在JQuery中从Gallery View中选择动态图像
- 缓存通过PHP/AAJX/JSON/jQuery加载的动态图像
- 打印包含动态图像的Div
- 如何通过jquery生成动态图像标签