SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,434
    Mentioned
    82 Post(s)
    Tagged
    3 Thread(s)

    Generate dynamic image positions

    I am bored at the moment and have decided to try making some more examples for my website.
    I am working on one at the moment and have hit a brick wall

    I am breaking an image up into pieces and making a new image from the pieces to look like photos setout side by side.

    If I hard code in the positions etc. it all works OK but what I want is to create the positions depending on the user input of qty per row and amount of rows. I also want to add a small random amount in the x and y to vary the image a bit.

    This is what I have so far:
    PHP Code:
    <?php
    // Original image
    $image '../_imagemagick/sunflower.jpg';

    // Amount of images in x
    $qty_x '4';

    // Amount of images in y
    $qty_y '3';

    // Get the size of the original image
    $size getimagesize($image);

    // Size to crop the images to
    $crop_x = ( $size[0]/$qty_x);
    $crop_y = ( $size[1]/$qty_y);

    // Canvas for combined images - it will be trimmed to the finished image size in the code
    $width = ( $size[0] * 1.5 );
    $height = ( $size[1] *1.5 );

    // Crop the image
    system("convert $image -crop {$crop_x}x{$crop_y} image-%d.jpg"); 

    // Remove the .jpg from the filenames
    foreach (glob("*.jpg") as $filename) {
    $file str_replace('.jpg'''$filename );
        
    system("convert $filename -background black +polaroid $file.png"); 
    }

    // Delete tempory images
    foreach (glob("*.jpg") as $filename) {
    unlink($filename); 
    }

    // Setup the random offsets for the images in the final image
    $random rand(225);
    $second '+'.( $crop_x $random ) .'+'$random ;
    $random rand(225);
    $third '+'.( ( $crop_x *) + $random ) .'+'$random ;
    $random rand(2225);
    $fourth '+'.( ( $crop_x *) + $random ) .'+'$random ;
    $random_x rand(2225);
    $random_y rand(1235);;
    $fith '+'$random .'+'. ( $crop_y $random_y ) ;
    $random_x rand(2225);
    $random_y rand(1235);
    $sixth '+'.( $crop_x  $random_x ) .'+'. ( $crop_y $random_y ) ;
    $random_x rand(2225);
    $random_y rand(1235);
    $seventh '+'.( ( $crop_x *) + $random_x ) .'+'. ( $crop_y $random_y ) ;
    $random_x rand(2225);
    $random_y rand(1235);
    $eighth '+'.( ( $crop_x *) + $random_x ) .'+'. ( $crop_y $random_y ) ;
    $random_x rand(2225);
    $random_y rand(2245);
    $ninth '+'$random_x .'+'. ( ( $crop_y *) + $random_y ) ;
    $random_x rand(2225);
    $random_y rand(2245);
    $tenth '+'.( $crop_x $random_x ) .'+'. ( ( $crop_y *) + $random_y ) ;
    $random_x rand(2225);
    $random_y rand(2245);
    $eleventh '+'.( ( $crop_x *) + $random_x ) .'+'. ( ( $crop_y *) + $random_y ) ;
    $random_x rand(2225);
    $random_y rand(2245);
    $twelth '+'.( ( $crop_x *) + $random_x ) .'+'. ( ( $crop_y *) + $random_y ) ;

    // Generate the background combined image 
    system("convert -size {$width}x{$height} xc:white image-0.png -geometry +{$random}+{$random} -composite image-1.png -geometry $second -composite image-2.png -geometry $third -composite image-3.png -geometry $fourth -composite image-4.png -geometry $fith -composite image-5.png -geometry $sixth -composite image-6.png -geometry $seventh -composite image-7.png -geometry $eighth -composite image-8.png -geometry $ninth -composite image-9.png -geometry $tenth -composite image-10.png -geometry $eleventh -composite image-11.png -geometry $twelth -composite -trim combined.jpg"); 

    // Delete tempory images
    foreach (glob("*.png") as $filename) {
    unlink($filename); 
    }
    /* ***************** TESTING CODE *********************** */

    for ($i 0$i <= ( $qty_x ); $i++) {
        echo 
    "image-$i.png";
    }
    echo 
    "<br>";

    for (
    $i $qty_x$i <= ( ( $qty_x ) - ); $i++) {
        echo 
    "image-$i.png";
    }
    echo 
    "<br>";

    for (
    $i = ( $qty_x ); $i <= ( ( $qty_x ) - ); $i++) {
        echo 
    "image-$i.png";
    }
    echo 
    "<br>";
    /* **************************************** */
    ?>

    <img src="combined.jpg" border="1">
    Everything works OK down to TESTING CODE and you can see the final image here:Final image

    But as I say this is hard coded and I want to make the final image dependent on the values of $qty_x & $qty_y Has anyone any cunning ideas that can help me out with this ? I was looking at the method in the TESTING CODE part of the code posted above but am unsure of the way to go especialy when the random part comes into it as well.
    Last edited by Rubble; Sep 4, 2007 at 13:47. Reason: Added some text

  2. #2
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Probably just:
    Code php:
    /* ***************** TESTING CODE *********************** */
     
    for ($j = 0; $j < $qty_y; $j++) {
     
      for ($i = 0; $i < $qty_x; $i++) {
        $n = $j>0 ? $qty_x*($j-1)+$i : $i;
        echo "image-$n.png";
      }
     
      echo "<br>";
    }
     
     
    /* **************************************** */
    Saul

  3. #3
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,434
    Mentioned
    82 Post(s)
    Tagged
    3 Thread(s)
    Thanks for the reply php_daemon; there must be a small error somewhere as my test code comes out with:
    image-0.pngimage-1.pngimage-2.pngimage-3.png
    image-0.pngimage-1.pngimage-2.pngimage-3.png
    image-4.pngimage-5.pngimage-6.pngimage-7.png

    I will have a look at it again later as I have to go and play in the garden with my daughter now !!

  4. #4
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,434
    Mentioned
    82 Post(s)
    Tagged
    3 Thread(s)
    Changing the $qty_x*($j-1)+$i to $qty_x*($j)+$i seems to have cured it.

    Now all I need to do is impliment it into my code

  5. #5
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,434
    Mentioned
    82 Post(s)
    Tagged
    3 Thread(s)
    I must admit there was some trial and error involved in this but I have now got the code working as I wanted. Thanks again for the help php_daemon.

    PHP Code:
    <?php
    // Original image
    $image '../_imagemagick/sunflower.jpg';

    // Amount of images in x
    $qty_x '4';

    // Amount of images in y
    $qty_y '3';

    // Get the size of the original image
    $size getimagesize($image);

    // Size to crop the images to
    $crop_x = ( $size[0]/$qty_x);
    $crop_y = ( $size[1]/$qty_y);

    // Canvas for combined images - it will be trimmed to the finished image size in the code
    $width = ( $size[0] * 1.5 );
    $height = ( $size[1] *1.5 );

    // Crop the image
    system("convert $image -crop {$crop_x}x{$crop_y} image-%d.jpg"); 

    // Remove the .jpg from the filenames
    foreach (glob("*.jpg") as $filename) {
    $file str_replace('.jpg'''$filename );
        
    system("convert $filename -background black +polaroid $file.png"); 
    }

    // Delete tempory images
    foreach (glob("*.jpg") as $filename) {
    unlink($filename); 
    }

    // Set $command variable
    $command "";

    // Loop through generating the image layout
    for ($j 0$j $qty_y$j++) { 

      for (
    $i 0$i $qty_x$i++) {    $n $j>$qty_x*($j)+$i $i
      
    $offset_x= ( ($crop_x $i ) + rand(225));
      
    $offset_y=( ($crop_y $j ) + rand(225));
      
    $command .= " image-$n.png -geometry +$offset_x+$offset_y -composite" ;  } 
      }

    // Produce the combined image
    system "convert -size {$width}x{$height} xc:white $command -trim combined.jpg"); 

    // Delete tempory images
    foreach (glob("*.png") as $filename) {
    unlink($filename); 
    }

    ?>
    Note: some care needs using on how to divide the image as sometimes a small image is created that causes a problem. I am not sure why this happens at the moment
    Looks like you need an even number in the $crop_x & $crop_y
    Last edited by Rubble; Sep 4, 2007 at 13:32. Reason: Added note

  6. #6
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You can change $n = $j>0 ? $qty_x*($j)+$i : $i;

    to just $n=$qty_x*$j+$i;

    I didn't give much thought yesterday, thus the bug.

    Don't know if that helps, but you can get the next bigger even number like this:

    $crop_x+=$crop_x&#37;2;

    $crop_x should be an integer.
    Saul


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
  •