Get Complete Filepath For Cached Images

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.

Solution 1:

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.

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