Migrating image transformations from Filestack

Even though our Migro utility does a good job migrating your files from Filestack to Uploadcare, image transformations are a bit more complicated to transfer. This article holds a mapping of Filestack image transformation operations to the Uploadcare ones. We also provide some migration practices and visual examples. The following list is based on the names of Filestack operations:

Resize

Filestack image resizing operation has several input parameters that map to the three CDN API operations: resize, preview, and scale_crop. Here's what those three do:

  • resize — resizes an image to fit into the specified dimensions.
  • preview — scales an input image to fit into the specified dimensions while preserving its original aspect ratio.
  • scale_crop — scales an image until one of the dimensions gets equal to the specified size, the rest of image is cropped.

Migrating operation parameters

<filestack-parameter-name> -> <uploadcare-parameter-name>
  • width -> width
  • height -> height
  • fit , align -> preview , scale_crop, and resize. See below for more info.

When migrating images with the clip and max values for fit: use preview. A crop value for fit can be migrated by using scale_crop. When looking to migrate scale, resize can be used. The two supported align values are: center and no value, which defaults to left.

Examples

Scale image to fit 750 px in width,

Filestack
/resize=width:750/
Uploadcare
/-/resize/750x/
https://process.filestackapi.com/resize=width:750/2h25ZGRHTfmQ2DBEt3yR
https://ucarecdn.com/b85bbf3a-393d-4217-b23e-02f0329a017d/-/resize/750x/

Scale image to fit 500x500 px container,

Filestack
/resize=width:500,height:500/
Uploadcare
/-/preview/500x500/
https://process.filestackapi.com/resize=width:500,height:500/2h25ZGRHTfmQ2DBEt3yR 
https://ucarecdn.com/b85bbf3a-393d-4217-b23e-02f0329a017d/-/preview/500x500/

Crop image using 500x500 px box, use image center as anchor point,

Original image
Filestack
/resize=width:500,height:500,fit:crop/
Uploadcare
/-/scale_crop/500x500/center/
https://process.filestackapi.com/resize=width:500,height:500,fit:crop/2h25ZGRHTfmQ2DBEt3yR 
https://ucarecdn.com/b85bbf3a-393d-4217-b23e-02f0329a017d/-/scale_crop/500x500/center/

Migrating clip fit value, fit image into 500x500 px container,

Filestack
/resize=width:500,height:500,fit:clip/
Uploadcare
/-/preview/500x500/
https://process.filestackapi.com/resize=width:500,height:500,fit:clip/2h25ZGRHTfmQ2DBEt3yR 
https://ucarecdn.com/b85bbf3a-393d-4217-b23e-02f0329a017d/-/preview/500x500/

Migrating scale fit value, fit image into 1500x300 px container,

Filestack
/resize=width:1500,height:300,fit:scale/
Uploadcare
/-/resize/1500x300/
https://process.filestackapi.com/resize=width:1500,height:300,fit:scale/2h25ZGRHTfmQ2DBEt3yR
https://ucarecdn.com/b85bbf3a-393d-4217-b23e-02f0329a017d/-/resize/1500x300/

Migrating max fit value, resize image to fit maximum allowed size. Note, Filestack and Uploadcare allow different maximum sizes, learn more.

Filestack
/resize=width:4000,height:3000,fit:max/
Uploadcare
/-/preview/3000x3000/
https://process.filestackapi.com/resize=width:4000,height:3000,fit:max/2h25ZGRHTfmQ2DBEt3yR
https://ucarecdn.com/b85bbf3a-393d-4217-b23e-02f0329a017d/-/preview/3000x3000/

Migrating align:left and crop fit values, crop image using 200x400 px box, top-left as anchor point,

Original image
Filestack
/resize=width:200,height:400,fit:crop,align:left/
Uploadcare
/-/scale_crop/200x400/
https://process.filestackapi.com/resize=width:200,height:400,fit:crop,align:left/2h25ZGRHTfmQ2DBEt3yR
https://ucarecdn.com/b85bbf3a-393d-4217-b23e-02f0329a017d/-/scale_crop/200x400/

Migrating align:center and crop fit values, crop image using 200x400 px box, center as anchor point,

