Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    lll
    lll is offline
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image size+dimensions check and replacing

    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:
    Code:
    <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?

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Javascript can not check the size (kb) of a file. You should use a server-side application (php, asp...)
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by Kor View Post
    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.

    Code:
        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.

    Code:
      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.
    Last edited by rnd me; 08-07-2008 at 02:40 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by rnd me View Post
    this works for me on this page in firebug.


    does it not work for you?
    That is a request object, not a javascript object.
    Quote Originally Posted by rnd me View Post
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by Kor View Post
    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:

    Code:
    var t= new XMLHttpRequest
    t.send.toString()
    //returns: function send() { [native code] }
    can you explain the distinction you are making?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by rnd me View Post
    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...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by Kor View Post
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •