introduction to imagine

Introduction to Imagineimage processing for PHP 5.3+

http://goo.gl/T994G

Saturday, March 5, 2011

http://goo.gl/T994G

http://goo.gl/T994G

Image processing in PHP is hard


There are many existing tools

• GD

• Imagick (ImageMagick extension)

• Gmagick (GraphicsMagick extension)

• Cairo

http://www.imagemagick.org/

http://www.graphicsmagick.org/






• not testable

• inconsistent

• cluttered apis

• not intuitive

Existing tools are


Resize in GD

$width = //target width$height = //target height

$src = imagecreatefrompng('/path/to/image.png');

$dest = imagecreatetruecolor($width, $height);

imagealphablending($dest, false);imagesavealpha($dest, true);

imagecopyresampled($dest, $src, 0, 0, 0, 0, $width, $height, imagesx($src), imagesy($src));imagepng($dest,'/path/to/resized/image.png');


Resize in Imagick


$image = new Imagick('/path/to/image.png');

$image->adaptiveResizeImage($width, $height);$image->writeImage('/path/to/resized/image.png');


Existing tools

don’t cut it


Imagine...

• all drivers implemented the same interfaces

• code could be reused with any driver

• there were interfaces for mocking in tests

• API was simple and intuitive


STOP


Imagine for PHP 5.3+

stop imagining, it is all there


Imagine for PHP 5.3+

Inspired by Python’s PIL

http://www.pythonware.com/products/pil/




Resize in Imagine (GD)


$imagine = new Imagine\Gd\Imagine();

$imagine->open('/path/to/image.png') ->resize(new Imagine\Box($width, $height)) ->save('/path/to/resized/image.png');


Resize in Imagine (Imagick)


$imagine = new Imagine\Imagick\Imagine();

$imagine->open('/path/to/image.png') ->resize(new Imagine\Box($width, $height)) ->save('/path/to/resized/image.png');


Consistency

1. identify operations

2. split into groups

3. implement per driver


Operations

• resize

• rotate

• crop

• save

• copy

• paste

• apply mask

• ellipse

• polygon

• line

• dot

• arc

• pie slice

• text


manipulations

Operations

• resize

• rotate

• crop

• save

• copy

• paste

• apply mask

• ellipse

• polygon

• line

• dot

• arc

• pie slice

• text


• resize

• rotate

• crop

• save

• copy

• paste

• apply mask

• ellipse

• polygon

• line

• dot

• arc

• pie slice

• text

drawings

Operations


Example


Thumbnail


Thumbnail


$mode = Imagine\ImageInterface::THUMBNAIL_OUTBOUND;//or$mode = Imagine\ImageInterface::THUMBNAIL_INSET;

$imagine->open('/path/to/google/logo.png') ->thumbnail(new Imagine\Box(100, 100), $mode) ->save('/path/to/google/logo/thumbnail.png');


Reflection


Reflection$imagine = new Imagine\Gd\Imagine();

$logo = $imagine->open('/path/to/google/logo.png');$size = $logo->getSize();

$canvas = $imagine->create( new Imagine\Box($size->getWidth(), $size->getHeight() * 2), new Imagine\Color('000', 100));

$reflection = $logo->copy() ->flipVertically() ->applyMask( $imagine->create($size) ->fill( new Imagine\Fill\Gradient\Vertical( $size->getHeight(), new Imagine\Color(array(127, 127, 127)), new Imagine\Color('fff') ) ) );

$canvas->paste($logo, new Imagine\Point(0, 0)) ->paste($reflection, new Imagine\Point(0, $size->getHeight())) ->save('/path/to/google/logo/reflection.png');




$canvas = $imagine->create( new Imagine\Box($size->getWidth(), $size->getHeight() * 2 + 1), new Imagine\Color('000', 100));



open image to reflect and remember its size


Reflection








create empty canvas to fit image and reflection

Reflection







$reflection = $logo->copy() ->flipVertically()

make a copy of source, flipped vertically

Reflection







->applyMask(

);

replace white regions with transparency

Reflection







$imagine->create($size) ->fill( new Imagine\Fill\Gradient\Vertical( $size->getHeight(), new Imagine\Color(array(127, 127, 127)), new Imagine\Color('fff') ) )

create image like the one above

Reflection








place original logo on top of created canvasplace reflection underneath it

Reflection


Piechart


Piechart$imagine = new Imagine\Imagick\Imagine();$volume = 20;$size = new Imagine\Box(300, 200);$center = new Imagine\Point\Center($size);$canvas = $size->increase($volume);$bg = new Imagine\Color('000000', 100);$color1 = new Imagine\Color('FFEF78');$color2 = new Imagine\Color('8A834B');$color3 = new Imagine\Color('8A554B');$color4 = new Imagine\Color('D94616');$color5 = new Imagine\Color('FEB48D');

$chart = $imagine->create($canvas, $bg);

for ($i = $volume; $i > 0; $i--) { $shift = new Imagine\Point($center->getX() + $i, $center->getY() + $i);

$chart->draw() ->pieSlice($shift, $size, -10, 70, $color1->darken(68), true) ->pieSlice($shift, $size, 70, 160, $color2->darken(68), true) ->pieSlice($shift, $size, 160, 170, $color3->darken(68), true) ->pieSlice($shift, $size, 170, 210, $color4->darken(68), true) ->pieSlice($shift, $size, 210, 350, $color5->darken(68), true);}

