Image size+dimensions check and replacing

[lll]

I want a script that checks the image size and dimensions, for example 100x100 and 100kb, and if the image is more than these sizes, it replaces it with another one from url. Also the script must be limited to this class:

<dl class="post-sig"></dl>

Like any image that is bigger in dimensions or size - it will be replaced. And restrict the class to only one image. Is it possible to do that? Can anyone post a ready script?

[Kor]

Javascript can not check the size (kb) of a file. You should use a server-side application (php, asp...)

[rnd me]

Originally Posted by Kor

Javascript can not check the size (kb) of a file. You should use a server-side application (php, asp...)

this works for me on this page in firebug.

    function fileSize( url ) {
        var XHRt =  !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
        XHRt.open("HEAD", url, true);
        XHRt.send('');
        return XHRt.getResponseHeader("Content-Length")
    }


//test for firebug:

  alert (  fileSize(document.images[0].src)  )

//result: 5063

==========

img dimensions (WxH) are available as properties of the object. note that they will only be available after the image loads.
you can create onload events for images, and direct traffic in the onload to handle the image based upon size, once that is known.
one last caveat: firfox uses .naturalWidth and ie uses just plain .width, which is also available in firefox.
in ff .width doesn't reflect the actual size of the image.


EDIT: rereading the post, i bet the images will be loaded already.
use getElmsByClass and gather up the images, then alter each img tag under each of those elements.

  function fileSize( url ) {
        var XHRt =  !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
        XHRt.open("HEAD", url, true);
        XHRt.send('');
        return XHRt.getResponseHeader("Content-Length")
    }

function getElementsByClass(class2find) {
    var allTags = document.getElementsByTagName("*");
    var tagListLength = allTags.length;
    var goodTags = [];
    for (var index = 0; index < tagListLength; index += 1) {
        if (allTags[index].className.indexOf(class2find) > -1) {
            goodTags[goodTags.length] = allTags[index];
        }
    }
    return goodTags;
}



function resizeImages() {
    var pops = getElementsByClass("post-sig");
    for (var i = 0, mx = pops.length; i < mx; i++) {
	   var them = pops[i].getElementsByTagName("img");
	   if (them && them[0]) {
		  for (var i2 = 0, mx = them.length; i2 < mx; i2++) {
			 var it = them[i2];
			 if ( Number(it.naturalWidth || it.width) > 100) {
				it.src = it.src.replace(/\.jpg/, "-sm.jpg");
			 }
			 if ( Number(it.naturalHeight || it.height) > 100) {
				it.src = it.src.replace(/\.jpg/, "-sm.jpg");
			 }
			 if ( Number(fileSize(it.src)) > 100000) {
				it.src = it.src.replace(/\.jpg/, "-sm.jpg");
			 }
		  }
	   }
    }
}

sample code assumes you have a small version named eg: bob.jpg/ bob-sm.jpg

if the images are outside your website, remove the file size checking part, as that only works on your files, not remote ones.

[Kor]

Originally Posted by rnd me

this works for me on this page in firebug.


does it not work for you?

That is a request object, not a javascript object.

Originally Posted by rnd me

img dimensions (WxH) are available as properties of the object. note that they will only be available after the image loads.
you can create onload events for images, and direct traffic in the onload to handle the image based upon size, once that is known.
one last caveat: firfox uses .naturalWidth and ie uses just plain .width, which is also available in firefox.
in ff .width doesn't reflect the actual size of the image.

The dimensions (WxH) detection onload is, in case of images, unsure. It depends on the size of the image, the connection speed, the nature of the image (interlaced or not).

Again. For a 100% accurate size&dimension of the files use a server-side application.

[rnd me]

Originally Posted by Kor

That is a request object, not a javascript object.

i'm sorry, i don't follow you.

as far as i can tell, it is an object:

var t= new XMLHttpRequest
t.send.toString()
//returns: function send() { [native code] }

can you explain the distinction you are making?

[Kor]

Originally Posted by rnd me

i'm sorry, i don't follow you.

The AJAX request object is not a part of javascript, you should have learn that by now...

[rnd me]

Originally Posted by Kor

The AJAX request object is not a part of javascript, you should have learn that by now...

the documentation i use says it is. i'ts the first thing this page says in fact. (i'm just telling ya what i heard)

i would concede that its not a part of ecma script or IE3-6, but i the code i posted works in old IE (5+), as well as safari and opera.

thus, frankly, i don't see the relevance of the post, and i feel it distracts from accomplishing the stated goal.

i understand what you are saying, and in some senses i agree, but i don't see the point in the first place, or of a debate over semantics i tend throw around loosely.

if was a little grumpy, its because it was early over here and i am out of coffee.
i am sure you understand.
-----


to the OP:
sorry to hijack the thread.

any luck in getting it to work?

on further consideration, i would probably throw away the fileSize checker. i've had good results checking dimensions in current browsers, so that should probably be enough to filter by.

[Kor]

ok now with the request object we agree. The problem is that an AJAX request is not practical in that situation. If an image or two, that will be done in a reasonable time, but for many images to load them via AJAX, to check their size, to replace (using javascript) the bigger ones... that will take some time...