SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Image resample on the fly

    Hi Guys (and gals)

    I'm have a no brain day here due to an exceptional all nighter

    I need to resample images on a clients website, they upload images to the site at around 100Kb in size, I need to display these in various forms around the site as thumbnails, smaller in size both physically and bytewise, at present the code just resizes in the img tag, but this still loads the 100Kb image, and with some pages having over 500 images thats a load of time spent twiddling your thumbs.

    I've got this function

    PHP Code:
    function outputimage($filename,$new_width,$new_height)
    {
    list(
    $width$height) = getimagesize($filename);
    $image_p imagecreatetruecolor($new_width$new_height);
    $image imagecreatefromjpeg($filename);
    imagecopyresampled($image_p$image0000$new_width$new_height$width$height);
    imagejpeg($image_pnull50);
    return;

    where i can pass the original filename and the required height and width of the thumnail, but cant figure out (not today anyhow) how I can incorporate this into the HTML to display the new image. I could just save the image to disc as image_tn.jpg then reference the HTML to this for each image but didnt really want to do all that disc writing.

    Any kicks would be good, I can goto bed after this one
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Obviously, you have to create a PHP file that will generate thumbs for you. Let's call it "thumb.php". In this file you have to know somehow which thumb to generate. You can pass some id to the file (via GET) as the thumb identifier. This can be filename, for example.

    Somewhere in your html source file you put something like this

    HTML Code:
    <img src="/thumb.php?id=thumb1" />
    <img src="/thumb.php?id=thumb2" />
    <!-- etc -->
    Now, this is what your thumb.php might look like:

    PHP Code:
    <?php
    // Here you have to convert what's get passed in $_GET['id'] into file name
    // Here is example implementation
    $filename '/my/full/path/to/original/thumbnails/'.$_GET['id'].'.jpeg';

    // Now we call the resizing function
    // In the example I used 80x80 thumbs
    outputimage($filename8080);

    function 
    outputimage($filename,$new_width,$new_height)
    {
    list(
    $width$height) = getimagesize($filename);
    $image_p imagecreatetruecolor($new_width$new_height);
    $image imagecreatefromjpeg($filename);
    imagecopyresampled($image_p$image0000$new_width$new_height$width$height);
    header('Content-Type: image/jpeg');
    imagejpeg($image_pnull50);
    return;


    ?>
    Things to note

    1) The way you convert id to full path will definitely differ in your implementation. You have to think about it.

    2) Note, that I added Content-Type header to the original function

    Hope this helps.

  3. #3
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    zuant

    Thanks for that I'd just got it working when your answer came through only difference being I ditched the function in the php file and just had straght proceedual code.

    Problem now is even though the images downloaded are far smaller its still taking an awfully long time to load the page images. I think this has more to do with connection sockets than PHP code though.

    Thanks again
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My congrats

    Yes, if you have slow connection there is little you can do about this. Probably, some optimization will help, but not much, I think.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've done a similar thing in the past, if you have allot of images per request it can take some time to resample them all.

    I did something like this

    if(thumbnail is on disk) {
    do nothing;
    } else {
    resample image to thumbnail;
    write to disk;
    }
    Serve up thumbnail;

    That way the images only get resampled once, on the first request, the only gotcha is if you upload a new image with an old name, you need to delete the thumbnail.

    I can dig out the code if you like?

  6. #6
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    twenty205

    Thanks for that I am considering doing something like that, but the overhead is quite large, this site is for a group of estate agents, about 50 in total so it contains many thousand properties each having about 20 images on average, they have a choice as to which of the 20 images can be used as the default image for the property in question. I cannot thumbnail all images as that would just be a waste, so my options are to thumbnail on the fly the image requested by the script, which was the bit I was trying today, OR, search a thumbnail directory for the image and if not available run the script and save the image for future use. However some agencys like to rotate the default image periodically so that would mean having to search out the existing image delete it and redo it. I guess the other option is to just save all erquested images and then clear these out once in a while knowing that the first person to reenter the backoffice system after a clear out will have to wait for the images to be recategorized. All images are uploaded with a unique name so overwriting isnt an issue.

    This problem only exists on the back office system as the website only serves a max of 100 properties at a time to the public which it handles reasonably fast, but some of the agencies can have upwards of 500 properties on the system and when viewing their properties this is where the problem hits. I could paginate the display, but the client prefers to be able to scroll through all properties esp when scanning with a client beside him.

    Its a classic case of an idea taking off better than anticipated, my design brief when I designed the site 3 years ago was that it should handle 10 agencies !!! And whilst I put no limits on the number of agencies that could be added the throughput is starting to slow the system in places, hence the revisit now.
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mandes View Post
    so my options are to thumbnail on the fly the image requested by the script,
    That would be the way I'd go, but also saving the thumbnails to disk on their first request.

    I'll post the script tomorrow, you can use it if you like it.

    Good luck with it

  8. #8
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you might want to consider imageMagick, and call by using exec command. try to use convert -resize command.


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
  •