$chart->draw() ->pieSlice($center, $size, -10, 70, $color1, true) ->pieSlice($center, $size, 70, 160, $color2, true) ->pieSlice($center, $size, 160, 170, $color3, true) ->pieSlice($center, $size, 170, 210, $color4, true) ->pieSlice($center, $size, 210, 350, $color5, true);

$chart->save('/path/to/chart.png');








$imagine = new Imagine\Imagick\Imagine();$volume = 20;$size = new Imagine\Box(300, 200);

get imagine, define chart 3d volume and size








$center = new Imagine\Point\Center($size);$canvas = $size->increase($volume);

get center of the chartaccount for size of 3d volume in canvas








$bg = new Imagine\Color('000000', 100);$color1 = new Imagine\Color('FFEF78');$color2 = new Imagine\Color('8A834B');$color3 = new Imagine\Color('8A554B');$color4 = new Imagine\Color('D94616');$color5 = new Imagine\Color('FEB48D');

colors of pie slices and background

http://www.colourlovers.com/palette/1472972/jeniffer123@yahoo











create chart canvas with transparent background










build 3d shade of the chart in darker colors










draw and save the actual chart


Simplify

1. use value objects

2. make ‘em smart


Color

$color = new Imagine\Color('fff');

$color->darken(127);

$color->dissolve(50);

$color->darken(68)->dissolve(50);


Box$box = new Imagine\Box(100, 100);

$box->scale(2);

$box->increase(25);

100

100

200

200

125

125


Point

$point = new Imagine\Point(50, 50);


Make it testable

1. interface end user code interactions

2. close unexpected inheritance


Filters


Filternamespace Imagine\Filter;

use Imagine\ImageInterface;

interface FilterInterface{ /** * Applies scheduled transformation to ImageInterface instance * Returns processed ImageInterface instance * * @param Imagine\ImageInterface $image * * @return Imagine\ImageInterface */ function apply(ImageInterface $image);}


Filters

Filter is a collection of manipulations, calculations and other operations, that can be applied to an image


Reflection filterclass ReflectionFilter implements Imagine\Filter\FilterInterface{ private $imagine;

public function __construct(Imagine\ImagineInterface $imagine) { $this->imagine = $imagine; } public function apply(Imagine\ImageInterface $image) { $size = $image->getSize(); $white = new Imagine\Color('fff'); $canvas = new Imagine\Box($size->getWidth(), $size->getHeight() * 2); return $this->imagine->create($canvas) ->paste($image, new Imagine\Point(0, 0)) ->paste($logo->copy() ->flipVertically() ->applyMask($this->imagine->create($size) ->fill( new Imagine\Fill\Gradient\Vertical( $size->getHeight(), $white->darken(127), $white ) ) )); }}


Reflection filter


$filter = new ReflectionFilter($imagine);

$filter->apply($imagine->open('/path/to/google/logo.png')) ->save('/path/to/google/logo/reflection.png');


TransformationDelayed image processing using a filter


Transformation$path = '/path/to/processed/image.png';$size = new Imagine\Box(50, 50);$resize = new Imagine\Box(200, 200);$angle = 90;$background = new Imagine\Color('fff');

$transformation = new Imagine\Filter\Transformation();

$transformation->resize($resize) ->copy() ->rotate($angle, $background) ->thumbnail($size, Imagine\ImageInterface::THUMBNAIL_INSET) ->save($path);

operate on a transformation as on a regular image, except nothing is being executed


Transformation

$transformation->apply($imagine->open('/path/to/source/image.png'));

Apply them when you’re ready


Transformation

Or even batch process...

foreach(glob('/path/to/many/images/*.png') as $path) { $transformation->apply($imagine->open($path)) ->save('/path/to/processed/image/'.md5($path).'.png');}


Imagine and Symfony2


Integration

1. configure

2. use in templates

3. profit


Configure

avalanche_imagine: web_root: %kernel.root_dir%/../web driver: gd filters: preview: type: thumbnail options: { size: [100, 50], mode: outbound }


Templates

<img src="{{ user.photo|apply_filter('preview') }}" alt="avatar" />

<img src="<?php echo $view['imagine']->filter($user->getPhoto(), 'preview') ?>" alt="avatar" />

Twig

PHP


Process

<img src="/imagine/preview/users/1/photo.jpg" alt="avatar" />

first request processes image and outputs response

other controller requests result in a 301 redirect to file


Summary


To be improved

• advanced operations are still not easy

• not all drivers are supported

• Imagick

• GD

• Gmagick

• library is very young, there might be issues


Was improved

• thumbnails are easy

• code is readable

• foundation is solid

• its available today

• its gonna be great


What’s next?

• Documentation

• Implement charting API (piecharts, bar-charts, linear graphs)

• Add advanced filters (reflection, rounded corners, etc.)

• Add effects (twirl, blur, sharpen, etc.)


Imagineimage processing reloaded

https://github.com/avalanche123/Imagine




introduction to imagine

Technology

new imaginepoint0

new imaginegdimagine

new imaginecolorfff

new imaginecolorarray127

new imaginecolor000

new imagineimagickimagine

target width

target height