1. Home
  2. Actions & Qualifiers
  3. Actions.Effect

Effect

Description

Defines effects that you can apply to transform your assets.

Examples

An extreme example of using many effects on the same asset


			import {Cloudinary} from "@cloudinary/base";
			// Import everything, or just the action you need for tree-shaking purposes
			import {Effect, sepia} from "@cloudinary/base/actions/effect";
			import {ArtisticFilter, alDente} from "../../../src/qualifiers/artisticFilter";
			import {ShakeStrength, pixels16} from "../../../src/qualifiers/shakeStrength";
			
			const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
			const image = yourCldInstance.image('woman');
			
			image.effect(Effect.advancedRedEye())
			.effect(Effect.accelerate())
			.effect(Effect.accelerate(100))
			.effect(Effect.accelerate().rate(5))
			.effect(Effect.boomerang())
			.effect(Effect.blackwhite())
			.effect(Effect.blackwhite(10))
			.effect(Effect.blackwhite().threshold(20))
			.effect(Effect.fadeIn(100))
			.effect(Effect.fadeIn().duration(5))
			.effect(Effect.fadeOut(100))
			.effect(Effect.fadeOut().duration(5))
			.effect(Effect.grayscale())
			.effect(Effect.loop())
			.effect(Effect.loop(100))
			.effect(Effect.loop().additionalIterations(5))
			.effect(Effect.makeTransparent())
			.effect(Effect.makeTransparent(100))
			.effect(Effect.makeTransparent().tolerance(5))
			.effect(Effect.makeTransparent().tolerance(5).colorToReplace('red'))
			.effect(Effect.noise())
			.effect(Effect.noise(100))
			.effect(Effect.noise().level(5))
			.effect(Effect.negate())
			.effect(Effect.reverse())
			.effect(Effect.redEye())
			.effect(Effect.sepia())
			.effect(Effect.sepia(100))
			.effect(Effect.sepia().level(5))
			.effect(Effect.vignette())
			.effect(Effect.vignette(100))
			.effect(Effect.vignette().strength(5))
			.effect(Effect.deshake())
			.effect(Effect.deshake(10))
			.effect(Effect.artisticFilter(alDente())
			.effect(Effect.deshake().shakeStrength(pixels16()))
Copy
Details

actions/effect.ts, line 381

Classes

new EffectActionWithBlend()

new EffectActionWithLevel()

new EffectActionWithStrength()

new LeveledEffectAction()

new DitherEffectAction()

new AccelerationEffectAction()

new BlackwhiteEffectAction()

new DeshakeEffectAction()

new FadeInEffectAction()

new FadeoutEffectAction()

new LoopEffectAction()

new BlurAction()

new GradientFadeEffectAction()

new Pixelate()

new SimulateColorBlindEffectAction()

new SimpleEffectAction()

new CartoonifyEffect()

new RemoveBackgroundAction()

new VectorizeEffectAction()

new AssistColorBlindEffectAction()

new ColorizeEffectAction()

new MakeTransparentEffectAction()

new EffectOutline()

new ShadowEffectAction()

new StyleTransfer( imageSource )

Methods

<static> blur( blurLevel ) → {Actions.Effect.BlurAction}

action

Description

Applies a blurring filter to the asset.

Parameters
Name Type Description
blurLevel number

The strength of the blur. (Range: 1 to 2000, Server default: 100)
Returns
Details

actions/effect.ts, line 33

<static> grayscale() → {Actions.Effect.SimpleEffectAction}

action

Description

Converts the image to gray-scale (multiple shades of gray).

Returns
Details

actions/effect.ts, line 42

<static> sepia( level ) → {Actions.Effect.EffectActionWithLevel}

action

Description

Changes the color scheme of the image to sepia.

Parameters
Name Type Description
level number

The level of sepia to apply. (Range: 1 to 100, Server default: 80)
Returns
Details

actions/effect.ts, line 52

<static> shadow( shadowLevel ) → {Actions.Effect.ShadowEffectAction}

action

Description

Applies a shadow filter to the asset.

Parameters
Name Type Description
shadowLevel
Returns
Details

actions/effect.ts, line 62

<static> colorize( colorizeLevel ) → {Actions.Effect.ColorizeEffectAction}

action

Description

Applies a colorizing filter to the asset.

Parameters
Name Type Description
colorizeLevel number

The strength of the color. (Range: 0 to 100, Server default: 100)
Returns
Details

actions/effect.ts, line 72

<static> oilPaint( oilPaintLevel ) → {Actions.Effect.EffectActionWithStrength}

action

Description

Applies an oilPaint filter to the asset.

Parameters
Name Type Description
oilPaintLevel number

The strength of the effect. (Range: 0 to 100, Server default: 30)
Returns
Details

actions/effect.ts, line 82

<static> artisticFilter( artisticFilterType ) → {Actions.Effect.SimpleEffectAction}

action

Description

Applies an artistic filter to the asset.

Parameters
Name Type Description
artisticFilterType
Returns
Details

actions/effect.ts, line 92

<static> cartoonify( cartoonifyLevel ) → {Actions.Effect.CartoonifyEffect}

action

Description

Applies a cartoonify effect to the asset.

Parameters
Name Type Description
cartoonifyLevel

The thickness of the lines. (Range: 0 to 100, Server default: 50)
Returns
Details

actions/effect.ts, line 102

<static> outline() → {Actions.Effect.EffectOutline}

action

Description

Adds an outline to a transparent image. For examples, see the Image Transformations guide.

Returns
Details

actions/effect.ts, line 111

<static> styleTransfer( imageSource ) → {Actions.Effect.StyleTransfer}

action

Description

Applies a complex deep learning neural network algorithm that extracts artistic styles from a source image and applies them to the content of a target photograph.
Learn more: Neural Artwork Style Transfer

Parameters
Name Type Description
imageSource ImageSource

import {image} from '@cloudinary/base/qualifiers/sources
Returns
Details

actions/effect.ts, line 122

<static> boomerang() → {Actions.Effect.SimpleEffectAction}

action

Description

Causes a video clip to play forwards and then backwards. Use in conjunction with trimming parameters ('duration', 'start_offset', or 'end_offset') and the 'loop' effect to deliver a classic (short, repeating) boomerang clip.
For details and examples, see 'Create a boomerang video clip' in the Video Transformations guide.

Returns
Details

actions/effect.ts, line 134

<static> advancedRedEye() → {Actions.Effect.SimpleEffectAction}

action

Description

Removes red eyes with the Advanced Facial Attribute Detection add-on. For details, see the Advanced Facial Attribute Detection add-on documentation.

Returns
Details

actions/effect.ts, line 145

<static> blackwhite( level ) → {Actions.Effect.BlackwhiteEffectAction}

action

Description

Converts the image to black and white.

Parameters
Name Type Description
level number | string

The balance between black (100) and white (0). (Range: 0 to 100, Server default: 50)
Returns
Details

actions/effect.ts, line 155

<static> negate() → {Actions.Effect.SimpleEffectAction}

action

Description

Negates the image colors (negative).

Returns
Details

actions/effect.ts, line 164

<static> redEye() → {Actions.Effect.SimpleEffectAction}

action

Description

Removes red eyes in the image.

Returns
Details

actions/effect.ts, line 173

<static> reverse() → {Actions.Effect.SimpleEffectAction}

action

Description

Plays the video or audio file in reverse.

Returns
Details

actions/effect.ts, line 182

<static> accelerate( speedIncreasePercent ) → {Actions.Effect.AccelerationEffectAction}

action

Description

Changes the speed of the video playback.

Parameters
Name Type Description
speedIncreasePercent number

The percentage change of speed. Positive numbers speed up the playback, negative numbers slow down the playback (Range: -50 to 100, Server default: 0)
Returns
Details

actions/effect.ts, line 192

<static> fadeIn( fadeLength ) → {Actions.Effect.FadeInEffectAction}

action

Description

Fade in at the beginning of the video. For details and examples, see 'Fade in and out' in the Video Transformations guide.

Parameters
Name Type Description
fadeLength number

The time in ms for the fade to occur. (Server default: 2000)
Returns
Details

actions/effect.ts, line 204

<static> fadeOut( fadeLength ) → {Actions.Effect.FadeoutEffectAction}

action

Description

Fade out at the end of the video. For details and examples, see 'Fade in and out' in the Video Transformations guide.

Parameters
Name Type Description
fadeLength number

The time in ms for the fade to occur. (Server default: 2000)
Returns
Details

actions/effect.ts, line 216

<static> loop( additionalLoops ) → {Actions.Effect.LoopEffectAction}

action

Description

Delivers a video or animated GIF that contains additional loops of the video/GIF. The total number of iterations is the number of additional loops plus one.
For animated GIFs only, you can also specify the loop effect without a numeric value to instruct it to loop the GIF infinitely.

Parameters
Name Type Description
additionalLoops number

The additional number of times to play the video or animated GIF.
Returns
Details

actions/effect.ts, line 229

<static> makeTransparent( tolerance ) → {Actions.Effect.MakeTransparentEffectAction}

action

Description

Makes the background of the image transparent (or solid white for formats that do not support transparency). The background is determined as all pixels that resemble the pixels on the edges of the image.

Parameters
Name Type Description
tolerance number

The tolerance used to accommodate variance in the background color. (Range: 0 to 100, Server default: 10)
Returns
Details

actions/effect.ts, line 242

<static> noise( percentage ) → {Actions.Effect.EffectActionWithLevel}

action

Description

Adds visual noise to the video, visible as a random flicker of "dots" or "snow".

Parameters
Name Type Description
percentage number

The percent of noise to apply. (Range: 0 to 100 Server default: 0)
Returns
Details

actions/effect.ts, line 252

<static> vignette( strength ) → {Actions.Effect.EffectActionWithStrength}

action

Description

Applies a vignette effect.

Parameters
Name Type Description
strength number

The strength of the vignette. (Range: 0 to 100, Server default: 20)
Returns
Details

actions/effect.ts, line 262

<static> dither( ditherType ) → {Actions.Effect.DitherEffectAction}

action

Description

Applies an ordered dither filter to the image. Use the constants defined in @cloudinary/base/qualifiers/dither for ditherType.

Parameters
Name Type Description
ditherType Qualifiers.Dither

The dither type applied to the image
Returns
Details

actions/effect.ts, line 274

<static> vectorize() → {Actions.Effect.VectorizeEffectAction}

action

Description

Vectorizes the image. Notes: To deliver the image as a vector image, make sure to change the format (or URL extension) to a vector format, such as SVG.
However, you can also deliver in a raster format if you just want to get the 'vectorized' graphic effect.
Large images are scaled down to 1000 pixels in the largest dimension before vectorization.

Returns
Details

actions/effect.ts, line 289

<static> gradientFade() → {Actions.Effect.GradientFadeEffectAction}

action

Description

Applies a gradient fade effect from one edge of the image. Use .x() or .y() to indicate from which edge to fade and how much of the image should be faded. Values of x and y can be specified as a percentage (Range: 0.0 to 1.0), or in pixels (integer values).
Positive values fade from the top (y) or left (x). Negative values fade from the bottom (y) or right (x).
By default, the gradient is applied to the top 50% of the image (y = 0.5).
Only one direction can be specified but the fade can be applied symmetrically using the mode parameter.
To apply different amounts of fade to multiple edges, use chained fade effects.

Returns
Details

actions/effect.ts, line 306

<static> assistColorBlind() → {Actions.Effect.AssistColorBlindEffectAction}

action

Description

Applies stripes to the image to help people with common color-blind conditions to differentiate between colors that are similar for them.
You can replace colors using the xRay() method of the \Cloudinary\Transformation\AssistColorBlind class.

Returns
Details

actions/effect.ts, line 317

<static> simulateColorBlind() → {Actions.Effect.SimulateColorBlindEffectAction}

action

Description

Simulates the way an image would appear to someone with the specified color blind condition.
For a list of supported color blind conditions see types of color blindness for possible values

Returns
Details

actions/effect.ts, line 328

<static> deshake() → {Actions.Effect.DeshakeEffectAction}

action

Description

Removes small motion shifts from the video. with a maximum extent of movement in the horizontal and vertical direction of 32 pixels

Returns
Details

actions/effect.ts, line 337

<static> transition() → {Actions.Effect.SimpleEffectAction}

action

Description

Supports the concatenation of videos with a custom transition by including a transition video as an additional layer and specifying the transition effect

Returns
Details

actions/effect.ts, line 347

<static> pixelate( squareSize ) → {Actions.Effect.Pixelate}

action

Description

Applies a pixelatering filter to the asset.

Parameters
Name Type Description
squareSize number

The squareSize in the pixelation. (Range: 1 to 2000, Server default: 100)
Returns
Details

actions/effect.ts, line 357

<static> removeBackground() → {Actions.Effect.RemoveBackgroundAction}

action

Description

Makes the background of an image transparent (or solid white for JPGs).
Use when the background is a uniform color. Background Removal

Returns
Details

actions/effect.ts, line 369