jQuery display exif from image?

janmartin · #1 11-21-2009, 05:56 AM

Hi,

I need to automatically display the images exif data, but it only works after clicking the image.
Whats wrong?

(Not) working Example:
http://www.diystreetview.org/data/test/test.html
all files:
http://www.diystreetview.org/data/test/

Code:

<html>
<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.exif.js"></script>

<title>test.html</title>
</head>

<body>
<div id="imagediv">
<img src="images/00000036.jpg" width="900px" id="imgA" exif="true" />
</div>


<script>
// This cript should automatically display the exif info of the image. Without user interaction.
// However it only works when the image is clicked.
// 
// EXIF Code from http://www.nihilogic.dk/labs/exifjquery/

// FAILING:
document.getElementById('imagediv').innerHTML +="<br \/\>GPSLatitude: " + $("#imgA").exif("GPSLatitude");

// WORKS:
$("#imgA").click(
	function() {
document.getElementById('imagediv').innerHTML +="<br \/\>GPSLatitude: " + $("#imgA").exif("GPSLatitude");

	} // end function
) // end click

</script>
</body>
</html>

**Fang** · #2 11-21-2009, 09:44 AM

Wait for the document to load, even the exif script does this.

janmartin · #3 11-21-2009, 11:06 AM

How to change the code for waiting?

**Fang** · #4 11-21-2009, 01:49 PM

ready

janmartin · #5 11-21-2009, 03:19 PM

Hi Fang,

I gave it a try, and I cant get it working.
So it's probably me.

Please stop passing on ideas and show me how its done.

My last try:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="jquery-1.3.2.min.js"></script>
  <script src="jquery.exif.js"></script>
  
</head>
<body>
<div id="imagediv"></div>

<script>
document.getElementById('imagediv').innerHTML = "<img src=\"images/00000036.jpg\" width=\"400px\" id=\"imgA\" exif=\"true\" \/\>";

$(document).ready(function(){
document.getElementById('imagediv').innerHTML +=("GPSLatitude:" + $("#imgA").exif("GPSLatitude"));
});
 </script>

</body>
</html>

ssystems · #6 11-21-2009, 06:51 PM

You might want to view the image as a Hex. I might overlooked it but I don't saw any GeoData inside the image.

janmartin · #7 11-21-2009, 07:00 PM

Firefox Add-on Exif Viewer shows all the images EXIF data is in perfect order.

You can download it here:
https://addons.mozilla.org/en-US/fir...=exif%20viewer

janmartin · #8 11-23-2009, 05:19 AM

Anyone?

**Fang** · #9 11-23-2009, 05:54 AM

Code:

$('#imgA').load(function() {  
document.getElementById('imagediv').innerHTML +="<br \/\>GPSLatitude: " + $("#imgA").exif("GPSLatitude");
});

janmartin · #10 11-23-2009, 06:10 AM

I tried that before.

It works 1 out of 10 times. Or less.

Here is the new test page:
http://www.diystreetview.org/data/test/testA.html

All files:
http://www.diystreetview.org/data/test/

**Fang** · #11 11-23-2009, 06:50 AM

Seems to require a slight delay.

Code:

$('#imgA').load(function() {  
setTimeout(function(){return document.getElementById('imagediv').innerHTML +="<br \/\>GPSLatitude: " + $("#imgA").exif("GPSLatitude");}, 500);
});

janmartin · #12 11-23-2009, 06:59 AM

Thanks Fang,

you made my day.
It works.
I will inform the author of the exif library.
Maybe there is something he can update.

Jan

janmartin · #13 11-23-2009, 11:08 AM

To early to celebrate.

I need the value in a variable to deal with it later.
But this fails:

Code:

var gpslatitude;
$('#imgA').load(function() {  
setTimeout(function(){return gpslatitude=$("#imgA").exif("GPSLatitude");}, 500);
});
//Test:
document.getElementById('nav').innerHTML +=gpslatitude;

**Fang** · #14 11-23-2009, 11:36 AM

Same problem again; the innerHTML is executed before setTimeout has finished.
Save the value in gpslatitude and wait for user interaction or delay writing until setTimeout has finished.

janmartin · #15 11-23-2009, 11:47 AM

I changed a single line of the test:

Code:

setTimeout(function(){return document.getElementById('nav').innerHTML +=gpslatitude;}, 1000);

It works.

However what i really need is to get the data into a variable and out of the whole setTimeout thingy:
This code fails:

Code:

$('#imgA').load(function(){setTimeout(function(){return myGPSLatitude=$("#imgA").exif("ImageDescription");}, 1000);});
document.getElementById('nav').innerHTML += myGPSLatitude;

Any idea?

Also there must be a way around this whole two-times-waiting?
Is it an error in the jquery.exif.js i am using?

Thanks,
Jan

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)