获取缓存图像的完整文件路径 [英] Get complete filepath for cached images

问题描述

我已经想出了如何预加载图像。我现在想要找到的是，是否有任何方法，使用Javascript，获取图像已被缓存的本地文件路径。

I have figured out how to preload images. What I am trying to find out now is whether there is any way, using Javascript, to get the local filepath where an image has been cached.

推荐答案

你可以使用FileReader和sessionStorage的组合。

类似于：

You can use a combination of FileReader and sessionStorage.
Something like:

var input = document.querySelector("#imageInput");
input.addEventListener("change", function(e){
    var reader = new FileReader();
    reader.onload = function(evt){
        var newImage = document.createElement("img");
        newImage.src = evt.target.result;
        document.querySelector("body").appendChild(newImage);
        sessionStorage.setItem("image", evt.target.result);
    };
    reader.readAsDataURL(e.target.files[0]);
}, false);

window.addEventListener("load", function(e){
    if(sessionStorage.getItem("image")){
        var newImage = document.createElement("img");
        newImage.src = sessionStorage.getItem("image");
        document.querySelector("body").appendChild(newImage);
    }
}, false);

这会将您的所有图像存储在浏览器中并让它们通过帖子和重新加载来保留。然后，您可以根据需要添加任何逻辑来编辑它们。

That would store all of your images on the browser and have them persist through posts and reloads. Then you can add any logic to edit them as you need.

不幸的是，你不能设置file类型的输入，所以你需要做一些UI魔术。

Unfortunately, you can't set inputs of type "file" so you'll need to do some UI magic.

这篇关于获取缓存图像的完整文件路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！