Transformations

Transform files with Filestack's processing engine. This method accepts transformation parameters and generates a corresponding link.

The transformation function can be called at anytime to process a file once the client has been initialized.

You can add Filestack to your project quickly and easily using our CDN

Or by installing Filestack-JS using NPM

You will need to instantiate the client with your API key and security or CNAME if they apply to you.

You may pass in an optional dictionary of key-value pairs to customize the options of client.transform()

const client = filestack.init('Your_API_Key');
client.transform('url', transformation);

Transform Options

An optional dictionary of key-value pairs that specify how the Filestack transforms and saves files.

URL (Required) External URL or Filestack FileLink

'url_to_be_stored'

Must be a valid external URL or Filestack FileLink. URLs should be formatted as strings

Crop/Resize

Cropping and Resizing can also be done within the Filepicker prior to upload.

Crop Object

crop: {dim: {x:10, y: 20, width: 200, height: 250}}

Crops the image to a specified rectangle.

The input for this parameter must be exactly 4 parameters each with their own integer value: 'x coordinate,y coordinate,width,height'. For example, an input of crop: {dim: {x:10, y: 20, width: 200, height: 250}} selects a 200x250 pixel rectangle starting 10 pixels from the left edge of the image and 20 pixels from the top edge of the image.

Resize Width Object

resize: { width: 100 }

The width in pixels to resize the image to. The value must be an integer from 1 to 10000.

Resize Height Object

resize: { height: 100 }

The height in pixels to resize the image to. The value must be an integer from 1 to 10000.

Resize Fit Type Object

resize: { fit: 'clip' }

The default value for the fit parameter is fit: 'clip'.

  • fit:'clip'Resizes the image to fit within the specified parameters without distorting, cropping, or changing the aspect ratio.
  • fit:'crop'Resizes the image to fit the specified parameters exactly by removing any parts of the image that don't fit within the boundaries.
  • fit:'scale'Resizes the image to fit the specified parameters exactly by scaling the image to the desired size. The aspect ratio of the image is not respected and the image can be distorted using this method.
  • fit:'max'Resizes the image to fit within the parameters, but as opposed to 'fit:clip' will not scale the image if the image is smaller than the output size.

Align Image Object

resize: { align: 'center' }

Using align, you can choose the area of the image to focus on. Possible values:

The default value for the fit parameter is align: 'center'.

  • align:'center'
  • align:'top'
  • align:'bottom'
  • align:'left'
  • align:'right'
  • align:'faces'

You can also specify pairs e.g. align:['top','left']. Center cannot be used in pairs.

Rotate

Rotation can also be done within the Filepicker prior to upload.

Rotate by Degree or EXIF Object

rotate: { deg: 90 }

The degree by which to rotate the image clockwise. This can be an integer in a range from 0 to 359. Alternatively, you can set the degree to 'exif' and the image will be rotated based upon any exif metadata it may contain.

Reset EXIF Object

rotate: { exif: false }

Sets the EXIF orientation of the image to EXIF orientation 1. The exif:false parameter takes an image and sets the exif orientation to the first of the eight EXIF orientations. The image will behave as though it is contained in an html img tag if displayed in an application that supports EXIF orientations.

Set Background ColorObject

rotate: { background: 'FFFFFFFF' }

Sets the background color to display if the image is rotated less than a full 90 degrees. This can be the word for a color, or the hex color code. Here is our list of accepted color names.

Flip Image Object

rotate: { flip: true }

This parameter flips the image in the vertical direction.

Flop Image Object

rotate: { flop: true }

This parameter flops the image in the horizontal direction.

Rounded Corners

Rounded Corners Object

roundedCorners: {}

Passing the roundedCorners parameter by itself will use all the default roundedCorners values.

Set Corner Radius Object

roundedCorners: { radius: 100 }

The radius of the rounded corner effect on your image. The value for this parameter can be any integer in a range from 1 to 10000, or the string 'max'. The default value for this parameter is 10% of the shortest side of the image.

Set Corner Blur Object

roundedCorners: { blur: 0.3 }

Specify the amount of blur to apply to the rounded edges of the image. This parameter will accept any float in a range from 0 to 20. The default blur setting is blur: 0.3.

Set Background ColorObject

