Smashing Pixels with Imanee

Transcript

1. None

2. whoami

3. Image manipulation • Important in any programming language • Essential

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

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

   Wrappers

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. 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. 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. 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. 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. Basic operations: Thumbnail header("Content-type: image/jpg"); $imanee = new Imanee('img01.jpg'); echo

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

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

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

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

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

13. WRITING TEXT

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. 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. FILTERS AND COLLAGES

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

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. 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. RESOURCES

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. erika@digitalocean.com @erikaheidi