SitePoint Sponsor

User Tag List

Page 3 of 6 FirstFirst 123456 LastLast
Results 51 to 75 of 139
  1. #51
    Kris
    SitePoint Community Guest
    @Alishah and Alex

    Um... what are you both talking about? Alishah, you're describing using something like JavaScript to resize an image which requires a user to download the full size. Alex, you're talking about the browser resizing the images as well.

    Why!? All of the code posted by Greg happens on the server side. So not only will the file size will be smaller than the full image when a user downloads it, but the server takes care of resizing; not the browser.

    You guys are idiots and need to learn to read. You also need to learn the difference between server-side and client-side technologies.

  2. #52
    Aaron
    SitePoint Community Guest
    Kris... you need to learn a thing or two about how HTML renders images.

    The code originally posted by Greg does NOT actually resize the image! Alex and Alishah are right: resizing the image using the browser IS a bad idea.

    Look at the output of the code: it creates a normal image tag, but dynamically sets the width and height properties. That's just great, but the problem is the image itSELF is the same size, it's just SHOWN smaller! To make this clearer:

    Let's say you have an image that's ~1MB in size, at, say, 1280x1024. Let's say you needed it to show up as a thumbnail on your page. Using greg's method, the filesize is STILL 1MB even if you make the dimensions as well as 13 x 10 pixels!

    The whole point of even USING thumbnails is so the user can download a small version of the file before deciding if they want to see the large version. This does not solve that problem. You should really be using imageMagick or another true server-side method to do image resizing.

  3. #53
    Chris
    SitePoint Community Guest
    Or an even BETTER way to do this is just specify just one of the dimension in the <img> tag. That will keep the aspect ratio. No PHP, no Javascript. The thing is though, the image will look screwed up no matter what. You will get pictures that have jagged lines in, people that look like their eyes are falling out and a still have a huge download. There is no way around it really, you need thumbnails and the original picture. Don't be lazy man!!! This could be accomplished EASILY using a database.

  4. #54
    John
    SitePoint Community Guest
    Actually, all the code does is... retrieve & mathematically scale the image dimensions on server side. Then the HTML tag loads the image, client-side. The file size will remain the same. I think the code is excellent, for what it was made to do.
    An image can be dynamically scaled to a variety of sizes & displayed many times throughout the website for good formatting. If you guys are worrying about file sizes, then manage that from your upload script. After which, use Greg's code.

  5. #55
    sivamurugan
    SitePoint Community Guest
    But how could i use this tech for large no of pictures at a time....

    Please mail me at p.sivamurugan@gmail.com

  6. #56
    chad nance
    SitePoint Community Guest
    I can't get this script to work... I copied and pasted directly off this page and just changed the image src.. I thought it might have something to do with the way the return statement was escapted, but I fooled with that and it still doesn't work...

  7. #57
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up I don't know if this will help, but here goes.

    I've seen a lot of "I can't get the script to work", and "But that doesn't actually resize the image!", and I got to thinking about what I've worked on recently using the GD libraries, and I found this very small random image rotation script that I wrote for my personal site. The code is listed below, and it allows for setting the width, height and quality of the image. I'm sure that you can easily modify it to show a specific image with little effort. ^ ^

    PHP Code:
    <?php
          
    //rotate.php - Random Image Rotation Script -
          
    $folder './my_gallery';
          
    $fileArray glob("$folder/*.jpg");
          
    $w 150;       // default width.
          
    $quality 80;  // default quality.
          
    $h = -1;        // just sets the variable, in case the query string doesn't include it.
          
    srand();
          
    $idx rand(0,count($fileArray) - 1);
          
    $fileName $fileArray[$idx];
          
    $time date ("l, F jS, Y g:i:s A");
          foreach (
    $_GET as $key => $value) {
            $
    $key stripslashes($value);
          }
          list(
    $srcWidth$srcHeight) = getimagesize($fileName);
          
    $srcImg ImageCreateFromJPEG($fileName);
          
    $aspectRatio =  $srcWidth $srcHeight;
          
    $h = ($h != -1) ? $h : ($w $aspectRatio); // Makes sure that the image is properly proportioned
          
    $dstImg imagecreatetruecolor($w$h);
          
    imagecopyresampled($dstImg$srcImg0000$w$h$srcWidth$srcHeight); // I've noticed that on larger images, resampling is a bit slower than simple resizing, but this produces a MUCH better image.
          
    header("Content-type: image/jpeg");
          
    imagejpeg($dstImg,"",$quality);
          
    imagedestroy($srcImg);
          
    imagedestroy($dstImg);
    ?>
    /*
      The image is called with the following HTML tag:
      <img src="rotate.php?w=100&q=80">
      where w is the images width, and q is the images JPEG quality.
      
      Note that I left off any width or height quantifiers in the HTML tag. While poor coding practice, it proves the resizing of the image indeed works.
    */
    Below is the final product, in triplicate:
    75 px width, 100% quality
    100 px width, 67% quality
    125 px width, 33% quality

    Hope this helps. ^ ^
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  8. #58
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Thanks for sharing Dave but why is the script called 'rotate'?!!!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  9. #59
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mostly because I'm not very good at keeping to proper naming conventions. I came VERY close to naming it "Fred".
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  10. #60
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For all of you looking for a way to transform images on the fly, you might want to check the open-source project Asido: there are a lot of useful features (http://www.asido.info/about/features/), including various types of image resize - like fit resize (resize if bigger) and frame resize (force-fit), watermarking, image copy, cropping, etc. It can use various platforms: not only GD but ImageMagick too (either via shell or via any of the php extensions like php_magickwand.dll or php_imagick.dll). Here's the list of drivers: http://www.asido.info/about/drivers/

  11. #61
    ailaG
    SitePoint Community Guest
    that doesn't resize the image, that just shows it resized. if the image is heavy, the browser will download the whole huge image and then only display some of its pixels.

    to resize an image with php, use the gd library.

    (btw, i came here from a search for gd tutorials :) )

  12. #62
    MichaelB
    SitePoint Community Guest
    Come on! Just set the height or the width (not both) and let the browser handle the resize. No need to do this - simplified to :

    <img src="images/sock001.jpg" width="150" >
    or
    <img src="images/sock001.jpg" height="150" >

    But is fine for small images but we should really resize and store the new image in a cache (file or memory)

  13. #63
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How are you are resizing image using GD?

  14. #64
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    hi ansys and welcome to the forums

    If you look at Dave's pst #57 he gives a script that uses GD to resize the images, it uses the following functions:

    ImageCreateFromJPEG
    imagecreatetruecolor
    imagecopyresampled

    Read through the manual pages about these functions and look at the user added notes. It should give you the required information.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  15. #65
    Jamieson
    SitePoint Community Guest
    This is interesting, seems a lot easier than .NET. However, if the image is being resized on the server prior to streaming to the client browser, aren't you downloading a smaller version of it?

  16. #66
    Matt
    SitePoint Community Guest
    Wasteful on the people downloading, and wasteful on your bandwidth. Plus, resizing on fly is wasteful on your server resources... all of these factors makes a site unnecessarily slow. 3,000 5k thumbnails are only 14mb, (5*3000/1024) and a shop with 3,000 products should be using the kind of web space with enough storage to handle that. Therefore, the most efficient and 'correct' solution is to store a smaller thumbnail image. Functions such as those already suggested for automatically creating a thumb on upload are the way to go. A 5k storage overhead on each image is only a problem is you have VERY cheap web space.

  17. #67
    Daniel C.
    SitePoint Community Guest
    If your looking for an easier way to handle image resizing, I wrote a small library a while back for my pojects: http://code.google.com/p/bair/

  18. #68
    mx_
    SitePoint Community Guest
    This function might be sufficient for some, it doesn't seem flexible enough. I would like the function to be transparent, to be agnostic to upscales and downscales, to keep the proportions or ignore them (depending on a flag), and to scale by separate width/height constraints without any headaches. Recently I wrote a function that seems to cover all these fronts in the intuitive manner. If you're looking for something like that - you can find it here:
    http://www.mediumexposure.com/techblog/smart-image-resizing-while-preserving-transparency-php-and-gd-library

  19. #69
    Alex
    SitePoint Community Guest
    You need an "echo" in there to print the values to the screen:
    <img src="images/sock001.jpg" <?php echo(imageResize($mysock[0], $mysock[1], 150)); ?>>

  20. #70
    BobbyD
    SitePoint Community Guest
    For a simple temporary resize it workd fine. Good Job & Thanks

  21. #71
    Alex
    SitePoint Community Guest
    Awesome thanks!

  22. #72
    akyles
    SitePoint Community Guest
    I don't get it.
    What about using just: img src="file.jpg" width=20% (20% of the area)

    or img src="file.jpg" width=150 (150 pixels wide)

  23. #73
    darkstar3d
    SitePoint Community Guest
    You are still downloading the FULL image of the socks, this only displays them smaller and is pretty worthless. As akyles posted, could have been done much easier, same effect.

  24. #74
    Shawn
    SitePoint Community Guest
    I'd just like to say, this script came in very very handy for me and helped me resolve an issue without having to use the GD library. Great work!

  25. #75
    Diego Martorelli
    SitePoint Community Guest
    Im sorry to say that this is worthless, you can archive the exact same result by setting up the either the width or the height on the style of the image.i.e if you have an 200 width x 100 height image and you do:
    <img src="whatever.jpg" style="width: 100px"> the height will be set up to 50px automatically so it will affect its aspect ratio. And i think its way much better to have thumbnails than doing this, because if you have big images it will take for ever to load the page, i thought this was a tutorial for actually resizing images with PHP as it states on the title.


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
  •