Introduction to Imagine

Introduction to Imagine image processing for PHP 5.3+ http://goo.gl/T994G

Image processing in PHP is hard

Existing tools• GD• Imagick (ImageMagick extension)• Gmagick (GraphicsMagick extension)• Cairo

$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 GD

$width = //target width$height = //target height$image = new Imagick(/path/to/image.png);$image->adaptiveResizeImage($width, $height);$image->writeImage(/path/to/resized/image.png); Resize in Imagick

Existing tools• not testable• inconsistent• cluttered apis• not intuitive

Existing tools don’t cut it

Imagine...• all drivers implemented the same interfaces• you could write code once, use with many drivers• there were interfaces for mocking in tests• API was simple and intuitive

Imagine for PHP 5.3+ stop imagining, its all there

Imagine for PHP 5.3+ Inspired by Python’s PIL http://www.pythonware.com/products/pil/

$width = //target width $height = //target height $imagine = new ImagineGdImagine(); $imagine->open(/path/to/image.png) ->resize(new ImagineBox($width, $height)) ->save(/path/to/resized/image.png);Resize in Imagine (GD)

$width = //target width $height = //target height $imagine = new ImagineImagickImagine(); $imagine->open(/path/to/image.png) ->resize(new ImagineBox($width, $height)) ->save(/path/to/resized/image.png);Resize in Imagine (Imagick)

Consistency1. identify low level operations2. split them into logical groups3. provide implementation for each driver

Operations• resize • ellipse• rotate • polygon• crop • line• save • dot• copy • arc• paste • pie slice• apply mask • text

Operations • resize • ellipse • rotate • polygon • crop • line • save • dot • copy • arc • paste • pie slice • apply mask • textmanipulations

Operations• resize • ellipse• rotate • polygon• crop • line• save • dot• copy • arc• paste • pie slice• apply mask • text drawings

Example

Thumbnail

Thumbnail$imagine = new ImagineGdImagine();$mode = ImagineImageInterface::THUMBNAIL_OUTBOUND;//or$mode = ImagineImageInterface::THUMBNAIL_INSET;$imagine->open(/path/to/google/logo.png) ->thumbnail(new ImagineBox(100, 100), $mode) ->save(/path/to/google/logo/thumbnail.png);

Reﬂection

Reﬂection$imagine = new ImagineGdImagine();$logo = $imagine->open(/path/to/google/logo.png);$size = $logo->getSize();$canvas = $imagine->create( new ImagineBox($size->getWidth(), $size->getHeight() * 2), new ImagineColor(000, 100));$reflection = $logo->copy() ->flipVertically() ->applyMask( $imagine->create($size) ->fill( new ImagineFillGradientVertical( $size->getHeight(), new ImagineColor(array(127, 127, 127)), new ImagineColor(fff) ) ) );$canvas->paste($logo, new ImaginePoint(0, 0)) ->paste($reflection, new ImaginePoint(0, $size->getHeight())) ->save(/path/to/google/logo/reflection.png);

Reﬂection $imagine = new ImagineGdImagine(); $logo = $imagine->open(/path/to/google/logo.png); $size = $logo->getSize(); $canvas = $imagine->create( new ImagineBox($size->getWidth(), $size->getHeight() * 2 + 1), new ImagineColor(000, 100) ); $reflection = $logo->copy() ->flipVertically()open image to reﬂect and remember its size ->applyMask( $imagine->create($size) ->fill( new ImagineFillGradientVertical( $size->getHeight(), new ImagineColor(array(127, 127, 127)), new ImagineColor(fff) ) ) ); $canvas->paste($logo, new ImaginePoint(0, 0)) ->paste($reflection, new ImaginePoint(0, $size->getHeight())) ->save(/path/to/google/logo/reflection.png);

Reflection $imagine = new ImagineGdImagine(); $logo = $imagine->open(/path/to/google/logo.png); $size = $logo->getSize(); $canvas = $imagine->create( new ImagineBox($size->getWidth(), $size->getHeight() * 2), new ImagineColor(000, 100) ); $reflection = $logo->copy() ->flipVertically()create empty canvas to fit image and reflection ->applyMask( $imagine->create($size) ->fill( new ImagineFillGradientVertical( $size->getHeight(), new ImagineColor(array(127, 127, 127)), new ImagineColor(fff) ) ) ); $canvas->paste($logo, new ImaginePoint(0, 0)) ->paste($reflection, new ImaginePoint(0, $size->getHeight())) ->save(/path/to/google/logo/reflection.png);

Reﬂection $imagine = new ImagineGdImagine(); $logo = $imagine->open(/path/to/google/logo.png); $size = $logo->getSize(); $canvas = $imagine->create( new ImagineBox($size->getWidth(), $size->getHeight() * 2), new ImagineColor(000, 100) ); $reflection = $logo->copy() ->flipVertically()make a copy of source, ﬂipped vertically ->applyMask( $imagine->create($size) ->fill( new ImagineFillGradientVertical( $size->getHeight(), new ImagineColor(array(127, 127, 127)), new ImagineColor(fff) ) ) ); $canvas->paste($logo, new ImaginePoint(0, 0)) ->paste($reflection, new ImaginePoint(0, $size->getHeight())) ->save(/path/to/google/logo/reflection.png);

