Chaining Transformations

With the transformation engine you can combine a number of conversion tasks in a variety of ways to produce different results. In the following examples we will take an image and transform it using multiple conversions in different orders to demonstrate how the order and transformation type matter when combining tranformation tasks.

Multiple Conversion Tasks Examples

Multiple Task URL Formats:
https://process.filestackapi.com/[task]=[options]/[task]=[options]/Filestack_FileLink_Handle
or
https://process.filestackapi.com/<API_KEY>/[task]=[options]/[task]=[options]/File_URL

Original image


Cropping to the 1st detected face in the image and displaying it with the circle effect crop_faces=faces:1,buffer:200/circle:

Now in this example the faces of the police officers are somewhat obscured, so only two faces are detected (the second and fourth officers from the left). We select the first face object, which happens to be the second officer.

automatically selecting and cropping to the first identified face in the photo and then adding the circle effect

The image we generated is a bit small though. Let's blow it up in size using a few different methods. There are many ways to achieve similar or identical results when using Filestack's transformations.

Resizing using the crop_faces task crop_faces=faces:1,buffer:200,w:300/circle:

automatically cropping to the first face and resizing it using the crop_faces task

We can resize the image in a similar way by adding in the resize task.

Resizing using the crop_faces task crop_faces=faces:1,buffer:200/circle/resize=w:300:

automatically cropping to the first face in the image, applying the circle effect and then resizing it

The reason these two conversions don't produce the same image is because the first resizes the face object to 300x224 pixels. Then the circle effect is applied which creates an image that is 226x224. The other transformation crops the officer's face and applies the circle effect, and then resizes the final image to 300 pixels wide, which results in a 300x300 image.

Now let's rotate his face just for fun crop_faces=faces:1,buffer:200/circle/resize=w:300/rotate=deg:270:

original photo transformed by cropping the image using face detection, adding a circle effect, resizing it and then rotating it all in one request

Let's explore the difference that the order of conversion tasks makes

Original image

Original photo to be transformed with multiple Filestack conversion tasks

"NH43901-enhanced" by U.S. Naval Historical Center Photograph - Licensed under Public Domain via Commons.


Here we have defined some coordinates that will give us a nicely cropped image of the blimp when using the original image: [151,158,957,415]

Now if we take those coordinates and use them to crop the image and then resize the result we get a blown up view of the blimp crop=dim:[151,158,957,415]/resize=h:1250

image cropped to focus on the blimp and then resized using Filestack image transformations

However if we do the same thing in reverse, resize the original image and then crop it, the result is obviously going to be different resize=h:1250/crop=dim:[151,158,957,415]

using the same photo with image transformation tasks reversed to illustrate the importance of the order of operations

The top image is quite nice, but it could be better, so let's spice it up a bit.

Let's add a border effect and a shadow effect to the cropped then resized blimp crop=dim:[151,158,957,415]/resize=h:1250/border=width:5/shadow=blur:15,vector:[25,25]

image transformed with crop and resize, with shadow and border effects added

That's good, but maybe something simpler is all we need.

Cropping the image and adding rounded corners fit:crop:

image transformed with cropping and rounded corners

By chaining transformation tasks together, you can build complicated effects and images. Note that the more transformations you string together the longer it will take to process and generate the transformed image.