Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Smashing Pixels with Imanee

Smashing Pixels with Imanee

Presenting Imanee, a simple PHP library for image manipulation

Erika Heidi

June 24, 2015
Tweet

More Decks by Erika Heidi

Other Decks in Programming

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. [email protected]
    @erikaheidi

    View Slide