Introduction to Imagine

Introduction to Imagine
image processing for PHP 5.3+

http://goo.gl/T994G

Saturday, March 5, 2011

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/


Existing tools are

• not testable
• inconsistent
• cluttered apis
• not intuitive


$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


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

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

Resize in Imagick

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/



$imagine = new ImagineGdImagine();

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

Resize in Imagine (GD)


$imagine = new ImagineImagickImagine();

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

Resize in Imagine (Imagick)

Consistency

1. identify operations
2. split into groups
3. implement per driver


Operations
• resize • ellipse

• rotate • polygon

• crop • line

• save • dot

• copy • arc

• paste • pie slice

• apply mask • text


Operations


• crop • line

• save • dot

• copy • arc



manipulations

Operations


• crop • line

• save • dot

• copy • arc



drawings

Example


Thumbnail


Thumbnail


$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

$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


new ImagineBox($size->getWidth(), $size->getHeight() * 2 + 1),
);

->flipVertically()

open image to reﬂect and remember its size
->applyMask(
->fill(
$size->getHeight(),
)
)
);



Reflection


);

->flipVertically()

create empty canvas to fit image and reflection
->applyMask(
->fill(
$size->getHeight(),
)
)
);



Reﬂection


);

->flipVertically()

make a copy of source, ﬂipped vertically
->applyMask(
->fill(
$size->getHeight(),
)
)
);



Reﬂection


);

replace white regions with transparency
->flipVertically()
->applyMask(
->fill(
$size->getHeight(),
)
)
);



Reﬂection


);

create image like the one above
->flipVertically()
->applyMask(
->fill(
$size->getHeight(),
)
)
);



Reﬂection


);


place original logo on top of created canvas
->flipVertically()
->applyMask(

place reﬂection underneath it
->fill(
$size->getHeight(),
)
)
);



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');
$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, 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, 210, 350, $color5, true);

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


$imagine =
Piechart
$volume = 20;


for ($i = $volume; $i > 0; $i--) {

get imagine, deﬁne chart 3d volume and size
$chart->draw()
}

$chart->draw()



$imagine =
Piechart
$volume = 20;


get center of the chart
for ($i = $volume; $i > 0; $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)
}

$chart->draw()



$imagine =
Piechart
$volume = 20;


for ($i = $volume; $i > 0; $i--) {

colors of pie slices and background
$chart->draw()
}

$chart->draw()

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


$imagine =
Piechart
$volume = 20;


for ($i = $volume; $i > 0; $i--) {

create chart canvas with transparent background
$chart->draw()
}

$chart->draw()



$imagine =
Piechart
$volume = 20;

build 3d shade of the chart in darker colors

for ($i = $volume; $i > 0; $i--) {

$chart->draw()
}

$chart->draw()



$imagine =
Piechart
$volume = 20;


for ($i = $volume; $i > 0; $i--) {

draw and save the actual chart
$chart->draw()
}

$chart->draw()



Simplify

1. use value objects
2. make ‘em smart


Color
$color = new ImagineColor('fff');

$color->darken(127);

$color->dissolve(50);

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


Box
$box = new ImagineBox(100, 100);
100

100 $box->scale(2);
200

200

$box->increase(25);

125

125


Point

$point = new ImaginePoint(50, 50);


Make it testable

1. interface end user code interactions
2. close unexpected inheritance


Filters


Filter
namespace ImagineFilter;

use ImagineImageInterface;

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


Filters

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


Reﬂection ﬁlter
class 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(
$size->getHeight(),
$white->darken(127),
$white
)
)
));
}
}


Reﬂection ﬁlter


$filter = new ReflectionFilter($imagine);

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


Transformation
Delayed image processing using a ﬁlter


Transformation
$path = '/path/to/processed/image.png';
$resize = new ImagineBox(200, 200);
$angle = 90;
$background = new ImagineColor('fff');

$transformation = new ImagineFilterTransformation();

$transformation->resize($resize)
->copy()
->rotate($angle, $background)
->thumbnail($size, ImagineImageInterface::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

foreach(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...


Imagine and Symfony2


Integration

1. conﬁgure
2. use in templates
3. proﬁt


Conﬁgure

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" />

Twig

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

PHP


Process

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

ﬁrst request processes image and outputs response

other controller requests result in a 301 redirect to ﬁle


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 ﬁlters (reﬂection, rounded
corners, etc.)
• Add effects (twirl, blur, sharpen, etc.)


Imagine
image processing reloaded

https://github.com/avalanche123/Imagine


Introduction to Imagine

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Recently uploaded

Recently uploaded (20)

Introduction to Imagine