Smashing Pixels with Imanee

Transcript

1. 1.

   None
2. 2.

   whoami

3. 3.

   Image manipulation • Important in any programming language • Essential

   operations – Resizing – Creating Thumbnails – Cropping • More fun stuf – Filters and collages – Animated gifs
4. 4.

   Image manipulation in PHP • GD • Imagick (Imagemagick) •

   Wrappers
5. 5.

   Resize Example: GD <?php header("Content-type: image/jpg"); $image = imagecreatefromjpeg('img01.jpg'); $width

   = 200; $height = 200; $finalWidth = $width; $finalHeight = ($finalWidth * imagesy($image)) / imagesx($image); if ($finalHeight > $height) { $finalHeight = $height; $finalWidth = ($finalHeight * imagesx($image)) / imagesy($image); } $newimage = imagecreatetruecolor($finalWidth, $finalHeight); imagecopyresampled($newimage, $image, 0, 0, 0, 0, $finalWidth, $finalHeight, imagesx($image), imagesy($image)); echo imagejpeg($newimage);
6. 6.

   Resize Example: Imagick <?php header("Content-type: image/jpg"); $image = new Imagick('img01.jpg');

   $width = 200; $height = 200; $image->resizeImage($width, $height, IMAGICK::FILTER_LANCZOS, 1, true); echo $image->getImageBlob();
7. 7.

   Resize Example: Imanee <?php include __DIR__ . '/vendor/autoload.php'; header("Content-type: image/jpg");

   $imanee = new Imanee\Imanee('img01.jpg'); echo $imanee ->resize(300, 300) ->output();
8. 8.

   Introducing: Imanee • Image manipulation for fun projects • Requirements

   – PHP >= 5.4 – Imagick (php5-imagick) OR – GD (php5-gd)* • Installation – $ composer require imanee/imanee * the GD extension doesn't support animated gifs
9. 9.

   Getting Started <?php include __DIR__ . '/vendor/autoload.php'; use Imanee\Imanee; header("Content-type:

   image/jpg"); $imanee = new Imanee('img01.jpg'); echo $imanee ->resize(300, 300) ->output();
10. 10.

    Basic operations: Thumbnail header("Content-type: image/jpg"); $imanee = new Imanee('img01.jpg'); echo

    $imanee->thumbnail(300, 300) ->output();
11. 11.

    Basic operations: Thumbnail w/ crop header("Content-type: image/jpg"); $imanee = new

    Imanee('img01.jpg'); echo $imanee->thumbnail(300, 300, true) ->output();
12. 12.

    Basic operations: Crop header("Content-type: image/jpg"); $imanee = new Imanee('img01.jpg'); echo

    $imanee->crop(300, 300, 260, 0) ->output();
13. 13.

    WRITING TEXT

14. 14.

    Writing Text header("Content-type: image/jpg"); $imanee = new Imanee('img01.jpg'); echo $imanee->placeText('testing

    imanee', Imanee::IM_POS_MID_CENTER) ->output();
15. 15.

    Writing Text with custom Drawer header("Content-type: image/jpg"); $imanee = new

    Imanee('img01.jpg'); $imanee->getDrawer() ->setFont('almonte_wood.ttf') ->setFontColor('yellow') ->setFontSize(100); echo $imanee->placeText('testing imanee!', Imanee::IM_POS_MID_CENTER) ->output();
16. 16.

    FILTERS AND COLLAGES

17. 17.

    Filters header("Content-type: image/jpg"); $imanee = new Imanee('img01.jpg'); echo $imanee->applyFilter('filter_bw') ->output();

18. 18.

    Collages header("Content-type: image/jpg"); $imanee = new Imanee('img01.jpg'); echo $imanee ->placeImage('cat01.png',

    Imanee::IM_POS_TOP_LEFT) ->placeImage('cat02.png', Imanee::IM_POS_TOP_RIGHT) ->output();
19. 19.

    Animated Gifs header("Content-type: image/gif"); $frames = ['cat01.png', 'cat02.png', 'cat03.png', 'cat04.png'];

    $imanee = new Imanee(); $imanee->addFrames($frames); echo $imanee->animate(30); $frames = ['cat01.png', 'cat02.png', 'cat03.png', 'cat04.png']; echo Imanee::arrayAnimate($frames, 30); echo Imanee::globAnimate(__DIR__ . '/*.png', 30);
20. 20.

    RESOURCES

21. 21.

    Resources • Getting Started – Documentation: http://docs.imanee.io – Simple demos:

    http://imanee.io • Built with Imanee – Placephant: http://placephant.com • Try: http://placephant.com/{width}/{height} – Gifagram: [demo]
22. 22.

    erika@digitalocean.com @erikaheidi