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 "../../../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()))
Details

Classes


new DitherEffectAction()


new EffectActionWithBlend()


new EffectActionWithLevel()


new EffectActionWithStrength()


new LeveledEffectAction()


new AccelerationEffectAction()


new BlackwhiteEffectAction()


new DeshakeEffectAction()


new FadeInEffectAction()


new FadeoutEffectAction()


new LoopEffectAction()


new GradientFadeEffectAction()


new SimulateColorBlindEffectAction()


new BlurAction()


new Pixelate()


new CartoonifyEffect()


new SimpleEffectAction()


new RemoveBackgroundAction()


new VectorizeEffectAction()


new AssistColorBlindEffectAction()


new ColorizeEffectAction()


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)

Details

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

action

Description

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

Details

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

Details

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

action

Description

Applies a shadow filter to the asset.

Parameters
Name Type Description
shadowLevel
Details

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

Details

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

Details

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

action

Description

Applies an artistic filter to the asset.

Parameters
Name Type Description
artisticFilterType ArtisticFilterType | string
Details

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

Details

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

action

Description

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

Details

<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

Details

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

Details

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

Details

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

Details

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

action

Description

Negates the image colors (negative).

Details

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

action

Description

Removes red eyes in the image.

Details

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

action

Description

Plays the video or audio file in reverse.

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

<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

Details

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

Details

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

Details

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

Details

<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

Details

<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

Details

<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

Details

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

Details

<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

Details