Php image acceleration and modification - Photon

in #utopian-io7 years ago (edited)

JETPACK PHOTON WRAPPER

What is Photon?

Photon is an image acceleration and modification service for Jetpack-connected WordPress sites. Converted images are cached automatically and served from the WordPress.com CDN. Images can be cropped, resized, and filtered by using a simple API controlled by GET query arguments. When Photon is enabled in Jetpack, images are updated on the fly.

Why wrapper?

This wrapper allows you to use photon on your host (servers) and its fully object oriented.

Installation

$ composer require bencagri/photon

Notice: to use it on your servers, you need to install gmagick package

Sample implementation.


<?php

use Photon\Wrapper\Generate;
use Photon\Wrapper\Effect\Height;
use Photon\Wrapper\Effect\Width;
use Photon\Wrapper\Effects;

require 'vendor/autoload.php';

// Set your effects
$effects = new Effects(
    new Width(500),
    new Height(500)
);

$imageUrl = 'http://sample-site.com/sample-image.jpg';

//Generate image with your effects
$process = new Generate($imageUrl,$effects);
$process->process();

You can combine multiple effects also.

<?php
use Photon\Wrapper\Effect\Crop;
use Photon\Wrapper\Effect\Filter;
use Photon\Wrapper\Effects;

$crop = new Crop(500,250,330,300);

$effects = new Effects(
    $crop,
    new Filter('emboss')
);

Some Effects

Crop

Crop an image by percentages x-offset,y-offset,width,height (x,y,w,h).
Percentages are used so that you don’t need to recalculate the cropping when transforming the image in other ways such as resizing it.

Original image:

new Crop('250px','250px','700px','600px');

250px,250px,700px,700px takes a 700px by 700px rectangle from the source image starting at 250px offset from the left and 250px offset from the top.

After:

new Crop('160px','25','1400px','60');

shows you can also mix the parameters types, for example a 1400 pixels by 60% rectangle from the image starting at 160 pixels by 25%.

Image Source
https://www.pexels.com/photo/branches-daylight-environment-flowers-355296/

LetterBox

Add black letterboxing effect to images, by scaling them to width, height while maintaining the aspect ratio and filling the rest with black.

new LetterBox(700,600);

Original image:

After:

Image Source
https://www.pexels.com/photo/beach-beautiful-bridge-carribean-449627/

UnLetterBox

Remove black letterboxing effect from images with ulb. This function takes only one argument, true.

new UnLetterBox(true);

Filter

The filter parameter is optional and is used to apply one of multiple filters.
Valid values are: negate, grayscale, sepia, edgedetect, emboss, blurgaussian, blurselective, meanremoval.

new Filter($filterName);

alt original

alt negate

alt grayscale

alt sepia

alt edgedetect

alt emboss

Image Source
https://www.pexels.com/photo/beautifully-served-table-for-dinner-6269/

Colorize

Add color hues to an image with colorizeby passing a comma separated list of red,green,blue (RGB) values such as 255,0,0 (red), 0,255,0 (green), 0,0,255 (blue).

new Colorize(0,0,100);

alt original

alt 0,0,100

alt 0,100,0

alt 100,0,0

Image Source
https://www.pexels.com/photo/bird-animal-white-pigeon-75973/

Check full documentation of all effects.

Contribute

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request

Licence

  • The Photon Wrapper is open-sourced software licensed under the MIT license.
  • The Photon is open-sourced software licenced under GNU GENERaL PUBLIC LICENCE



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Hey @bencagri I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Thank you for the contribution. It has been approved.

Great post, good mix of code, description and images.

Your code example is missing a crucial part. The image output once processed. What happens after this? $process->process();

  • File output?
  • Inline use for the img tag?

You can contact us on Discord.
[utopian-moderator]

Hello @helo,

I forgot to mention it, the process method sets header for browsers (as image/jpeg|png|gif) and puts image the content. I will edit when i get back to my pc.

Thanks.

Coin Marketplace

STEEM 0.22
TRX 0.20
JST 0.034
BTC 98765.99
ETH 3313.55
USDT 1.00
SBD 3.07