Reﬂection $imagine = new ImagineGdImagine(); $logo = $imagine->open(/path/to/google/logo.png); $size = $logo->getSize(); $canvas = $imagine->create( new ImagineBox($size->getWidth(), $size->getHeight() * 2), new ImagineColor(000, 100) );replace white regions with transparency $reflection = $logo->copy() ->flipVertically() ->applyMask( $imagine->create($size) ->fill( new ImagineFillGradientVertical( $size->getHeight(), new ImagineColor(array(127, 127, 127)), new ImagineColor(fff) ) ) ); $canvas->paste($logo, new ImaginePoint(0, 0)) ->paste($reflection, new ImaginePoint(0, $size->getHeight())) ->save(/path/to/google/logo/reflection.png);

Reﬂection$imagine = new ImagineGdImagine();$logo = $imagine->open(/path/to/google/logo.png);$size = $logo->getSize();$canvas = $imagine->create( new ImagineBox($size->getWidth(), $size->getHeight() * 2), new ImagineColor(000, 100)); create image like the one above$reflection = $logo->copy() ->flipVertically() ->applyMask( $imagine->create($size) ->fill( new ImagineFillGradientVertical( $size->getHeight(), new ImagineColor(array(127, 127, 127)), new ImagineColor(fff) ) ) );$canvas->paste($logo, new ImaginePoint(0, 0)) ->paste($reflection, new ImaginePoint(0, $size->getHeight())) ->save(/path/to/google/logo/reflection.png);

Reﬂection $imagine = new ImagineGdImagine(); $logo = $imagine->open(/path/to/google/logo.png); $size = $logo->getSize(); $canvas = $imagine->create( new ImagineBox($size->getWidth(), $size->getHeight() * 2), new ImagineColor(000, 100) ); $reflection = $logo->copy()place original logo on top of created canvas ->flipVertically() ->applyMask( place reﬂection underneath it $imagine->create($size) ->fill( new ImagineFillGradientVertical( $size->getHeight(), new ImagineColor(array(127, 127, 127)), new ImagineColor(fff) ) ) ); $canvas->paste($logo, new ImaginePoint(0, 0)) ->paste($reflection, new ImaginePoint(0, $size->getHeight())) ->save(/path/to/google/logo/reflection.png);

Piechart

