?
Solved

Javascript Image Uploader

Posted on 2007-08-08
6
Medium Priority
?
1,055 Views
Last Modified: 2012-06-21
I have the following Javascript code that is intended to resize images that are larger than the specified width.  I'm not fluent in Javascript, so although I can kind of figure out what this code is doing, I'm not 100% sure.  The whichId and maxW are passed from the:
<body onload="fixImgs('photos', 50) /*('element ID', maximum width)*/">

in my HTML code I have an image: <img src="../../UserImages/<%=imgPath%>/<%=Picture%>" id="photos" border=0 align="left">

My hope was that the Javascript would check to see if the image was over 50pixels wide (or whatever number) and if it was, it would resize it.

I can't get it to work.

function fixImgs(whichId, maxW) {
var pix=document.getElementById(whichId);
  for (i=0; i<pix.length; i++) {
    w=pix[i].width;
    h=pix[i].height;
    if (w > maxW) {
      f=1-((w - maxW) / w);
      pix[i].width=w * f;
      pix[i].height=h * f;
    }
  }
}
Any Suggestions?

Thanks!
0
Comment
Question by:steverguy
  • 4
6 Comments
 
LVL 63

Accepted Solution

by:
Zvonko earned 1400 total points
ID: 19657468
It is as easy as this:

function fixImgs(whichId, maxW) {
   var theImg = document.getElementById(whichId);
   if(theImg.width>maxW) theImg.width=maxW;
}


0
 
LVL 17

Assisted Solution

by:jrm213jrm213
jrm213jrm213 earned 600 total points
ID: 19661685
Hi,

There are a couple of different issues here and they work differently depending on whether or not you have set height and width of the image in the tag or not.

If you have not set the height and width in the img tag then what Zvonko provided will work and will maintain the aspect ratio of the image.

If you have already specified height and width of the image and want the image to hold the aspect ratio when you resize it you need to do the following:

1. pass in the max width
2. get the ratio of the max width to the pictures current width
3. set the image width to 50 (or multiply the current width * the ratio from step)
4. set the image height to its current height * the ratio from step 2

function fixImgs(whichId,maxW)
{
  var pix = document.getElementById(whichId)
  var ratio = maxW / pix.width;
  pix.width = 50;
  pix.height = pix.height * ratio;
}

Also to note, if these are very large pictures, javascript will sometimes screw up if the image has not completely loaded yet.
0
 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 19661713
Also if you don't want to bother with javascript you could probably just set the width in the img tag and in most browsers it will resize properly. This would make all images width be 50 even if they were smaller previously.

<img src="picturesourcehere" width="50">
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 19661831
Also if you go with the javascript function to handle this issue,

if you don't want smaller images to get bigger then add an if statement around it that checks that first.


function fixImgs(whichId,maxW)
{
  var pix = document.getElementById(whichId)
  if (pix.width >50)
  {
     var ratio = maxW / pix.width;
     pix.width = 50;
     pix.height = pix.height * ratio;
  }
}
0
 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 19661844
and you can replace the 50's in there with maxW

Sorry about the multiple posts. I haven't had my coffee yet.
0
 
LVL 1

Author Comment

by:steverguy
ID: 19864683
Thank you for your help!  I appreciated the insight, jrm.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question