Original image
Filestack
/resize=width:200,height:400,fit:crop,align:center/
Uploadcare
/-/scale_crop/200x400/center/
https://process.filestackapi.com/resize=width:200,height:400,fit:crop,align:center/2h25ZGRHTfmQ2DBEt3yR
https://ucarecdn.com/b85bbf3a-393d-4217-b23e-02f0329a017d/-/scale_crop/200x400/center/

Note, the following Filestack align values are not supported by scale_crop:

https://process.filestackapi.com/resize=width:200,height:400,fit:crop,align:[bottom,right]/2h25ZGRHTfmQ2DBEt3yR
https://process.filestackapi.com/resize=width:100,height:763,fit:crop,align:faces/bF4XG4SCzzTckCY3xtwA

Crop

Filestack image cropping maps to the Uploadcare crop operation. There's a difference, though. When setting the crop coordinates that create an area that extends outside the original image dimensions, Filestack will give you the part of an input image that fits into the original dimensions. With Uploadcare, you can choose whichever coordinates, but an area beyond the original image dimensions will be filled with white.

Here's the difference,

Filestack
/crop=dim:[1500,2000,3800,1600]/
Uploadcare
/-/crop/3800x1165/1500,2000/
https://process.filestackapi.com/crop=dim:[1500,2000,3800,1600]/nfMpfd2KT1e7BjGz8LWJ
https://ucarecdn.com/e5d9d2f3-6d7c-49c1-8774-413eaba35419/-/crop/3800x1165/1500,2000/

Migrating operation parameters

<filestack-parameter-name> -> <uploadcare-parameter-name>
  • x, y -> two_coords
  • width, height -> two_dimensions

Examples

A couple of crop examples,

Original image
Filestack
/crop=dim:[2000,900,1800,1300]/
Uploadcare
/-/crop/1800x1300/2000,900/
https://process.filestackapi.com/crop=dim:[2000,900,1800,1300]/bXa8m7oYQdmyWpmo2I2B
https://ucarecdn.com/e4f4f028-33d6-4b36-85d8-2e5a19d2de74/-/crop/1800x1300/2000,900/
Original image
Filestack
/crop=dim:[1500,2000,3800,1600]/
Uploadcare
/-/crop/3200x1165/1500,2000/
https://process.filestackapi.com/crop=dim:[1500,2000,3800,1600]/nfMpfd2KT1e7BjGz8LWJ
https://ucarecdn.com/e5d9d2f3-6d7c-49c1-8774-413eaba35419/-/crop/3200x1165/1500,2000/
Original image
Filestack
/crop=dim:[0,0,1000,1300]/
Uploadcare
/-/crop/1000x1000/0,0/
https://process.filestackapi.com/crop=dim:[0,0,1000,1300]/pFT3mHzROCSennsG7bmB
https://ucarecdn.com/fa6734b9-8194-4b92-b18c-29c78986cc57/-/crop/1000x1000/0,0/

Rotate

Filestack image rotation well maps to the Uploadcare rotate operation. It's for right-angle counterclockwise image rotation. In order to map the exif Filestack parameter, you can use the autorotate operation that deals with the EXIF Orientation tag. Note, with Uploadcare, when you're applying any CDN API operations to your images, they're automatically aligned according to their EXIF. However, you can choose to use /-/autorotate/no/ to change this behavior.

Migrating operation parameters

<filestack-parameter-name> -> <uploadcare-parameter-name>

deg or exif -> angle

Examples (Filestack vs Uploadcare)

Rotate image 180 degrees counterclockwise,

Filestack
/rotate=deg:180/
Filestack
/rotate=deg:exif/rotate=deg:180/
Uploadcare
/-/rotate/180/
https://process.filestackapi.com/rotate=deg:180/nfXozo2yRbuDU4NNFd0a
https://ucarecdn.com/b86014ba-342e-49b0-a908-f540a65a8231/-/rotate/180/

Rotate image according to EXIF,

Filestack
/rotate=deg:exif/
Uploadcare
/-/autorotate/yes/
https://process.filestackapi.com/rotate=deg:exif/nfXozo2yRbuDU4NNFd0a
https://ucarecdn.com/b86014ba-342e-49b0-a908-f540a65a8231/-/autorotate/yes/

Rotate image, discard EXIF info,

Filestack
/rotate=exif:false/
Uploadcare
/-/autorotate/no/
https://process.filestackapi.com/rotate=exif:false/nfXozo2yRbuDU4NNFd0a	
https://ucarecdn.com/b86014ba-342e-49b0-a908-f540a65a8231/-/autorotate/no/

