Welcome Guest, Not a member yet? Register   Sign In
MD Image - Library for cropping images to desired ratio and resizing
#1

[eluser]MihaiD[/eluser]
Hello everybody

This is my first contribution here and it's pretty modest so please go easy on me Smile

I created this library because i needed to force image uploads to look the same in a project of mine, without limiting the user to certain image dimensions.

So my approach was 3 steps:
1. accept any image from user (limited only by php.ini max upload size setting)
2. crop image to desired ratio
3. resize image to my desired sizes

Notes:
- steps 2 and 3 could probably be done in just one step - but by doing so I had sometimes problems with the result - GD2 would throw in some ugly black backgrounds on ocasion.
- you repeat steps more times for saving an image with different aspects and sizes

Usage:
1. load library
Code:
$this->load->library('md_image');

2. crop image to desired ratio (defaults to 4:3)
Code:
$new_img = $this->md_image->crop_to_ratio('path/to/source.jpg', $source_width, $source_height);
optionally you can specify different ratio and / or specify a target image (by default source gets replaced)
Code:
$new_img = $this->md_image->crop_to_ratio('path/to/source.jpg', $source_width, $source_height,16,9,'path/to/target.jpg');
No worries if source is portrait - the ratio will be applied on the long side

3. resize cropped image
Code:
$this->md_image->resize_image('path/to/source.jpg',$desired_width,$desired_height,'path/to/target.jpg');
again - target is optional, if not specified source will be replaced

for example you can use in step 2 the default ratio of 4:3 and specify desired_with = 600 / desired_height = 450 in step 3

I tested this both in both local and production environments and it works great.
Cropping function will work no matter what image size it gets (although really large sizes might get GD2 messed up) but be careful with resize - it might give you the black frames problem if you will try to resize from small to large.

I hope this will help somebody out there.
#2

[eluser]MihaiD[/eluser]
And here is the library:
Code:
<?php if ( ! defined('BASEPATH')) exit('no direct scripting allowed');

/**
* MD Image - manipulation class
*
* Crop to ratio and resize images
*
* @package        CodeIgniter
* @category    Libraries
* @version        1.0  -  24/06/2009
* @author        Mihai Dimofti (http://sumi-edesign.ro)
*/

class Md_image
{
    
    /**
    * Constructor
    */
    
    function Md_image()
    {
        $this->ci =& get_instance();
        $this->ci->load->library('image_lib');
    }
    
    /*******************************************************************************
    *    Usage:    1. copy in libraries folder
    *            
    *            2. load libray in your controller or model
    *                $this->load->library('md_image');
    *            
    *            3. use it to get a new image:
    *                $new_img = $this->md_image->crop_to_ratio(-- see above args --);
    *            
    *            4. check if $new_img isset
    *                now you have $new_img['width'] & $new_img['height'] to use
    *                for further manipulation in your script
    *
    *            5. optionally you can use second function to resize and copy
    *                $this->md_image->resize_image($source, 600, 450, $path)
    *
    *        Note: for above usage example I used default ratio of 4:3
    *                therefore target image uses 600px x 450px which is 4:3
    *                both functions return FALSE if something goes wrong
    *
    *******************************************************************************/
    
    /**
     * Get source image and crop to desired ratio
     *
     * @access public
     * @param string    $source    : source image (must be path relative to base_url)
     * @param numeric    $width : source image width in px
     * @param numeric    $height : source image height in px
     * @param numeric    $x : long side ratio element - defaults to 4 (as in 4:3)
     * @param numeric    $y : short side ratio element - defaults to 3 (as in 4:3)
     * @param string    $dest : destination (path relative to base_url)  - if not set source will be replaced
     * @return
     */
    
    function crop_to_ratio($source, $width, $height, $x = 4, $y = 3, $dest = FALSE)
    {
    
    // uncomment this line if you need to specify library
    //    $config['image_library'] = 'gd2';
    
        $config['source_image']    = $source;
        $config['maintain_ratio'] = FALSE;
        if($dest)
        {
            $config['new_image'] = $dest;
        }
        
        $result = array();
        
        if($width < $height) // check if source is portrait
        {
            $long = $height;
            $short = $width;
            $xa = 'y';
            $ya = 'x';
            $long_side = 'height';
            $short_side = 'width';
        }
        else // source is square or landscape
        {
            $long = $width;
            $short = $height;
            $xa = 'x';
            $ya = 'y';
            $long_side = 'width';
            $short_side = 'height';
        }
        
        
        if($long != (($short * $x) / $y))
        {
            // get crop axis
            if(($long / $short) > ($x / $y)) // cut from long axis
            {
                $new_long = ($short * $x) / $y;
                $dif = $long - $new_long;
                $config[$xa.'_axis'] = $dif / 2;
                $config[$ya.'_axis'] = 0;
                $config[$long_side] = $new_long + ($dif / 2);
                $config[$short_side] = $short;
                $result[$long_side] = $new_long;
                $result[$short_side] = $short;
            }
            else // cut from short axis
            {
                $new_short = ($long * $y) / $x;
                $dif = $short - $new_short;
                $config[$ya.'_axis'] = $dif / 2;
                $config[$xa.'_axis'] = 0;
                $config[$long_side] = $long;
                $config[$short_side] = $new_short + ($dif / 2);
                $result[$long_side] = $long;
                $result[$short_side] = $new_short;
            }
        }
        else // this builds return in case source is allready in desired ratio
        {
            $result['width'] = $width;
            $result['height'] = $height;
            return $result;
        }
        
        $this->ci->image_lib->initialize($config);
        if( ! $this->ci->image_lib->crop())
        {
            $this->ci->image_lib->clear();
            return FALSE;
        }
        else
        {
            $this->ci->image_lib->clear();
            return $result;
        }
        
    }
    
    /**
     * Get source image and resize to desired dimensions
     *
     * @access public
     * @param string    $source    : source image (must be path relative to base_url)
     * @param numeric    $width : target image width in px
     * @param numeric    $height : target image height in px
     * @param string    $dest : destination (path relative to base_url)  - if not set source will be replaced
     * @return
     */
    
    function resize_image($source, $width, $height, $dest = FALSE)
    {
        $config['source_image']    = $source;
        if($dest)
        {
            $config['new_image'] = $dest;
        }
        
        $config['width'] = $width;
        $config['height'] = $height;
        
        $this->ci->image_lib->initialize($config);
        if( ! $this->ci->image_lib->resize())
        {
            $this->ci->image_lib->clear();
            return FALSE;
        }
        else
        {
            $this->ci->image_lib->clear();
            return TRUE;
        }
    }
}
#3

[eluser]thisizmonster[/eluser]
How can I get $source_width, $source_height value from GroceryCRUD file upload?
#4

[eluser]quickshiftin[/eluser]
Nice work!




Theme © iAndrew 2016 - Forum software by © MyBB