Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Need help accessing a variable - returns undefined

Status
Not open for further replies.
CycloneChris

CycloneChris

Technical User
Feb 13, 2009
4
CA
Hey,

I am trying to access the width variable from my main page. Within the imageinfo.js script functions I can alert() the width value which returns 1024. But I can't seem to pass this variable to my main page or access it directly so that I can use document.write() to write the variable on the page. Whenever I try to call the 'width' variable directly from the main page I get undefined. How can I access this variable?

However, with the test code below, I was able to get ducument.write() to write the 'width' variable on the page but now the page doesn't stop loading - there's an endless loop in the code...

I think the problem is with this line but I'm not sure.
Code: 
BinaryAjax(url,function(http) {findEXIFinJPEG(http.binaryResponse);test(width)},null,useRange ? [0, Range] : null);

Test page
http://www.inspiredvisuals.com/test/test/test3.html

Main page
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>

<head>
<script>

function test(width)
{
document.write('Image Width = ' + width)
}
</script>

<script type="text/javascript" src="binaryajax.js"></script>
<script type="text/javascript" src="imageinfo.js"></script>

</head>

<body>
<script type="text/javascript">readFileData('image.jpg')</script>
</body>
</html>

Imageinfo script - This script uses the binaryajax script found here. http://www.inspiredvisuals.com/test/test/binaryajax.js

Code: 
/*
 * ImageInfo 0.1.2 - A JavaScript library for reading image metadata.
 * Copyright (c) 2008 Jacob Seidelin, [email]jseidelin@nihilogic.dk[/email], [url]http://blog.nihilogic.dk/[/url]
 * MIT License [[url]http://www.nihilogic.dk/licenses/mit-license.txt][/url]
 */

var useRange = true;
var Range = 632;
var iOffset = 2;
var width;
function readFileData(url)
{
	BinaryAjax(url,function(http) {findEXIFinJPEG(http.binaryResponse);test(width)},null,useRange ? [0, Range] : null);
}

function findEXIFinJPEG(oFile)
{
	while (iOffset < oFile.getLength())
	{	
		var iMarker = oFile.getByteAt(iOffset+1, true);
		if (iMarker == 225) {return readEXIFData(oFile)}
		else {iOffset += 2 + oFile.getShortAt(iOffset+2, true)}
	}
	
}

function readEXIFData(oFile) 
{	
	var oTags = readTags(oFile, (iOffset+18), (EXIF_TiffTags = {0x8769 : "ExifIFDPointer"}));
	var oEXIFTags = readTags(oFile, (iOffset+10 + oTags.ExifIFDPointer), (EXIF_Tags = {0xA002 : "PixelXDimension",0xA003 : "PixelYDimension"}));
	width=oEXIFTags["PixelXDimension"];
	
}

function readTags(oFile, iDirStart, oStrings) 
{
	var oTags = {};
	
	for (var i=0;i<oFile.getShortAt(iDirStart);i++)
	{
		var strTag = oStrings[oFile.getShortAt(iDirStart + i*12 + 2)];
		oTags[strTag] = oFile.getLongAt(iDirStart + i*12 + 10);
	}
	return oTags;
}

Thanks for the help.
 
Sort by date Sort by votes
Surely this is a massively over-complicated solution simply to find the dimensions of an image?

Why not create a new Image object, load the image into it, and query its 'width' and 'height' properties?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Dan thanks for your suggestion.

I think using the image object method will solve my problem but it's not working properly in firefox. If I don't use the timeout function in javascript then firefox gives me the wrong width of 99...

How can I use some sort of callback to check when the image dimensions are available and then access the width of the image object?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>

<body>

<div>
<img onload="alert('image loaded')" src="[URL unfurl="true"]http://www.inspiredvisuals.com/test/image.jpg"[/URL] id="myimage">
</div>

<script>
setTimeout("document.write(document.getElementById('myimage').width)", 380);
</script>

</body>
</html>

I have already tried the ‘onload’ event but the requires the entire image to load.

Thanks.
 
Upvote 0 Downvote
Hi

That is logically wrong.

There is no guarantee that with any delaying the [tt]document.write()[/tt] will execute after the image was loaded. Even worst, if the [tt]document.write()[/tt] is called after the [tt]document[/tt] is loaded, it will replace it.

You use an [tt]onload[/tt] event, so why not put the size checking/displaying/whatever there ?
Code: 
<img onload="alert('image loaded : '+this.width+' x '+this.height)" src="map.png" id="myimage">

Feherke.
 
Upvote 0 Downvote
I agree that is not the proper way to do it as download times very, and the time is takes to access the image properties may also very between different browsers. I was just trouble shooting, trying to see when the width/height properties of an image object become available (when image is fully loaded or partially).

How is this? I created a function that uses timeout() to continuously check if the width is available. When it is it alerts() the width value of the image and shows the time it took to get the data.

I tested it in various browsers and it seems to work fine.


Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
</head>

<body>
<img src="[URL unfurl="true"]http://www.inspiredvisuals.com/test/image.jpg"[/URL] id="myimage">

<script>

var count = 0,t1;

function getwidth()
{
	var x=document.getElementById('myimage').width;
	if (x > 0) {alert("Width = "+x+"px\nTime to access data = "+count+"ms");clearTimeout(t1)} else {count++;t1=setTimeout("getwidth()", 1)}
}
write()

</script>

</body>
</html>


In regards to my original post about having trouble accessing a variable - I figured out the issue. There is a bit of lag from the http request in the imageinfo script. I was trying to access this variable before the http request finished so the variable returns undefined. I had to implement a callback to get around this.
 
Upvote 0 Downvote
Hi

Maybe I have a fixation for the built-in functionality instead of reproducing it programmatically... Anyway, I will repeat my question :
Feherke said:
You use an onload event, so why not put the size checking/displaying/whatever there ?
Click to expand...

Feherke.
 
Upvote 0 Downvote
Becuase the onload event requires the image to download 100% which can be really slow depending on the file size of the image.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
305
coldbohemia
coldbohemia
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
750
Mike Lewis
Mike Lewis
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
506
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
340
malpa
malpa
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
237
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top