Transform Images - Use Filestack's processing engine to transform images

Transform images with Filestack's processing engine. This handy method accepts a number of parameters and generates a corresponding processing engine link.

Please Note: The transform method will not work without an API key. To initialize the client use filestack.init("yourApiKey"). Filestack's documentation examples include a key in the background, but if you want to test something using your own key, you can always add var client = filestack.init("your_API_KEY"); to the live code examples.

Syntax

The javascript transform function can be called at anytime to transform a URL once the client has been initialized. You may pass in an optional dictionary of key-value pairs to customize the effects of the image transformations.

Note: Security policies and signatures should be included as options when the client is initialized with your API key if your account has security enabled.

<script src="https://static.filestackapi.com/v3/filestack-0.7.0.js"></script>
<script type="text/javascript">
  var client = filestack.init('yourApiKey', { policy: 'policy', signature: 'signature' });
  client.transform('URL', {transformOptions});
</script>

Example Transform Code

Transformation with External URL
var url = 'https://d1wtqaffaaj63z.cloudfront.net/images/NY_199_E_of_Hammertown_2014.jpg' var transformedUrl = client.transform(url, { crop: { dim: { x: 600, y: 900, width: 600, height: 600 } }, vignette: { blurmode: 'gaussian', amount: 50 } }); console.log(JSON.stringify(transformedUrl))

Transform URL and Store Result

Store result of Transform
var log = function(result) { console.log(JSON.stringify(result)) } var url = 'https://d1wtqaffaaj63z.cloudfront.net/images/NY_199_E_of_Hammertown_2014.jpg' var transformedUrl = client.transform(url, { crop: { dim: { x: 600, y: 900, width: 600, height: 600 } }, vignette: { blurmode: 'gaussian', amount: 50 } }); console.log(JSON.stringify(transformedUrl)) console.log("storing...") client.storeURL(transformedUrl).then(log)

Parameters

Client Initialization Options
An optional dictionary of key-value pairs that influence the Filestack client.
Security
Object
{ policy: POLICY, signature: SIGNATURE }

If you have security enabled, you will need to initialize the client with a valid Filestack policy and signature in order to perform the requested call. This allows you to select who can and cannot perform certain actions on your site. Read more about security and how to generate policies and signatures

URL
the URL to transform
URL
String
'url'

The URL or Filestack Handle that points to the image to transform. The format of the URL should be a string.

Transform Options
An optional dictionary of key-value pairs that specify how Filestack stores files.

Crop

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

Resize by 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 by 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:

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

By default, it aligns to the center.
You can also specify pairs e.g. align:['top','left']. Center cannot be used in pairs.


Rotate

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. Read more about EXIF rotation and associated issues.

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 Color
String
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. Click here for a list of accepted color names.

Flip Image
Boolean
rotate: { flip: true }

This parameter flips the image in the vertical direction.

Flop Image
Boolean
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 Color
Object
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. Click here for a list of accepted colors 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 Background
Object
vigette: { background: 'FFFFFFFF' }
Replaces the default transparent background with the specified color. This can be the word for a color, or the hex color code. Click here for a 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'. Click here for a list of accepted colors 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 Background
Object
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. Click here for a 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 Background
Object
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. Click here for a 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: [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 Color
Object
shadow: { color: 'FFFFFFFF' }
Sets the shadow color. This can be the word for a color, or the hex color code. The default value is black. Click here for a list of accepted color names.
Shadow Background
Object
shadow: { background: 'FFFFFFFF' }
Sets the background color to display behind the image, like a matte the shadow is cast on. This can be the word for a color, or the hex color code. The default value is white. Click here for a list of accepted color names.

Circle

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. Click here for a 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: 'FFFFFFFF' }
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. Click here for a list of accepted color names.
Border Background
Object
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. Click here for a list of accepted color names.