Mecha CMS

Mecha CMS blog and documentation.

Class Image

Updated: Sunday, 07 August 2016

Image manipulator.

Info: This class requires GD extension to be installed. Most web hosting providers already have this extension installed, so you don’t need to do anything.

Added since version 1.0.3.

Original

Getting the Image Info

Get the image info from a file.

$info = Image::take('photo.jpg')->inspect();

Results for $info:

$info
 │
 ├── …
 ├── …
 ├── width: 320
 ├── height: 240
 ├── size_raw: 14849
 ├── size: 14.5 KB
 ├── bits: 8
 └── mime: image/jpeg

Optional to output only single part of the generated data:

echo Image::take('photo.jpg')->inspect('mime', 'fallback value');
$info = Image::take('photo.jpg')->inspect();
echo $info['mime'];

Resizing

Resize an Image Proportionally

Image::take('photo.jpg')->resize(200, 200)->saveAs('photo-2.jpg');

Result:

Resize Proportional

Resize an Image Disproportionally

Image::take('photo.jpg')->resize(200, 200, false)->saveAs('photo-2.jpg');

Result:

Resize Disproportional

Cropping

Crop and Resize

Simultaneously cropping and resizing the image to obtain the ideal cropping results:

Image::take('photo.jpg')->crop(72, 72)->saveAs('photo-2.jpg');

Result:

Crop and Resize

Crop without Resize

Cropping without resizing the image. You need to provide X and Y coordinates before width and height:

/**
 * x: 130
 * y: 50
 * width: 100
 * height: 100
 */

Image::take('photo.jpg')->crop(130, 50, 100, 100)->saveAs('photo-2.jpg');

Result:

Crop without Resize

Color Manipulation

Brightness

Increase/decrease the brightness of the image:

Image::take('photo.jpg')->brightness(50)->saveAs('photo-2.jpg');

Result:

Brightness

Contrast

Increase/decrease the contrast of the image:

Image::take('photo.jpg')->contrast(40)->saveAs('photo-2.jpg');

Result:

Contrast

Colorize

Manipulate the color hue of the image using RGBA or hexadecimal color code:

// red, green, blue, alpha
Image::take('photo.jpg')->colorize(255, 10, 20, .4)->saveAs('photo-2.jpg');
// array(red, green, blue, alpha)
Image::take('photo.jpg')->colorize(array(255, 10, 20, .4))->saveAs('photo-2.jpg');
// rgba(red, green, blue, alpha)
Image::take('photo.jpg')->colorize('rgba(255, 10, 20, .4)')->saveAs('photo-2.jpg');
// hex color, alpha
Image::take('photo.jpg')->colorize('#FF0A14', .4)->saveAs('photo-2.jpg');

Result:

Colorize

Grayscale

Create a grayscale image:

Image::take('photo.jpg')->grayscale()->saveAs('photo-2.jpg');

Result:

Grayscale

Negative

Reverse all colors of the image:

Image::take('photo.jpg')->negate()->saveAs('photo-2.jpg');

Result:

Negate

Emboss

Emboss the image:

Image::take('photo.jpg')->emboss(1)->saveAs('photo-2.jpg');

Result:

Emboss

Blurs

Gaussian Blur

Blurs the image using the gaussian blur filter:

Image::take('photo.jpg')->blur(4)->saveAs('photo-2.jpg');

Result:

Blur

Sharpness

Sharpen the image:

Image::take('photo.jpg')->sharpen(1)->saveAs('photo-2.jpg');

Result:

Sharpen

Pixelate

Apply pixelation effect on the image:

Image::take('photo.jpg')->pixelate(2)->saveAs('photo-2.jpg');

Result:

Pixelate Basic

Enable advanced pixelation effect:

Image::take('photo.jpg')->pixelate(2, true)->saveAs('photo-2.jpg');

Result:

Pixelate Advanced

Flipping and Rotating

Flipping an Image

