Smashing Pixels with Imanee

Presenting Imanee, a simple PHP library for image manipulation

Transcript

1. View Slide

2. whoami
   

   View Slide

3. Image manipulation
   ●
   Important in any programming language
   ●
   Essential operations
   – Resizing
   – Creating Thumbnails
   – Cropping
   ●
   More fun stuf
   – Filters and collages
   – Animated gifs
   

   View Slide

4. Image manipulation in PHP
   ●
   GD
   ●
   Imagick (Imagemagick)
   ●
   Wrappers
   

   View Slide

5. Resize Example: GD
   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);
   

   View Slide

6. Resize Example: Imagick
   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();
   

   View Slide

7. Resize Example: Imanee
   include __DIR__ . '/vendor/autoload.php';
   header("Content-type: image/jpg");
   $imanee = new Imanee\Imanee('img01.jpg');
   echo $imanee
   ->resize(300, 300)
   ->output();
   

   View Slide

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
   

   View Slide

9. Getting Started
   include __DIR__ . '/vendor/autoload.php';
   use Imanee\Imanee;
   header("Content-type: image/jpg");
   $imanee = new Imanee('img01.jpg');
   echo $imanee
   ->resize(300, 300)
   ->output();
   

   View Slide

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

    View Slide

11. Basic operations: Thumbnail w/ crop
    header("Content-type: image/jpg");
    $imanee = new Imanee('img01.jpg');
    echo $imanee->thumbnail(300, 300, true)
    ->output();
    

    View Slide

12. Basic operations: Crop
    header("Content-type: image/jpg");
    $imanee = new Imanee('img01.jpg');
    echo $imanee->crop(300, 300, 260, 0)
    ->output();
    

    View Slide

13. WRITING TEXT
    

    View Slide

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

    View Slide

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();
    

    View Slide

16. FILTERS AND
    COLLAGES
    

    View Slide

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

    View Slide

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();
    

    View Slide

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);
    

    View Slide

20. RESOURCES
    

    View Slide

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]
    

    View Slide

22. erika@digitalocean.com
    @erikaheidi
    

    View Slide