Get data using image URL from AJAX call?

Question

I have the following AJAX call for getting images from a local directory :

var imagesArray = [];
$.ajax({
            url: "./images/",
            success: function(data){
            $(data).find("a:contains(.jpg)").each(function(){
            var images = $(this).attr("href");
            imagesArray.push(images);
            });
            for(var i=0;i<imagesArray.length;;i++)
            {
        var str = 'images/'+imagesArray[i];                 
         $('<li class="slide">').append($('<img />').attr('src',str )).appendTo('#slider');
                }
            }
            });

and my HTML code is:

<html>
<body>
<div id="imageList">
<ul id="slider"></ul>
</div>
</body>
`

here I am getting images from my local directory and storing the images in a list and displaying the same.
how to get exif data of each image.(here some link I saw which have drog & drop options : drag & drop image getting exif ),
used js is : exif.js

I'm pretty sure your browser will crash if you load binary data for multiple images. — Dustin Hoffner, Apr 17 '15 at 06:53
thanks @Dustin Hoffner , please can provide that code using of img tag or url get image meta data details . — kks, Apr 17 '15 at 09:02
image file -->rightClick-->properties -->Details-->Origin(Date taken) and camera(marker,model) and GPS(if possible) only — kks, Apr 17 '15 at 10:19
Hmm... I think this is nothing you should do on the client side. I would do this on serverside with nodejs or php, or whatever you want to use and send it via json to the client — Dustin Hoffner, Apr 17 '15 at 10:45

score 2 · Answer 1 · edited May 23 '17 at 12:14

It's entirely possible using the new "blob" support in AJAX requests. I download videos in excess of 2GB using this method, to then store to disk using Filesystem APIs.

Here's a code snippet, taken from this overflow StackOverflow thread.

Using jQuery's ajax method to retrieve images as a blob

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        //this.response is what you're looking for
        handler(this.response);
        console.log(this.response, typeof this.response);
        var img = document.getElementById('img');
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response);
        }
    }
xhr.open('GET', 'http://jsfiddle.net/img/logo.png');
xhr.responseType = 'blob';
xhr.send();

However, this might not be the best approach - that's a lot of data to be loading just to get EXIF.

You might want to consider a backend element to this project. You could easily/quickly extract EXIF data (without having to load the whole image) and cache the results. You could also automatically create thumbnails to make your pages load quicker too.

Get data using image URL from AJAX call?

1 Answers1