Flip the image using a given mode. Requires PHP 5.5 and above to make this method works properly:

Image::take('photo.jpg')->flip('horizontal')->saveAs('photo-2.jpg');
Image::take('photo.jpg')->flip('vertical')->saveAs('photo-2.jpg');
Image::take('photo.jpg')->flip('both')->saveAs('photo-2.jpg');

Result for horizontal:

Flip

Rotating an Image

Rotate the image with a given angle:

Image::take('photo.jpg')->rotate(45)->saveAs('photo-2.jpg');

Result:

Rotate

Fill the image holes with a solid background color (or transparent and semi-transparent background color for non-JPG/JPEG images):

// angle, array(red, green, blue, alpha)
Image::take('photo.png')->rotate(45, array(53, 92, 152, 1))->saveAs('photo-2.png');
// angle, rgba(red, green, blue, alpha)
Image::take('photo.png')->rotate(45, 'rgba(53, 92, 152, .5)')->saveAs('photo-2.png');
// angle, hex color, alpha
Image::take('photo.png')->rotate(45, '#355C98', .5)->saveAs('photo-2.png');

Image Sprites

Combine multiple images into a single piece of image:

Image::take(array(
    'icon-1.png',
    'icon-2.png',
    'icon-3.png'
))->merge()->saveAs('sprites.png');

Result:

Sprites Vertical

Add distance between the images:

Image::take(array(
    'icon-1.png',
    'icon-2.png',
    'icon-3.png'
))->merge(10)->saveAs('sprites.png');

Result:

Sprites Vertical with Gap

Horizontal image sprites:

Image::take(array(
    'icon-1.png',
    'icon-2.png',
    'icon-3.png'
))->merge(0, 'horizontal')->saveAs('sprites.png');

Result:

Sprites Horizontal

Fill the gap between images with background color:

// gap, direction, array(red, green, blue, alpha)
Image::take( … )->merge(10, 'vertical', array(53, 92, 152, 1))->saveAs('sprites.png');
// gap, direction, rgba(red, green, blue, alpha)
Image::take( … )->merge(10, 'vertical', 'rgba(53, 92, 152, .5)')->saveAs('sprites.png');
// gap, direction, hex color, alpha
Image::take( … )->merge(10, 'vertical', '#355C98', .5)->saveAs('sprites.png');

File Handling

Saving an Image

Change the image format from this into that. Currently only support for GIF, JPG, JPEG and PNG image extensions:

Image::take('photo.png')->saveAs('photo.jpg');

Save the image to another place:

Image::take('photo.png')->saveTo('path/to/photo-2.jpg');
Image::take('photo.png')->saveTo('path/to/directory');

Outputting an Image

Outputs the manipulated image into browser.

What I mean as “output” here is not the same as outputting an image with the Asset::image() method. Here the image will be outputted as the image itself and not as the part of the HTML markup. For example, if you have a PHP file named as image.php with contents like this …

<?php Image::take('photo.jpg')->resize(200, 200)->draw(); ?>

… then you will be able to use that PHP file in the HTML image like this:

<img alt="test" src="image.php">

The code below should be able to give you more ideas:

$data = Request::get();
Image::take('photo.jpg')->resize($data['width'], $data['height'])->draw();
<img alt="test" src="image.php?width=200&amp;height=200">

Note: Since version 1.1.1 you could also output and save the generated image at the same time by defining an image path to it. Useful for generating image cache:

// Draw and save the image output to `path/to/directory` as `saved-image.png`
Image::take('path/to/image.png')->resize(100, 100)->draw('path/to/directory/saved-image.png');

Chaining

All image manipulation methods are chainable. Everything will be stopped if you declare saveTo, saveAs, draw or getInfo method:

Image::take('photo.jpg')
     ->resize(400, 250)
     ->blur(4)
     ->grayscale()
     ->saveAs('photo-2.jpg');
Donation and Email Subscription