Flip, Flop

The Filestack Flip and Flop operations map to the flip and mirror CDN API operations respectively.

The operations require no parameters.

Examples (Filestack vs Uploadcare)

Flipping image,

Original image
Filestack
/flip/
Uploadcare
/-/flip/
https://process.filestackapi.com/flip/0DBXIJvvRtqSzsUtalHY 
https://ucarecdn.com/761112e8-5786-42a9-8c60-dafa09bfaa3c/-/flip/

Mirroring image,

Original image
Filestack
/flop/
Uploadcare
/-/mirror/
https://process.filestackapi.com/flop/0DBXIJvvRtqSzsUtalHY 
https://ucarecdn.com/761112e8-5786-42a9-8c60-dafa09bfaa3c/-/mirror/

Piping the two operations,

Original image
Filestack
/flip/flop/
Uploadcare
/-/flip/-/mirror/
https://process.filestackapi.com/flip/flop/0DBXIJvvRtqSzsUtalHY
https://ucarecdn.com/761112e8-5786-42a9-8c60-dafa09bfaa3c/-/flip/-/mirror/

Watermark

Filestack watermarks map to the CDN API overlay operation. Watermarks, in this regard, are any images layered over your image content.

Migrating operation parameters

<filestack-parameter-name> -> <uploadcare-parameter-name>
  • file -> uuid
  • size -> relative_dimensions
  • position -> relative_coordinates

Examples (Filestack vs Uploadcare)

Add overlay, align: center,

Filestack
/watermark=file:ZoVdwbe6Qcu9uIxIZSuU/h2T4Jl9RBSSXOGtl0gv8
Uploadcare
/-/overlay/923a68d0-8e04-407e-a39c-64b7eaf2c4a6/center/
https://process.filestackapi.com/watermark=file:ZoVdwbe6Qcu9uIxIZSuU/h2T4Jl9RBSSXOGtl0gv8
https://ucarecdn.com/213351af-c519-4409-8995-e04409fe71b4/-/overlay/923a68d0-8e04-407e-a39c-64b7eaf2c4a6/center/

Add overlay, define dimensions,

Filestack
/watermark=file:ZoVdwbe6Qcu9uIxIZSuU,size:300/h2T4Jl9RBSSXOGtl0gv8
Uploadcare
/-/overlay/923a68d0-8e04-407e-a39c-64b7eaf2c4a6/90%x90%/center/
https://process.filestackapi.com/watermark=file:ZoVdwbe6Qcu9uIxIZSuU,size:300/h2T4Jl9RBSSXOGtl0gv8	
https://ucarecdn.com/213351af-c519-4409-8995-e04409fe71b4/-/overlay/923a68d0-8e04-407e-a39c-64b7eaf2c4a6/90%25x90%25/center/

Add overlay, define dimensions and position,

Filestack
/watermark=file:ZoVdwbe6Qcu9uIxIZSuU,position:[top,right],size:200/h2T4Jl9RBSSXOGtl0gv8
Uploadcare
/-/overlay/923a68d0-8e04-407e-a39c-64b7eaf2c4a6/60%x60%/100p,0p/
https://process.filestackapi.com/watermark=file:ZoVdwbe6Qcu9uIxIZSuU,position:[top,right],size:200/h2T4Jl9RBSSXOGtl0gv8
https://ucarecdn.com/213351af-c519-4409-8995-e04409fe71b4/-/overlay/923a68d0-8e04-407e-a39c-64b7eaf2c4a6/60%25x60%25/100p,0p/

Face recognition

With Uploadcare, the detect_faces operation is used to get a JSON holding coordinates of faces found in an image. Filestack face recognition well maps to the operation with the export parameter set to true. The Uploadcare version outputs data similar to the json operation and requires no input parameters.

Examples (Filestack vs Uploadcare)

Detect faces and return their coordinates as JSON,

https://process.filestackapi.com/detect_faces=export:true/GOBMuoEKRS6iW8oNSlcN
https://ucarecdn.com/8df8efa5-7d23-4f2a-8006-d3c1178295ac/detect_faces/

Filters — blur

The blur Filestack operation under the Filters section maps to the blur CDN API operation.

Migrating operation parameters

