Jump to content

Imagickal - easy ImageMagick effects


Robin S
 Share

Recommended Posts

Not a module, just a little function for applying effects to images if you have the Imagick PHP extension installed. This started out as a need to blur an image and then I expanded it to accept more of the Imagick methods. Not all Imagick methods are supported.

The function takes the URL to a source image, the name of an Imagick method and an array of arguments for that method, and returns the URL to the processed image. The processed image is saved to same directory as the source image, with the method name and arguments appended to the name of the source image. Images are cached in that the function checks if an image with that name/method/arguments exists already to save recreating it on every page load.

function imagickal($imagePath, $method, array $arguments) {
    $path_parts = pathinfo($imagePath);
    $dirname = $path_parts['dirname'] . '/';
    $filename = $path_parts['filename'];
    $mod = $method . '-' . implode($arguments, '-');
    $mod = wire('sanitizer')->filename($mod, true);
    $savename = $dirname . $filename . '_' . $mod . '.jpg';
    if (!file_exists($_SERVER['DOCUMENT_ROOT'] . $savename)) {
        $image = new Imagick($_SERVER['DOCUMENT_ROOT'] . $imagePath);
        call_user_func_array([$image, $method], $arguments);
        $image->writeImage($_SERVER['DOCUMENT_ROOT'] . $savename);
    }
    return $savename;
}

I'm a PHP novice so happy to receive suggestions of how this could be improved.

Imagick reference: http://php.net/manual/en/class.imagick.php

Examples of some effects possibilities...

5ZImf71.jpg

  • Like 9
Link to comment
Share on other sites

more to code, db requests, background processing, memory usage,

Applying a picture editor filter is much more efficient :)

Not really sure what you're getting at here. Do you mean you could do this in Photoshop? Because you could, but Photoshop doesn't run on your server. This is for processing images on a website, maintainable by your client. You're going to download, open Photoshop, filter and reupload each time your client changes an image? That's definitely not more efficient.

Link to comment
Share on other sites

Not really sure what you're getting at here.

I don't see the connection here either.

The whole point of server-side image processing is to a) automate things so that you don't need to perform them manually on image-by-image basis and b) make these kinds of things possible for users with no access to software or know-how needed to do image processing themselves.

  • Like 1
Link to comment
Share on other sites

this piece from adobe...is some sort of mini photoshop on every webapp working (even simple websites)

https://www.aviary.com/

https://developers.aviary.com/docs/web

it is used within this imagemanager plugin for CKE/Tiny/HTML and looks great for such fast/little image edits.

http://www.responsivefilemanager.com/

(It's on the third slide i think)

and this module i've tested sometimes ago and works even great, too

https://processwire.com/talk/topic/1703-pixlreditor/

This are all only solutions where the user/editor has the role to use them - your snippet provide the force to preset effects by the admin/developer...so everything has it's own benefits.

regards mr-fan

  • Like 2
Link to comment
Share on other sites

I haven't used them, but is pwired maybe referring to CSS image filters: https://css-tricks.com/almanac/properties/f/filter/

Incidentally, when I set out to achieve a blurred image effect I initially thought I would do it client-side. Each client-side option I tried had issues:

  • CSS filter - not supported in IE
  • SVG filter - blur effect noticeably less smooth
  • JS stackblur plugins - difficult to use as a CSS background image supporting background position and background size properties

In the end it was so much easier to do it server-side, and browser support is 100%.

Edit: for those interested in client-side image manipulation, CamanJS is pretty cool. It's an absolute breeze to use on inline images using the "data-caman" attribute, just a bit of a hassle to use it for CSS backgrounds.

  • Like 5
Link to comment
Share on other sites

  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...