SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2007
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS Proportional Image Resize Problem

    Hi, I've been struggling away trying to come up with a technique for resizing and positioning images uploaded by users of a CMS i'm developing. I want any images uploaded to be no wider than 500px and no taller than 300px. I want to resize the images proportionally and in a way which will work in most browsers (tried using CSS max width and max height and these only seemed to resize proportionally on Firefox).

    Anyway, I've written a little bit of basic Javascript which almost works, apart from instances where the width does not exceed the max of 500. In this situation (where the width < 500 and the height >300), although I allocate a new height and width to the image, it does not display the new dimensions. In my code, I have used an alert to print out the new height and width in these situations - the alert message correct displays the new dimensions but these don't take effect on the image displayed.

    An example of the problem is at the following URL, where the first of the 3 images has not resized correctly, while the other 2 have successfully.
    http://www.antoninesportscentre.co.u...nth=1197244800

    Apologies for the ramble, if this makes any sense at all i'd be grateful for any help (fairly inexperienced with Javascript which is probably fairly obvious)!

    Here's the code....
    Code:
      function checkImages() {
    	var maxWidth = 300;
    	var ps = document.getElementById('content').getElementsByTagName('p');
    	//loop through each paragraph and check the images attached
    	for (i = 0; i < ps.length; i++) {
    		var img = ps[i].getElementsByTagName('img')[0];
        
    		if (img != null) {
    			var height = img.height;
    			var width = img.width;
    			var clone=img.cloneNode(true);
    			
    		//check to see if image needs to be resized - 500 is the maximum width allowed
    		 if (width>500) {
    	   	 	var reduction = 500 / width;
    	   	 	clone.style.width = '500px';
    			//set new height proportional to new width
    	   	 	var newHeight = Math.round(img.height * reduction) ;
    	   		clone.style.height = newHeight + 'px';
    			width = 500;
    	   	 }
    		
    		//check to see if image needs to be resized - 300 is the maximum height allowed
    		 if (height>300) {
    	   	 	var reduction =  300 / height;
    			clone.style.height = '300px';
    			//set new width proportional to new width
    	   	 	var newWidth = Math.round(img.width * reduction) ;
    	   		clone.style.width = newWidth + 'px';
    			width = newWidth;
    			alert("width =" + clone.style.width);
    	   	 }
    		//if the image is too wide to wrap the text alongside it, move the image underneath the text
    		if (width > maxWidth) {
    			ps[i].removeChild(img);
    			ps[i].appendChild(clone);
    			clone.style.marginRight = 575 - width + 'px';
    			clone.style.marginBottom = '40px';
    			clone.style.marginTop = '20px';
    		}
    		//set min height for paragraph
    		if (img.height < 250)
    	   		ps[i].style.minHeight =  img.height + 60 + 'px';
    	   	else
    	   		ps[i].style.minHeight = '310px';
    	 }
          }
      }

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code that replaces the image with the resized clone only happens when the width > maxWidth.
    Code:
    if (width > maxWidth) {
        ps[i].removeChild(img);
        ps[i].appendChild(clone);
    You probably need another boolean to track whether the image has been resized or not. For example:
    Code:
    for (i = 0; i < ps.length; i++) {
        var img = ps[i].getElementsByTagName('img')[0];
        var resized = false;
        ...
        if (width>500) {
            var reduction = 500 / width;
            resized = true;
            ...
        }
        if (height>300) {
            var reduction = 300 / height;
            resized = true;
            ...
        }
        if (resized) {
            ps[i].removeChild(img);
            ps[i].appendChild(clone);
        }
        if (width > maxWidth) {
            clone.style.marginRight = 575 - width + 'px';
            clone.style.marginBottom = '40px';
            clone.style.marginTop = '20px';
    I'm not 100% sure, but I think that's your problem. You only ended up replacing the node when the width was greater than maxWidth.
    Hope that helps.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2007
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply fotiman, i've changed the code to the following, which works a little bit better. my problem is setting a new height when the width of the image is less than 500 - therefore only when this condition isn't met,
    Code:
    if (width>500).....
    the following condition
    Code:
    if (height>300).....
    doesn't function properly. any ideas?
    Code:
     function checkImages() {
    	var maxWidth = 300;
    	var ps = document.getElementById('content').getElementsByTagName('p');
    	
    	//loop through each paragraph and check the images attached
    	for (i = 0; i < ps.length; i++) {
    		var img = ps[i].getElementsByTagName('img')[0];
        	        var resized = new Boolean("false");
    		if (img != null) {
    			var height = img.height;
    			var width = img.width;
    			var clone=img.cloneNode(true);
    			
    		//check to see if image needs to be resized - 500 is the maximum width allowed
    		 if (width>500) {
    	   	 	var reduction = 500 / width;
    	   	 	clone.style.width = '500px';
    			//set new height proportional to new width
    	   	 	var newHeight = Math.round(img.height * reduction) ;
    	   		clone.style.height = newHeight + 'px';
    			width = 500;
    			resized = true;
    	   	 }
    		
    		//check to see if image needs to be resized - 300 is the maximum height allowed
    		 if (!resized) {
    		 	if ( height>300) {
    	   	 	var reduction =  300 / height;
    			clone.style.height = '300px';
    			//set new width proportional to new width
    	   	 	var newWidth = Math.round(img.width * reduction) ;
    	   		clone.style.width =  newWidth + 'px';
    			width = newWidth;
    			alert("new width should be =" + clone.style.width);
    	   	 	}
    		 }
    		//if the image is too wide to wrap the text alongside it, move the image underneath the text
    		if (width > maxWidth) {
    			ps[i].removeChild(img);   
    			ps[i].appendChild(clone);
    			clone.style.marginRight = 575 - width + 'px';
    			clone.style.marginBottom = '40px';
    			clone.style.marginTop = '20px';
    		}
    		//set min height for paragraph
    		if (img.height < 250)
    	   		ps[i].style.minHeight =  img.height + 60 + 'px';
    	   	else
    	   		ps[i].style.minHeight = '310px';
    	 }
        }
      }

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give this a try:

    Code:
    function checkImages() {
      var maxWidth = 300;
      var maxImgW = 500;
      var maxImgH = 300;
      var ps = document.getElementById('content').getElementsByTagName('p');
    
      //loop through each paragraph and check the images attached
      for (i = 0; i < ps.length; i++) {
        var img = ps[i].getElementsByTagName('img')[0];
        if (img == null) { continue; }
        var replaceWithClone = false;
        var height = img.height;
        var width = img.width;
        var clone = img.cloneNode(true);
    
        //check to see if image needs to be resized - 500 is the maximum width allowed
        if (width > maxImgW) {
          var reduction = maxImgW / width;
          width = maxImgW;
          height = Math.round(height * reduction);      
          clone.style.width = width + 'px';
          clone.style.height = height + 'px';      
          replaceWithClone = true;
        }
        //check to see if image needs to be resized - 300 is the maximum height allowed
        if (height > maxImgH) {
          var reduction =  maxImgH / height;
          height = maxImgH;
          width = Math.round(width * reduction);
          clone.style.height = height + 'px';
          clone.style.width = width + 'px';
          replaceWithClone = true;
        }
    
        //if the image is too wide to wrap the text alongside it, move the image underneath the text
        if (width > maxWidth) {
          clone.style.marginRight = 575 - width + 'px';
          clone.style.marginBottom = '40px';
          clone.style.marginTop = '20px';
          replaceWithClone = true;
        }
        
        if (replaceWithClone) {
          // Swap original image with resized image clone
          ps[i].removeChild(img);
          ps[i].appendChild(clone);
        }
            
        //set min height for paragraph
        if (height < 250) {
          ps[i].style.minHeight = height + 60 + 'px';
        }
        else {
          ps[i].style.minHeight = '310px';
        }
      }
    }


Bookmarks

Posting Permissions

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