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 497

Classes

new EffectActionWithBlend()

new EffectActionWithLevel()

new BlackwhiteEffectAction()

new LoopEffectAction()

new DitherEffectAction()

new EffectActionWithStrength()

new DeshakeEffectAction()

new LeveledEffectAction()

new GenerativeBackgroundReplace()

new GenerativeReplace()

new GradientFadeEffectAction()

new SimulateColorBlindEffectAction()

new AccelerationEffectAction()

new BackgroundRemoval()

new CartoonifyEffect()

new ColorizeEffectAction()

new DropShadow()

new Extract()

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 40

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

action

Description

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

Returns
Details

actions/effect.ts, line 49

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

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

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

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

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

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

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

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

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

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

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

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

action

Description

Negates the image colors (negative).

Returns
Details

actions/effect.ts, line 171

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

action

Description

Removes red eyes in the image.

Returns
Details

actions/effect.ts, line 180

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

action

Description

Plays the video or audio file in reverse.

Returns
Details

actions/effect.ts, line 189

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

action

Description

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

Returns
Details

actions/effect.ts, line 399

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

action

Description

Remove objects from an asset using Generative AI Generative Remove

Returns
Details

actions/effect.ts, line 410

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

<static> generativeBackgroundReplace() → {Actions.Effect.GenerativeBackgroundReplace}

action

Description

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

Returns
Details

actions/effect.ts, line 432

<static> extract() → {Actions.Effect.Extract}

action

Description

Extracts an area or multiple areas of an image, described in natural language. Extract

Returns
Details

actions/effect.ts, line 443

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

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

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