Introduction to Imagine
-
Upload
bulat-shakirzyanov -
Category
Technology
-
view
30.514 -
download
0
description
Transcript of Introduction to Imagine
![Page 1: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/1.jpg)
Introduction to Imagineimage processing for PHP 5.3+
http://goo.gl/T994G
Saturday, March 5, 2011
![Page 2: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/2.jpg)
Image processing in PHP is hard
Saturday, March 5, 2011
![Page 3: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/3.jpg)
There are many existing tools
• GD
• Imagick (ImageMagick extension)
• Gmagick (GraphicsMagick extension)
• Cairo
http://www.imagemagick.org/
http://www.graphicsmagick.org/
Saturday, March 5, 2011
![Page 4: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/4.jpg)
• not testable
• inconsistent
• cluttered apis
• not intuitive
Existing tools are
Saturday, March 5, 2011
![Page 5: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/5.jpg)
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');
Saturday, March 5, 2011
![Page 6: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/6.jpg)
Resize in Imagick
$width = //target width$height = //target height
$image = new Imagick('/path/to/image.png');
$image->adaptiveResizeImage($width, $height);$image->writeImage('/path/to/resized/image.png');
Saturday, March 5, 2011
![Page 7: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/7.jpg)
Existing tools
don’t cut it
Saturday, March 5, 2011
![Page 8: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/8.jpg)
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
Saturday, March 5, 2011
![Page 9: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/9.jpg)
STOP
Saturday, March 5, 2011
![Page 10: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/10.jpg)
Imagine for PHP 5.3+
stop imagining, it is all there
Saturday, March 5, 2011
![Page 11: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/11.jpg)
Imagine for PHP 5.3+
Inspired by Python’s PIL
http://www.pythonware.com/products/pil/
Saturday, March 5, 2011
![Page 12: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/12.jpg)
Resize in Imagine (GD)
$width = //target width$height = //target height
$imagine = new Imagine\Gd\Imagine();
$imagine->open('/path/to/image.png') ->resize(new Imagine\Box($width, $height)) ->save('/path/to/resized/image.png');
Saturday, March 5, 2011
![Page 13: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/13.jpg)
Resize in Imagine (Imagick)
$width = //target width$height = //target height
$imagine = new Imagine\Imagick\Imagine();
$imagine->open('/path/to/image.png') ->resize(new Imagine\Box($width, $height)) ->save('/path/to/resized/image.png');
Saturday, March 5, 2011
![Page 14: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/14.jpg)
Consistency
1. identify operations
2. split into groups
3. implement per driver
Saturday, March 5, 2011
![Page 15: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/15.jpg)
Operations
• resize
• rotate
• crop
• save
• copy
• paste
• apply mask
• ellipse
• polygon
• line
• dot
• arc
• pie slice
• text
Saturday, March 5, 2011
![Page 16: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/16.jpg)
manipulations
Operations
• resize
• rotate
• crop
• save
• copy
• paste
• apply mask
• ellipse
• polygon
• line
• dot
• arc
• pie slice
• text
Saturday, March 5, 2011
![Page 17: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/17.jpg)
manipulations
Operations
• resize
• rotate
• crop
• save
• copy
• paste
• apply mask
• ellipse
• polygon
• line
• dot
• arc
• pie slice
• text
Saturday, March 5, 2011
![Page 18: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/18.jpg)
• resize
• rotate
• crop
• save
• copy
• paste
• apply mask
• ellipse
• polygon
• line
• dot
• arc
• pie slice
• text
drawings
Operations
Saturday, March 5, 2011
![Page 19: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/19.jpg)
• resize
• rotate
• crop
• save
• copy
• paste
• apply mask
• ellipse
• polygon
• line
• dot
• arc
• pie slice
• text
drawings
Operations
Saturday, March 5, 2011
![Page 20: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/20.jpg)
Example
Saturday, March 5, 2011
![Page 21: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/21.jpg)
Thumbnail
Saturday, March 5, 2011
![Page 22: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/22.jpg)
Thumbnail
$imagine = new Imagine\Gd\Imagine();
$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');
Saturday, March 5, 2011
![Page 23: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/23.jpg)
Reflection
Saturday, March 5, 2011
![Page 24: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/24.jpg)
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');
Saturday, March 5, 2011
![Page 25: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/25.jpg)
$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 + 1), 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');
open image to reflect and remember its size
$logo = $imagine->open('/path/to/google/logo.png');$size = $logo->getSize();
Reflection
Saturday, March 5, 2011
![Page 26: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/26.jpg)
$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), new Imagine\Color('000', 100));
create empty canvas to fit image and reflection
Reflection
Saturday, March 5, 2011
![Page 27: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/27.jpg)
$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');
$reflection = $logo->copy() ->flipVertically()
make a copy of source, flipped vertically
Reflection
Saturday, March 5, 2011
![Page 28: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/28.jpg)
$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');
->applyMask(
);
replace white regions with transparency
Reflection
Saturday, March 5, 2011
![Page 29: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/29.jpg)
$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');
$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
Saturday, March 5, 2011
![Page 30: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/30.jpg)
$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->paste($logo, new Imagine\Point(0, 0)) ->paste($reflection, new Imagine\Point(0, $size->getHeight())) ->save('/path/to/google/logo/reflection.png');
place original logo on top of created canvasplace reflection underneath it
Reflection
Saturday, March 5, 2011
![Page 31: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/31.jpg)
Piechart
Saturday, March 5, 2011
![Page 32: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/32.jpg)
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');
Saturday, March 5, 2011
![Page 33: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/33.jpg)
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
Saturday, March 5, 2011
![Page 34: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/34.jpg)
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');
$center = new Imagine\Point\Center($size);$canvas = $size->increase($volume);
get center of the chartaccount for size of 3d volume in canvas
Saturday, March 5, 2011
![Page 35: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/35.jpg)
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');
$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
Saturday, March 5, 2011
![Page 36: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/36.jpg)
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');
$chart = $imagine->create($canvas, $bg);
create chart canvas with transparent background
Saturday, March 5, 2011
![Page 37: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/37.jpg)
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');
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);}
build 3d shade of the chart in darker colors
Saturday, March 5, 2011
![Page 38: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/38.jpg)
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');
$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');
draw and save the actual chart
Saturday, March 5, 2011
![Page 39: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/39.jpg)
Simplify
1. use value objects
2. make ‘em smart
Saturday, March 5, 2011
![Page 40: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/40.jpg)
Color
$color = new Imagine\Color('fff');
$color->darken(127);
$color->dissolve(50);
$color->darken(68)->dissolve(50);
Saturday, March 5, 2011
![Page 41: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/41.jpg)
Box$box = new Imagine\Box(100, 100);
$box->scale(2);
$box->increase(25);
100
100
200
200
125
125
Saturday, March 5, 2011
![Page 42: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/42.jpg)
Point
$point = new Imagine\Point(50, 50);
Saturday, March 5, 2011
![Page 43: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/43.jpg)
Make it testable
1. interface end user code interactions
2. close unexpected inheritance
Saturday, March 5, 2011
![Page 44: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/44.jpg)
Filters
Saturday, March 5, 2011
![Page 45: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/45.jpg)
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);}
Saturday, March 5, 2011
![Page 46: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/46.jpg)
Filters
Filter is a collection of manipulations, calculations and other operations, that can be applied to an image
Saturday, March 5, 2011
![Page 47: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/47.jpg)
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 ) ) )); }}
Saturday, March 5, 2011
![Page 48: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/48.jpg)
Reflection filter
$imagine = new Imagine\Gd\Imagine();
$filter = new ReflectionFilter($imagine);
$filter->apply($imagine->open('/path/to/google/logo.png')) ->save('/path/to/google/logo/reflection.png');
Saturday, March 5, 2011
![Page 49: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/49.jpg)
TransformationDelayed image processing using a filter
Saturday, March 5, 2011
![Page 50: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/50.jpg)
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
Saturday, March 5, 2011
![Page 51: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/51.jpg)
Transformation
$transformation->apply($imagine->open('/path/to/source/image.png'));
Apply them when you’re ready
Saturday, March 5, 2011
![Page 52: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/52.jpg)
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');}
Saturday, March 5, 2011
![Page 53: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/53.jpg)
Imagine and Symfony2
Saturday, March 5, 2011
![Page 54: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/54.jpg)
Integration
1. configure
2. use in templates
3. profit
Saturday, March 5, 2011
![Page 55: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/55.jpg)
Configure
avalanche_imagine: web_root: %kernel.root_dir%/../web driver: gd filters: preview: type: thumbnail options: { size: [100, 50], mode: outbound }
Saturday, March 5, 2011
![Page 56: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/56.jpg)
Templates
<img src="{{ user.photo|apply_filter('preview') }}" alt="avatar" />
<img src="<?php echo $view['imagine']->filter($user->getPhoto(), 'preview') ?>" alt="avatar" />
Twig
PHP
Saturday, March 5, 2011
![Page 57: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/57.jpg)
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
Saturday, March 5, 2011
![Page 58: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/58.jpg)
Summary
Saturday, March 5, 2011
![Page 59: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/59.jpg)
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
Saturday, March 5, 2011
![Page 60: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/60.jpg)
Was improved
• thumbnails are easy
• code is readable
• foundation is solid
• its available today
• its gonna be great
Saturday, March 5, 2011
![Page 61: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/61.jpg)
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.)
Saturday, March 5, 2011
![Page 62: Introduction to Imagine](https://reader034.fdocuments.net/reader034/viewer/2022051412/54b79a844a795969608b4655/html5/thumbnails/62.jpg)
Imagineimage processing reloaded
https://github.com/avalanche123/Imagine
Saturday, March 5, 2011