1. Home
  2. Actions & Qualifiers
  3. 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/url-gen";
			// Import everything, or just the action you need for tree-shaking purposes
			import {Effect, sepia} from "@cloudinary/url-gen/actions/effect";
			import {ArtisticFilter, alDente} from "@cloudinary/url-gen/qualifiers/artisticFilter";
			import {ShakeStrength, pixels16} from "@cloudinary/url-gen/qualifiers/shakeStrength";
			import {cat, dog} from "@cloudinary/url-gen/qualifiers/ForegroundObject";
			
			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()))
			.effect(Effect.backgroundRemoval().fineEdges(true).hints(cat(), dog())
			.effect(Effect.generativeRemove().prompt("red car").detectMultiple())
			.effect(Effect.generativeRemove().region({x: 20, y: 200, width: 100, height: 100}))
			.effect(Effect.generativeReplace().from("ceiling").to("sunny sky").preserveGeometry(true))
Details

actions/effect.ts, line 473

Classes

new EffectActionWithBlend()

new EffectActionWithLevel()

new BlackwhiteEffectAction()

new LoopEffectAction()

new DitherEffectAction()

new EffectActionWithStrength()

new DeshakeEffectAction()

new LeveledEffectAction()

new GenerativeReplace()

new GradientFadeEffectAction()

new SimulateColorBlindEffectAction()

new AccelerationEffectAction()

new BackgroundRemoval()

new CartoonifyEffect()

new ColorizeEffectAction()

new DropShadow()

new GenerativeRecolor()

new RemoveBackgroundAction()

new VectorizeEffectAction()

new FadeInEffectAction()

new FadeOutEffectAction()

new Pixelate()

new AssistColorBlindEffectAction()

new BlurAction()

new SimpleEffectAction()

new GenerativeRemove()

new EffectOutline()

new ShadowEffectAction()

new MakeTransparentEffectAction()

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 38

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

action

Description

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

Returns
Details

actions/effect.ts, line 47

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

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

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

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

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

action

Description

Applies an artistic filter to the asset.

Parameters
Name Type Description
artisticFilterType ArtisticFilterType | string
Returns
Details

actions/effect.ts, line 97

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

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

<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/url-gen/qualifiers/sources
Returns
Details

actions/effect.ts, line 127

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

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

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

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

action

Description

Negates the image colors (negative).

Returns
Details

actions/effect.ts, line 169

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

action

Description

Removes red eyes in the image.

Returns
Details

actions/effect.ts, line 178

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

action

Description

Plays the video or audio file in reverse.

Returns
Details

actions/effect.ts, line 187

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

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

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

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

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

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

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

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

action

Description

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

Parameters
Name Type Description
ditherType Qualifiers.Dither

The dither type applied to the image
Returns
Details

actions/effect.ts, line 279

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

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

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

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

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

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

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

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

<static> backgroundRemoval() → {Actions.Effect.BackgroundRemoval}

action

Description

Uses the Cloudinary AI Background Removal add-on to make the background of an image transparent.
When combined with other transformations, this effect must be specified in the first component. Background Removal

Returns
Details

actions/effect.ts, line 386

<static> dropShadow() → {Actions.Effect.DropShadow}

action

Description

Adds a shadow to the object in an image. Drop Shadow

Returns
Details

actions/effect.ts, line 397

<static> generativeRemove() → {Actions.Effect.GenerativeRemove}

action

Description

Remove objects from an asset using Generative AI Generative Remove

Returns
Details

actions/effect.ts, line 408

<static> generativeReplace() → {Actions.Effect.GenerativeReplace}

action

Description

Uses generative AI to replace parts of your image with something else. Generative Replace

Returns
Details

actions/effect.ts, line 419

<static> generativeRecolor( prompts, color ) → {Actions.Effect.GenerativeRecolor}

action

Description

Uses generative AI to recolor objects from your image. Generative Recolor

Parameters
Name Type Description
prompts string | Array.<string>
color SystemColors
Returns
Details

actions/effect.ts, line 431

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

action

Description

Uses generative AI to restore details in poor quality images or images that may have become degraded through repeated processing and compression.

Returns
Details

actions/effect.ts, line 442

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

action

Description

Uses AI-based prediction to add fine detail while upscaling small images. This 'super-resolution' feature scales each dimension by four, multiplying the total number of pixels by 16.

Returns
Details

actions/effect.ts, line 453