roundedCorners: { background: 'FFFFFFFF' }

Sets the background color to display where the rounded corners have removed part of the image. This can be the word for a color, or the hex color code. The default value is white. Here is our list of accepted color names.

Vignette

Vignette Object

vignette: {}

Passing the vignette parameter by itself will use all the default vignette values.

Vignette Amount Object

vignette: { amount: 50 }

Controls the opacity of the vignette effect. The default value for this parameter is 20. The lower the value the more opaque the vignette effect. The greater the value provided, the greater the transparency of the blur effect around the image.

Set Blur Type Object

vignette: { blurmode: 'gaussian' }

Controls the type of blur applied to the vignette - linear or gaussian. The vignette effect uses gaussian blur by default because it produces a more defined vignette around the image. Specifying linear is faster, but produces a less-defined blur effect, even at higher amounts.

Set Vignette BackgroundObject

vignettegette: { background: 'FFFFFFFF' }

Replaces the default transparent background with the specified color. This can be the word for a color, or the hex color code. The default value is white. Here is our list of accepted color names.

Polaroid

Polaroid Object

polaroid: {}

Passing the polaroid parameter by itself will use all the default polaroid values.

Set Frame Color Object

polaroid: { color: 'FFFFFFFF' }

Sets the polaroid frame color. This can be the word for a color, or the hex color code. The default value is 'snow'. Here is our list of accepted color names.

Set Rotation Object

polaroid: { rotate: 90 }

The degree by which to rotate the image clockwise. This can be an integer in a range from 0 to 359. Note: the default rotation of the polaroid effect is random. So setting the rotation will provide a consistent look.

Polaroid BackgroundObject

polaroid: { background: 'FFFFFFFF' }

Sets the background color to display behind the polaroid if it has been rotated at all. This can be the word for a color, or the hex color code. The default value is white. Here is our list of accepted color names.

Torn Edges

Torn Edges Object

tornEdges: {}

Passing the tornEdges parameter by itself will use all the default values.

Torn Edge Spread Object

tornEdges: { spread:[10,50] }

Sets the spread of the tearing effect. The value must be an array of two integers in a range from 1 to 10000. The default setting is spread: [1,10].

Torn Edge BackgroundObject

tornEdges: { background: 'FFFFFFFF' }

Sets the background color to display behind the torn edge effect. This can be the word for a color, or the hex color code. The default value is white. Here is our list of accepted color names.

Shadow

Shadow Object

shadow: {}

Passing the shadow parameter by itself will use all the default values.

Shadow Blur Object

shadow: { blur: 10 }

Sets the level of blur for the shadow effect. The value must be an integer in a range from 0 to 20. The default setting is blur: 4.

Shadow Opacity Object

shadow: { opacity: 35 }

Sets the opacity level of the shadow effect. The value must be an integer in a range from 0 to 100. The default setting is opacity: 60.

Set Shadow Vector Array

shadow: { vector: [4, 4] }

shadow: { vector: [25,25] } Sets the vector of the shadow effect. The value must be an array of two integers in a range from -1000 to 1000. These are the X and Y parameters that determine the position of the shadow. The default setting is vector: [4,4].

Shadow ColorObject

shadow: { color: '000000FF' }

Sets the shadow color. This can be the word for a color, or the hex color code. The default value is black. Here is our list of accepted color names.

Circle

Circle cropping can also be done within the Filepicker prior to upload.

Circle Object

circle: {}

Passing the circle parameter by itself will use all the default values.

Circle Background Object

circle: { background: 'FFFFFFFF' }

Sets the background color to display behind the image. This can be the word for a color, or the hex color code. The default value is white. Here is our list of accepted color names.

Border

Border Object

border: {}

Passing the border parameter by itself will use all the default values.

Border Width Object

border: { width: 5 }

Sets the width in pixels of the border to render around the image. The value for this parameter must be an integer in a range from 1 to 1000. The default value is width: 2.

Border Color Object

border: { color: '000000FF' }

Sets the color of the border to render around the image. This can be the word for a color, or the hex color code. The default value is black. Here is our list of accepted color names.

Border BackgroundObject

border: { background: 'FFFFFFFF' }

Sets the background color to display behind the image. This can be the word for a color, or the hex color code. The default value is white. Here is our list of accepted color names.