Imagickal - easy ImageMagick effects

[Robin S]

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

[pwired]

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

Applying a picture editor filter is much more efficient

[Robin S]

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.

[teppo]

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.

[adrian]

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

[pwired]

Yes I have looked at it with a narrowed view. I should have googled about Imagick PHP before I did my post.

Just because I never had the need for something like this doesn't mean there is no need for it.

[mr-fan]

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

[Robin S]

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.

[Ivan Gretsky]

Hey @Robin S! Thanks for the cool module!

Did you ever think about making it chainable to PageImage?

[Robin S]

33 minutes ago, Ivan Gretsky said:

Did you ever think about making it chainable to PageImage?

Could be done, but I think there are probably better solutions already available such as AvbImage and PageImage Manipulator.