<filestack-parameter-name> -> <uploadcare-parameter-name>

amount -> strength

Examples

Some blur,

Original image
Filestack
/blur/
Uploadcare
/-/preview/-/blur/20/
https://process.filestackapi.com/blur/7m1aL2WEQg2Dkh1Cxgpi 
https://ucarecdn.com/3109c49f-9c56-4210-a229-a325aae9e2b5/-/preview/-/blur/20/

More blur,

Original image
Filestack
/blur=amount:7/
Uploadcare
/-/preview/-/blur/70/
https://process.filestackapi.com/blur=amount:7/7m1aL2WEQg2Dkh1Cxgpi 
https://ucarecdn.com/3109c49f-9c56-4210-a229-a325aae9e2b5/-/preview/-/blur/70/

Monochrome

Desaturating images with Uploadcare is done via the grayscale operation. The Filestack analog is called monochrome. Both operations require no input parameters.

Examples

Getting grayscale image,

Original image
Filestack
/monochrome/
Uploadcare
/-/preview/-/grayscale/
https://process.filestackapi.com/monochrome/7m1aL2WEQg2Dkh1Cxgpi 
https://ucarecdn.com/3109c49f-9c56-4210-a229-a325aae9e2b5/-/preview/-/grayscale/

Sharpen

The Filestack image sharpening well maps to the sharp CDN API operation.

Migrating operation parameters

<filestack-parameter-name> -> <uploadcare-parameter-name>

amount -> strength

Examples

Sharpen image,

Original image
Filestack
/sharpen/
Uploadcare
/-/preview/-/sharp/15/
https://process.filestackapi.com/sharpen/7m1aL2WEQg2Dkh1Cxgpi
https://ucarecdn.com/3109c49f-9c56-4210-a229-a325aae9e2b5/-/preview/-/sharp/15/

Enhance

While the Filestack and Uploadcare image enhancement operations share the same title: enhance, the latter also takes the strength parameters allowing you to adjust the degree of applied enhancements.

Examples

Enhance image,

Original image
Filestack
/enhance/
Uploadcare
/-/preview/-/enhance/100/
https://process.filestackapi.com/enhance/GuRNrlnARMyyDahg141e
https://ucarecdn.com/1cc80272-3adb-4266-9043-57fb6ee4a826/-/preview/-/enhance/100/

Format conversions

Image conversions under the Filestack Filetype conversion section map to the format CDN API operation. In addition, the Uploadcare version supports the auto setting that adjusts the output image format according to the client preferences.

Examples

Set output format to PNG,

Filestack
/output=format:png/
Uploadcare
/-/format/png/
https://process.filestackapi.com/output=format:png/oaOFJufxQWmyEZTVbciV		
https://ucarecdn.com/4240c773-3cd2-4952-b379-70e5a72bed3a/-/format/png/

Set output format to JPG,

Filestack
/output=format:jpg/
Uploadcare
/-/format/jpg/
https://process.filestackapi.com/output=format:jpeg/oaOFJufxQWmyEZTVbciV 
https://ucarecdn.com/4240c773-3cd2-4952-b379-70e5a72bed3a/-/format/jpeg/

Set output format to WebP,

Filestack
/output=format:webp/
Uploadcare
/-/format/webp/
https://process.filestackapi.com/output=format:webp/oaOFJufxQWmyEZTVbciV	
https://ucarecdn.com/4240c773-3cd2-4952-b379-70e5a72bed3a/-/format/webp/

Image quality

Both Filestack and Uploadcare allow you to change image quality. Filestack allows to change the parameter value explicitly, while Uploadcare has a set of five quality presets. See format for details.

Migrating operation parameters

<filestack-parameter-name> -> <uploadcare-parameter-name>

value -> quality

Examples

Reducing image size via quality,

Original image
Filestack
/quality=value:50/
Uploadcare
/-/preview/-/quality/lighter/
https://process.filestackapi.com/quality=value:50/oaOFJufxQWmyEZTVbciV
https://ucarecdn.com/4240c773-3cd2-4952-b379-70e5a72bed3a/-/preview/-/quality/lighter/

Archives

The Filestack Zip operation maps to the archive CDN API operation. However, the latter only works with Group API. Consider looking through our docs for more info.

Questions?

We're always happy to help with code or other questions you might have! Search our site for more information or send us an email!