SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resize image proportionally

    Hello,
    I do not use JavaScript a lot so I do not know enough to create the script myself I needed
    I searched the internet, but I have not found a script doing exactly what I need
    I have a max size in height and a max size in length.
    I upload an image, then scaling is done as follows:
    I take the greatest value as a parameter (height or length), then the other parameter I is proportionately.
    Example: I have an image of size H: 230 L: 300
    I take the highest value, therefore, L: 300
    The max size to meet after resizing:
    H max: 100, L max: 100
    300>> will become>> 100
    230>> proportion>> X
    X = (100 * 230) / 300.
    After I confirm the registration of the image on the server
    You see what I do? He commend someone could help me create this script please?
    Here's what I did as early
    var resize = function(img, maxh, maxw) {
    var ratio = maxh/maxw;
    if (img.height/img.width > ratio){
    // hauteur est le problème
    if (img.height > maxh){
    img.width = Math.round(img.width*(maxh/img.height));
    img.height = maxh;
    }
    } else {
    // largeur est le problèm
    if (img.width > maxh){
    img.height = Math.round(img.height*(maxw/img.width));
    img.width = maxw;
    }
    }
    };

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you're doing this with JavaScript, it's pointless because you're still downloading a bigger image than is necessary. You need to resize it on the server and provide the resized image to the browser. With PHP you can do it like this:

    PHP Code:
        $maxwidth 480// largest allowed width
        
    $maxheight 480;  // largest allowed height
        
    list($width$height$type) = @getimagesize('someimage.jpg');
        
    // $width and $height are the dimensions of the image
        
    if ($maxwidth $width && $width >= $height) {
          
    $thumbwidth $maxwidth;
          
    $thumbheight = ($thumbwidth $width) * $height;
        }
        elseif (
    $maxheight $height && $height >= $width) {
          
    $thumbheight $maxheight;
          
    $thumbwidth = ($thumbheight /$height) * $width;
        }
        else {
          
    $thumbheight $height;
          
    $thumbwidth $width;
        } 
    So now $thumbheight and $thumbwidth contain the values for the new dimensions of the image, with the same aspect ratio. You can then generate the actual image with PHP's image functions, so the whole function would be:

    PHP Code:
      function createThumb($img) {
        
    $maxwidth 480;
        
    $maxheight 480;
        list(
    $width$height$type) = @getimagesize($img);
        if (
    $maxwidth $width && $width >= $height) {
          
    $thumbwidth $maxwidth;
          
    $thumbheight = ($thumbwidth $width) * $height;
        }
        elseif (
    $maxheight $height && $height >= $width) {
          
    $thumbheight $maxheight;
          
    $thumbwidth = ($thumbheight /$height) * $width;
        }
        else {
          
    $thumbheight $height;
          
    $thumbwidth $width;
        }
        
    $imgbuffer imagecreatetruecolor($thumbwidth$thumbheight);
        switch(
    $type) {
          case 
    1$image imagecreatefromgif($img); break;
          case 
    2$image imagecreatefromjpeg($img); break;
          case 
    3$image imagecreatefrompng($img); break;
          default: return 
    "Tried to create thumbnail from $img: not a valid image";
        }
        if (!
    $image) return "Image creation from $img failed for an unknown reason. Probably not a valid image.";
        else {
          
    imagecopyresampled($imgbuffer$image0000$thumbwidth$thumbheight$width$height);
          
    imageinterlace($imgbuffer);
          
    $output imagejpeg($imgbuffer"imagethumb.jpg"80);
          
    imagedestroy($imgbuffer);
          return 
    $output;
        }
      } 
    Still, if you really need to do it with JavaScript, I used this function:

    Code javascript:
     function resize(image) { // image is a reference to an <img> element
        var x = 800, // max width
             y = 600, // max height
             imageWidth = image.width,
             imageHeight = image.height;
        if (imageWidth > x) {
          imageHeight = imageHeight * (x / imageWidth);
          imageWidth = x;
          if (imageHeight > y) {
            imageWidth = imageWidth * (y / imageHeight);
            imageHeight = y;
          }
        } else if (imageHeight > y) {
          imageWidth = imageWidth * (y / imageHeight);
          imageHeight = y;
          if (imageWidth > x) {
            imageHeight = imageHeight * (x / imageWidth);
            imageWidth = x;
          }
        }
        image.width = imageWidth;
        image.height = imageHeight;
      }

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello everyone
    My code upload it works well.
    I can not insert your function in my code.
    For cons, the code that you provided me with answers exactly what I want.
    If all goes well, he's going to stay as how to rename the file
    Attached Files Attached Files


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
  •