Facebook style image collage

Hi,

In Facebook there are various applications which makes a collage of all your friends. The application may be showing your top followers, or friends who are in your same organization and so on. In this post I have created a  PHP script to do exactly the same. But for demo I have used a static array of users to create the collage image, which of course you can convert to a dynamic array fetching data from the database.

First lets see the output:

Everytime you refresh the sequence of users will get shuffled and the angle of rotation of the images are also randomly selected between -10 to +10 degrees. Few prerequisites before using the code is to copy a font file(.ttf) and paste it in the directory of the code. Rename the ttf file to "cfont.ttf". Secondly and most important is to enable you GD library if it is not enabled.

The code to get the above is:

<?php
$im=imagecreatetruecolor(300,300);
$white=imagecolorallocate($im,255,255,255);
$black = imagecolorallocate($im, 100, 100, 100);
imagefilledrectangle($im,0,0,800,500,$black);
$font = 'cfont.ttf';
$users=array();
$users[0]['image']="statham.jpg";$users[0]['name']="Jason Statham";
$users[1]['image']="antonio.jpg";$users[1]['name']="Antonio Benderas";
$users[2]['image']="will_smith.jpg";$users[2]['name']="Will Smith";
shuffle($users);
$marge_left=20;$marge_top=20;$i=0;
foreach($users as $key){
$i++;
$img_element=imagecreatefromjpeg($key['image']);
$angle=rand(-10,10);
$img_element = imagerotate($img_element, $angle , $black);
$text=$key['name'];
imagettftext($img_element, 10,0, 10, 20,$white, $font, $text);
imagecopy($im, $img_element, $marge_left, $marge_top, 0, 0, imagesx($img_element), imagesy($img_element));
$marge_left+=120;
if($i%2==0){
$marge_left=20;
$marge_top=$marge_top + 120;
}
}
header("content-type: image/jpeg");imagejpeg($im,null,100);

Explanation:

1. First I am creating the canvas on which I want to create the collage. Setting the dimension as 300x300.
i.e. $im=imagecreatetruecolor(300,300);

2. Now I am creating a grey colored rectangle as the background.
i.e. imagefilledrectangle($im,0,0,800,500,$black);

3. I have created a $users array which holds the friends/users name and image URL.

4. The array is fetched in a loop. The main tasks are performed inside the loop.

     4.1 Creating the image object for friends profile pic by  $img_element=imagecreatefromjpeg($key['image']);

    4.2 Getting a random angle between -10 to 10 degrees by $angle=rand(-10,10);

    4.3 Finally rotating the image object created in 4.1 by the random angle by the code: $img_element = imagerotate($img_element, $angle , $black); where $black is the color to be put in the empty space that is created after rotation

   4.4 Now I am merging the user name to the image object created in 4.1 by using:

         $text=$key['name'];
imagettftext($img_element, 10,0, 10, 20,$white, $font, $text);

   4.5 Finally adding the image object from 4.1 in the main canvas with the code:
         imagecopy($im, $img_element, $marge_left, $marge_top, 0, 0, imagesx($img_element), imagesy($img_element));

  4.6 $marge_left and $marge_top are used to allign the image created in 4.1

  4.7 In my code I am keeping 2 images in 1 row, so I have given the following:
       if($i%2==0){

$marge_left=20;

$marge_top=$marge_top + 120;

}

        you can change this according to your need.

5. Finally I am generating the image in the browser by:

header("content-type: image/jpeg");imagejpeg($im,null,100);

Thats it your collage is done. Click here to download the full code.