$imagine = Piechart new ImagineImagickImagine();$volume = 20;$size = new ImagineBox(300, 200);$center = new ImaginePointCenter($size);$canvas = $size->increase($volume);$bg = new ImagineColor(000000, 100);$color1 = new ImagineColor(FFEF78);$color2 = new ImagineColor(8A834B);$color3 = new ImagineColor(8A554B);$color4 = new ImagineColor(D94616);$color5 = new ImagineColor(FEB48D);$chart = $imagine->create($canvas, $bg);for ($i = $volume; $i > 0; $i--) { $shift = new ImaginePoint($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 = Piechart new ImagineImagickImagine(); $volume = 20; $size = new ImagineBox(300, 200); $center = new ImaginePointCenter($size); $canvas = $size->increase($volume); $bg = new ImagineColor(000000, 100); $color1 = new ImagineColor(FFEF78); $color2 = new ImagineColor(8A834B); $color3 = new ImagineColor(8A554B); $color4 = new ImagineColor(D94616); $color5 = new ImagineColor(FEB48D); $chart = $imagine->create($canvas, $bg); for ($i = $volume; $i > 0; $i--) { $shift = new ImaginePoint($center->getX() + $i, $center->getY() + $i);get imagine, deﬁne chart 3d volume and size $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 = Piechart new ImagineImagickImagine(); $volume = 20; $size = new ImagineBox(300, 200); $center = new ImaginePointCenter($size); $canvas = $size->increase($volume); $bg = new ImagineColor(000000, 100); $color1 = new ImagineColor(FFEF78); $color2 = new ImagineColor(8A834B); $color3 = new ImagineColor(8A554B); $color4 = new ImagineColor(D94616); $color5 = new ImagineColor(FEB48D); $chart = $imagine->create($canvas, $bg); get center of the chart for ($i = $volume; $i > 0; $i--) { $shift = new ImaginePoint($center->getX() + $i, $center->getY() + $i);account for size of 3d volume in canvas $chart->draw() ->pieSlice($shift, ->pieSlice($shift, $size, $size, -10, 70, $color1->darken(68), true) 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 = Piechart new ImagineImagickImagine();$volume = 20;$size = new ImagineBox(300, 200);$center = new ImaginePointCenter($size);$canvas = $size->increase($volume);$bg = new ImagineColor(000000, 100);$color1 = new ImagineColor(FFEF78);$color2 = new ImagineColor(8A834B);$color3 = new ImagineColor(8A554B);$color4 = new ImagineColor(D94616);$color5 = new ImagineColor(FEB48D);$chart = $imagine->create($canvas, $bg);for ($i = $volume; $i > 0; $i--) { $shift = new ImaginePoint($center->getX() + $i, $center->getY() + $i);colors of pie slices and background $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); http://www.colourlovers.com/palette/1472972/jeniffer123@yahoo$chart->save(/path/to/chart.png);

$imagine = Piechart new ImagineImagickImagine(); $volume = 20; $size = new ImagineBox(300, 200); $center = new ImaginePointCenter($size); $canvas = $size->increase($volume); $bg = new ImagineColor(000000, 100); $color1 = new ImagineColor(FFEF78); $color2 = new ImagineColor(8A834B); $color3 = new ImagineColor(8A554B); $color4 = new ImagineColor(D94616); $color5 = new ImagineColor(FEB48D); $chart = $imagine->create($canvas, $bg); for ($i = $volume; $i > 0; $i--) { $shift = new ImaginePoint($center->getX() + $i, $center->getY() + $i);create chart canvas with transparent background $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 = Piechart new ImagineImagickImagine(); $volume = 20; $size = new ImagineBox(300, 200); $center = new ImaginePointCenter($size); $canvas = $size->increase($volume); $bg = new ImagineColor(000000, 100); $color1 = new ImagineColor(FFEF78); $color2 = new ImagineColor(8A834B); $color3 = new ImagineColor(8A554B); $color4 = new ImagineColor(D94616); $color5 = new ImagineColor(FEB48D);build 3d shade of the chart in darker colors $chart = $imagine->create($canvas, $bg); for ($i = $volume; $i > 0; $i--) { $shift = new ImaginePoint($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 = Piechart new ImagineImagickImagine();$volume = 20;$size = new ImagineBox(300, 200);$center = new ImaginePointCenter($size);$canvas = $size->increase($volume);$bg = new ImagineColor(000000, 100);$color1 = new ImagineColor(FFEF78);$color2 = new ImagineColor(8A834B);$color3 = new ImagineColor(8A554B);$color4 = new ImagineColor(D94616);$color5 = new ImagineColor(FEB48D);$chart = $imagine->create($canvas, $bg);for ($i = $volume; $i > 0; $i--) { $shift = new ImaginePoint($center->getX() + $i, $center->getY() + $i); draw and save the actual chart $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);

Simplify1. use value objects to group related parameters2. make those objects smart, to remove repeated code

Color$color = new ImagineColor(fff);$color->darken(127);$color->dissolve(50);$color->darken(68)->dissolve(50);

Box$box = new ImagineBox(100, 100);$box->scale(2);$box->increase(25);

Point$point = new ImaginePoint(50, 50);

Make it testable1. provide interfaces that interact with end user code2. close unexpected inheritance

Filters

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

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

Reﬂection ﬁlterclass ReflectionFilter implements ImagineFilterFilterInterface{ private $imagine; public function __construct(ImagineImagineInterface $imagine) { $this->imagine = $imagine; } public function apply(ImagineImageInterface $image) { $size = $image->getSize(); $white = new ImagineColor(fff); $canvas = new ImagineBox($size->getWidth(), $size->getHeight() * 2); return $this->imagine->create($canvas) ->paste($image, new ImaginePoint(0, 0)) ->paste($logo->copy() ->flipVertically() ->applyMask($this->imagine->create($size) ->fill( new ImagineFillGradientVertical( $size->getHeight(), $white->darken(127), $white ) ) )); }}

Reﬂection ﬁlter$imagine = new ImagineGdImagine();$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 ﬁlter

Transformation $path = /path/to/processed/image.png; $size = new ImagineBox(50, 50); $resize = new ImagineBox(200, 200); $angle = 90; $background = new ImagineColor(fff); $transformation = new ImagineFilterTransformation(); $transformation->resize($resize) ->copy() ->rotate($angle, $background) ->thumbnail($size, 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

Transformationforeach(glob(/path/to/many/images/*.png) as $path) { $transformation->apply($imagine->open($path)) ->save(/path/to/processed/image/.md5($path)..png);} Or even batch process...

What’s next?• Implement charting API (piecharts, bar- charts, linear graphs)• Add advanced ﬁlters (reﬂection, rounded corners, etc.)• Add effects (twirl, blur, sharpen, etc.)

Imagineimage processing reloaded https://github.com/avalanche123/Imagine

http://wirtuals.pl	1296
http://tipshare.info	91
http://www.forum.wirtuals.net	24
url_unknown	4
http://forum.wirtuals.net	3
http://www.tipshare.info	3
http://www.copyscape.com	2
http://forum.wirtuals.pl	2
http://twitter.com	2
http://webcache.googleusercontent.com	2
http://www.gallery.wirtuals.net	2
http://paper.li	1
http://a0.twimg.com	1
http://www.qiun.wirtuals.net	1

Introduction to Imagine

by Bulat Shakirzyanov on Feb 27, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

14 Embeds 1,434

Statistics

Introduction to Imagine — Presentation Transcript