Forum Moderators: open
I have spent countless hours trying to access the 'width' variable from my main page. Within the actual 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().
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 - theres an endless loop in the code...
Whenever I try to call the 'width' variable directly from the main page I get 'undefined'. How can I access this variable?
BinaryAjax(url,function(http) {findEXIFinJPEG(http.binaryResponse);test(width)},null,useRange ? [0, Range] : null);Page code
[code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>[/code]
imageinfo.js code
/*
* ImageInfo 0.1.2 - A JavaScript library for reading image metadata.
* Copyright (c) 2008 Jacob Seidelin, * MIT License [http://www.nihilogic.dk/licenses/mit-license.txt]
*/
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;
}
/*
* Binary Ajax 0.1.5
* Copyright (c) 2008 Jacob Seidelin * MIT License [http://www.opensource.org/licenses/mit-license.php]
*/
var BinaryFile = function(strData, iDataOffset, iDataLength) {
var data = strData;
var dataOffset = iDataOffset ¦¦ 0;
var dataLength = 0;
this.getRawData = function() {
return data;
}
if (typeof strData == "string") {
dataLength = iDataLength ¦¦ data.length;
this.getByteAt = function(iOffset) {
return data.charCodeAt(iOffset + dataOffset) & 0xFF;
}
} else if (typeof strData == "unknown") {
dataLength = iDataLength ¦¦ IEBinary_getLength(data);
this.getByteAt = function(iOffset) {
return IEBinary_getByteAt(data, iOffset + dataOffset);
}
}
this.getLength = function() {
return dataLength;
}
this.getSByteAt = function(iOffset) {
var iByte = this.getByteAt(iOffset);
if (iByte > 127)
return iByte - 256;
else
return iByte;
}
this.getShortAt = function(iOffset, bBigEndian) {
var iShort = bBigEndian ?
(this.getByteAt(iOffset) << 8) + this.getByteAt(iOffset + 1)
: (this.getByteAt(iOffset + 1) << 8) + this.getByteAt(iOffset)
if (iShort < 0) iShort += 65536;
return iShort;
}
this.getSShortAt = function(iOffset, bBigEndian) {
var iUShort = this.getShortAt(iOffset, bBigEndian);
if (iUShort > 32767)
return iUShort - 65536;
else
return iUShort;
}
this.getLongAt = function(iOffset, bBigEndian) {
var iByte1 = this.getByteAt(iOffset),
iByte2 = this.getByteAt(iOffset + 1),
iByte3 = this.getByteAt(iOffset + 2),
iByte4 = this.getByteAt(iOffset + 3);
var iLong = bBigEndian ?
(((((iByte1 << 8) + iByte2) << 8) + iByte3) << 8) + iByte4
: (((((iByte4 << 8) + iByte3) << 8) + iByte2) << 8) + iByte1;
if (iLong < 0) iLong += 4294967296;
return iLong;
}
this.getSLongAt = function(iOffset, bBigEndian) {
var iULong = this.getLongAt(iOffset, bBigEndian);
if (iULong > 2147483647)
return iULong - 4294967296;
else
return iULong;
}
this.getStringAt = function(iOffset, iLength) {
var aStr = [];
for (var i=iOffset,j=0;i<iOffset+iLength;i++,j++) {
aStr[j] = String.fromCharCode(this.getByteAt(i));
}
return aStr.join("");
}
this.getCharAt = function(iOffset) {
return String.fromCharCode(this.getByteAt(iOffset));
}
this.toBase64 = function() {
return window.btoa(data);
}
this.fromBase64 = function(strBase64) {
data = window.atob(strBase64);
}
}
var BinaryAjax = (function() {
function createRequest() {
var oHTTP = null;
if (window.XMLHttpRequest) {
oHTTP = new XMLHttpRequest();
} else if (window.ActiveXObject) {
oHTTP = new ActiveXObject("Microsoft.XMLHTTP");
}
return oHTTP;
}
function getHead(strURL, fncCallback, fncError) {
var oHTTP = createRequest();
if (oHTTP) {
if (fncCallback) {
if (typeof(oHTTP.onload) != "undefined") {
oHTTP.onload = function() {
if (oHTTP.status == "200") {
fncCallback(this);
} else {
if (fncError) fncError();
}
oHTTP = null;
};
} else {
oHTTP.onreadystatechange = function() {
if (oHTTP.readyState == 4) {
if (oHTTP.status == "200") {
fncCallback(this);
} else {
if (fncError) fncError();
}
oHTTP = null;
}
};
}
}
oHTTP.open("HEAD", strURL, true);
oHTTP.send(null);
} else {
if (fncError) fncError();
}
}
function sendRequest(strURL, fncCallback, fncError, aRange, bAcceptRanges, iFileSize) {
var oHTTP = createRequest();
if (oHTTP) {
var iDataOffset = 0;
if (aRange && !bAcceptRanges) {
iDataOffset = aRange[0];
}
var iDataLen = 0;
if (aRange) {
iDataLen = aRange[1]-aRange[0]+1;
}
if (fncCallback) {
if (typeof(oHTTP.onload) != "undefined") {
oHTTP.onload = function() {
if (oHTTP.status == "200" ¦¦ oHTTP.status == "206") {
this.binaryResponse = new BinaryFile(this.responseText, iDataOffset, iDataLen);
this.fileSize = iFileSize ¦¦ this.getResponseHeader("Content-Length");
fncCallback(this);
} else {
if (fncError) fncError();
}
oHTTP = null;
};
} else {
oHTTP.onreadystatechange = function() {
if (oHTTP.readyState == 4) {
if (oHTTP.status == "200" ¦¦ oHTTP.status == "206") {
this.binaryResponse = new BinaryFile(oHTTP.responseBody, iDataOffset, iDataLen);
this.fileSize = iFileSize ¦¦ this.getResponseHeader("Content-Length");
fncCallback(this);
} else {
if (fncError) fncError();
}
oHTTP = null;
}
};
}
}
oHTTP.open("GET", strURL, true);
if (oHTTP.overrideMimeType) oHTTP.overrideMimeType('text/plain; charset=x-user-defined');
if (aRange && bAcceptRanges) {
oHTTP.setRequestHeader("Range", "bytes=" + aRange[0] + "-" + aRange[1]);
}
oHTTP.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 1970 00:00:00 GMT");
oHTTP.send(null);
} else {
if (fncError) fncError();
}
}
return function(strURL, fncCallback, fncError, aRange) {
if (aRange) {
getHead(
strURL,
function(oHTTP) {
var iLength = parseInt(oHTTP.getResponseHeader("Content-Length"),10);
var strAcceptRanges = oHTTP.getResponseHeader("Accept-Ranges");
var iStart, iEnd;
iStart = aRange[0];
if (aRange[0] < 0)
iStart += iLength;
iEnd = iStart + aRange[1] - 1;
sendRequest(strURL, fncCallback, fncError, [iStart, iEnd], (strAcceptRanges == "bytes"), iLength);
}
);
} else {
sendRequest(strURL, fncCallback, fncError);
}
}
}());
document.write(
"<script type='text/vbscript'>\r\n"
+ "Function IEBinary_getByteAt(strBinary, iOffset)\r\n"
+ "IEBinary_getByteAt = AscB(MidB(strBinary,iOffset+1,1))\r\n"
+ "End Function\r\n"
+ "Function IEBinary_getLength(strBinary)\r\n"
+ "IEBinary_getLength = LenB(strBinary)\r\n"
+ "End Function\r\n"
+ "</script>\r\n"
);
My page contains 3 files, test.html and imageinfo.js which accesses binary data from the binaryajax.js script.
I think the problem lies within the binaryajax script? I think its using a callback or something but I did not write the code so I'm not sure how exactly it works.
"my guess is that you're trying to call document.write() AFTER the page has finished loading, which you can't do."
I agree with that. That's the only way I was able to get document.write() to work. :(
Thanks for checking.
Kaled.
As it turns out the reason the 'width' variable returns undefined is because of the http request in the imageinfo script. Since I am trying to access the width variable before the http request function has finished I get undefined.
Someone suggested I use a callback to check when the http request has finished but I have no clue how to do that. Using the timeout() function allowed me to access the variable like I want but I still get that infinite document.write() loop.
I don't know how to use document.write() without getting that endless loop. If I just use document.write('test') in the body of my page it works fine and there's no endless loop. But if I do something like this with the timeout() then the page never stops loading. I think I know why this is happening (the timeout function gets executed after the page has loaded) but I don't know how to prevent this and still have access to the width variable.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<script type="text/javascript">
setTimeout("document.write('test')",200);
</script>
</body>
</html>
So what I want to do now is make a callback that checks when the imageinfo functions have finished and figure out how to use document.write() to write html(which will include the 'width' value) on my page.
Thanks for the advice. I hope my wasn't confusing. ;)
1) Create the table with an initial guess as to the width of the image and then adjust the table width using <body onload> and document.getElementById("my_img_linked_table") etc.
2) Ditch javascript altogether.
If you set the width of the table to a small value, then place the image within the table (top or bottom) in a <td colspan="3"> or whatever then the table will expand automatically to accommodate the image. You may need to use CSS to hide the cell borders around the image, but it should work.
I never bother with <thead> or <tfoot> but you might use these.
Kaled.
