How to pass images from server to function in JavaScript?

I'm trying to pass images to function in JS that extracts metadata. Said images are kept in folder on server(localhost for now). I got the function to work with file input from HTML but have no idea how to pull the pictures from the server and pass them to the function.

Any ideas are appreciated. There is no need for ultrasonic speeds.

What I have is:

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="exif.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"
            integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
</head>
<body>
Upload a local file to read Exif data.
<br/>
<input id="file-input" type="file"/>
<br/>
<script>
    document.getElementById("file-input").onchange = function (e) {
        EXIF.getData(e.target.files[0], function () {
            let lat = EXIF.getTag(this, 'GPSLatitude');
            let long = EXIF.getTag(this, 'GPSLongitude');
            let alt = EXIF.getTag(this, 'GPSAltitude');
            let toDecimalLat = lat[0].numerator + lat[1].numerator /
                    (60 * lat[1].denominator) + lat[2].numerator / (3600 * lat[2].denominator);
            let toDecimalLong = long[0].numerator + long[1].numerator /
                    (60 * long[1].denominator) + long[2].numerator / (3600 * long[2].denominator);
            let toDecimalAlt = alt.numerator / alt.denominator;
            console.log(toDecimalLat);
            console.log(toDecimalLong);
            console.log(toDecimalAlt);
            console.log(e.target.files[0]);
        });
    }
</script>
</body>
</html>

Did what was suggested by PamBlam but it works only every second time triggered (button clicked).

This is the code:

<body>
Upload a local file to read Exif data.
<br/>
<button id="target">Click</button>
<br/>
<script>
    $("#target").click(function () {
        console.log("button clicked");
        var myImage = new Image();
        myImage.src = 'pictures/pic.jpg';
        EXIF.getData(myImage, function () {
            let lat = EXIF.getTag(this, 'GPSLatitude');
            let long = EXIF.getTag(this, 'GPSLongitude');
            let alt = EXIF.getTag(this, 'GPSAltitude');
            let toDecimalLat = lat[0].numerator + lat[1].numerator /
                    (60 * lat[1].denominator) + lat[2].numerator / (3600 * lat[2].denominator);
            let toDecimalLong = long[0].numerator + long[1].numerator /
                    (60 * long[1].denominator) + long[2].numerator / (3600 * long[2].denominator);
            let toDecimalAlt = alt.numerator / alt.denominator;
            console.log(toDecimalLat);
            console.log(toDecimalLong);
            console.log(toDecimalAlt);
            console.log(this);
        });
    });
</script>
</body>

Solution

Wherever you have e.tartget.files[0], replace it with an Image. You make the image like this:

var myImage = new Image();
myImage.src = 'https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png';

So you would replace e.tartget.files[0] with myImage. Then obviously change the url to the file.. ie http://localhost/pics/image.jpg

If you're having problems with it working intermittently, you may have a race condition. Solve it by throwing your logic in the onload function...

var myImage = new Image();
myImage.src = 'https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png';
myImage.onload = function(){ 
    EXIF.getData(myImage, function (){
        // exif stuff here...
    }
};