11.7.13

Instagram Tilt - Shift - Style Filter With PHP's GD Lib

I decided to create an Instagram tilt shift style filter that blurs a specified area of an image while keeping another specified area intact. To spice things up, I used PHP's GD lib. Image manipulation is hard on the CPU and this might not be the most efficient implementation but hey, it's fun and dangerous and as young people say these days, YOLO! 

Besides, it's a very simple hack that uses imagecopyresampled() to position a cropped, unfiltered copy of the original image onto a full-sized tilt-shifted copy of the original. You can specify how big the crop is, its shape, and its position within the big blurred copy.

Original image
Tilt-shifted copy

 Here's the code:

 <?php  
   function tiltshift($filename, $percent_x, $percent_y, $padding_x, $padding_y )  
   {  
    $im = '/path_to_your_image/'.$filename;  
    if (file_exists($im))  
   {  
    list($width, $height) = getimagesize($im);  
    $original = imagecreatefromjpeg($im);  
    $crop = imagecreatefromjpeg($im);  
     
    //Set new crop dimensions  
    $new_width = $width*$percent_x;  
    $new_height = $height*$percent_y;  
     
    //New crop position within original image  
    $newx = $width*$padding_x;  
    $newy = $height*$padding_y;  
     
    //Blur the hell out of the original image  
    imagefilter($original, IMG_FILTER_SELECTIVE_BLUR);  
    imagefilter($original, IMG_FILTER_GAUSSIAN_BLUR);  
     
    //Position crop on top of the original image  
    imagecopyresampled($original, $crop, $newx, $newy, $newx, $newy, $new_width,  $new_height,$new_width, $new_height);  
     
    //Add a dash of contrast to the new merge  
    imagefilter($original, IMG_FILTER_CONTRAST, -10);  
     
    if (imagejpeg($original, 'path_to_your_temp_imgs/'.$filename))  
    {  
    return TRUE;  
    }  
     
    imagedestroy($crop);  
    imagedestroy($original);  
      
   }  
   return FALSE;  
   }  
   ?>  

Obviously, you can use jQuery to pass the padding_x and padding_y based on user input within the image but I'm not going to get that fancy here.

 <?php
 //the crop will be 50% of the original, and it will be at the center of the image
 if(tiltshift('your_image.jpg', '0.5', '0.5', '0.25', '0.25'))
 {
     echo "<img src=\"temp_imgs/your_image.jpg\" > <img src=\"images/your_image.jpg\" style=\"float:right;\">";
 }
?>