Introduction to Imagine
Upcoming SlideShare
Loading in...5
×
 

Introduction to Imagine

on

  • 27,984 views

Image processing in PHP is hard, but now we have Imagine, inspired by Python PIL, made for PHP 5.3, this image manipulation library will meet all your needs

Image processing in PHP is hard, but now we have Imagine, inspired by Python PIL, made for PHP 5.3, this image manipulation library will meet all your needs

Statistics

Views

Total Views
27,984
Views on SlideShare
26,409
Embed Views
1,575

Actions

Likes
33
Downloads
193
Comments
5

16 Embeds 1,575

http://wirtuals.pl 1360
http://tipshare.info 125
http://www.tipshare.info 35
http://www.forum.wirtuals.net 24
https://www.linkedin.com 8
url_unknown 4
http://www.mashme.tv 3
http://forum.wirtuals.net 3
http://www.copyscape.com 2
http://forum.wirtuals.pl 2
http://webcache.googleusercontent.com 2
http://www.gallery.wirtuals.net 2
http://twitter.com 2
http://a0.twimg.com 1
http://www.qiun.wirtuals.net 1
http://paper.li 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to Imagine Introduction to Imagine Presentation Transcript

  • 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);
  • Reflection
  • 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() ->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 + 1), new ImagineColor(000, 100) ); $reflection = $logo->copy() ->flipVertically()open image to reflect 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);
  • 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()make a copy of source, flipped 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);
  • 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) );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);
  • 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)); 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);
  • 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()place original logo on top of created canvas ->flipVertically() ->applyMask( place reflection 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, define 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
  • Reflection filterclass 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 ) ) )); }}
  • Reflection filter$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 filter
  • 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 filters (reflection, rounded corners, etc.)• Add effects (twirl, blur, sharpen, etc.)
  • Imagineimage processing reloaded https://github.com/avalanche123/Imagine