Migrating Images 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
- Crop
- Rotate
- Flip, Flop
- Watermark
- Detect_faces, face detection
- Filters — Blur
- Monochrome, desaturating
- Sharpen
- Enhance
- Filetype conversion — images, format conversions
- Quality, changing image quality
- Zip, handling archives
Resize
Filestack image resizing operation has several input parameters that map to
the three Image Transformations: 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->widthheight->heightfit,align->preview,scale_crop, andresize. 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 dimensions.
Note, Filestack and Uploadcare allow different maximum image dimensions.
For instance, the example below deals with the maximum of 3000x3000 pixels for Uploadcare,
that can be increased to 5000x5000 by using /format/jpeg/,
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:
Crop
Filestack image cropping maps to the Uploadcare image 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_coordswidth,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/ |
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 transformations 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/ |
Flip, Flop
The Filestack Flip and Flop operations map to the
flip and
mirror Image Processing 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/ |
Watermark
Filestack watermarks map to the Image Processing overlay operation. Watermarks, in this regard, are any images layered over your image content.
Migrating operation parameters
<filestack-parameter-name> -> <uploadcare-parameter-name>file->uuidsize->relative_dimensionsposition->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/ |
Face detection
With Uploadcare, the detect_faces operation
is used to get a JSON holding coordinates of faces found in an image. Filestack
face detection 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,
Acquire JSON from Filestack
Acquire JSON from Uploadcare
Filters — blur
The blur Filestack operation under the Filters section maps to the
blur Image Processing 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/ |
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/ |
Sharpen
The Filestack image sharpening well maps to the sharp Image Processing operation.
Migrating operation parameters
<filestack-parameter-name> -> <uploadcare-parameter-name>amount -> strength
Examples
Sharpen image,
| Original image | Filestack/sharpen/ | Uploadcare/-/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/ |
Format conversions
Image conversions under the Filestack Filetype conversion section map to the
format Image Processing 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:jpg/oaOFJufxQWmyEZTVbciV
https://ucarecdn.com/4240c773-3cd2-4952-b379-70e5a72bed3a/-/format/jpeg/Set output format to WebP,
Filestack/output=format:webp/ | Uploadcare/-/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 quality 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/ |
Archives
The Filestack Zip operation maps to the archive
processing operation. However, the latter only works with Group API.