Reshape

action

Description

Adjusts the shape of the delivered image.
Learn more: Shape changes and distortion effects

Examples

			// Expand every function separately to see its own example
Details

Classes


new ShearAction()


new TrimAction()


new CutByImage( imageSource )


new DistortArcAction( degrees )


new DistortAction( coordinates )

Methods


<static> cutByImage( imageSource ) → {Actions.Reshape.CutByImage}

action

Description

Trims pixels according to the transparency levels of a given overlay image. Wherever the overlay image is transparent, the original is shown, and wherever the overlay is opaque, the resulting image is transparent.

Parameters
Name Type Description
imageSource Qualifiers.Source.ImageSource
Examples

Cut an image by using another image(Gravity)


			import {Cloudinary, Transformation} from "@cloudinary/url-gen";
			
			const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
			const img = yourCldInstance.image('woman');
			
			import {cutByImage} from '@cloudinary/url-gen/actions/reshape';
			import {image} from "@cloudinary/url-gen/qualifiers/source";
			
			img.reshape(
			   cutByImage(
			       image('sourceImage').transformation(new Transformation())
			))
			img.toURL()
Details

<static> distortArc( degrees ) → {Actions.Reshape.DistortArcAction}

action

Description

Distorts the image to an arc shape.

Learn more: Distorting images
Learn more: Distortion effects

Parameters
Name Type Description
degrees number

The degrees to arc the image

Examples

Distort arc


			import {Cloudinary, Transformation} from "@cloudinary/url-gen";
			
			const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
			const img = yourCldInstance.image('woman');
			
			import {distortArc} from '@cloudinary/url-gen/actions/reshape';
			
			img.reshape(
			   distortArc(200)
			)
			img.toURL()
Details

<static> distort( coordinates ) → {Actions.Reshape.DistortAction}

action

Description

Distorts the image to a new shape by adjusting its corners to achieve perception warping. Specify four corner coordinates, representing the new coordinates for each of the image's four corners, in clockwise order from the top-left corner.

Learn more: Distorting images

Parameters
Name Type Description
coordinates Array.<number>

Four x/y pairs representing the new image corners

Examples

Distorting an image


			import {Cloudinary, Transformation} from "@cloudinary/url-gen";
			
			const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
			const img = yourCldInstance.image('woman');
			
			import {distort} from '@cloudinary/url-gen/actions/reshape';
			
			img.reshape(
			   distort([100, 100, 100, 200, 200, 200, 200, 100])
			)
			img.toURL()
Details

<static> shear( x, y ) → {Actions.Reshape.ShearAction}

action

Description

Skews the image according to the two specified values in degrees.

Parameters
Name Type Description
x number

Skews the image according to the two specified values in degrees. (X and Y)

y number

Skews the image according to the two specified values in degrees. (X and Y)

Examples

Shearing an image


			import {Cloudinary, Transformation} from "@cloudinary/url-gen";
			
			const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
			const img = yourCldInstance.image('woman');
			
			import {shear} from '@cloudinary/url-gen/actions/reshape';
			
			img.reshape(
			   shear(50, 0)
			)
			img.toURL()
Details

<static> trim() → {Actions.Reshape.TrimAction}

action

Description

Removes the edges of the image based on the color of the corner pixels. Specify a color other than the color of the corner pixels using the colorOverride() method

Examples

Trimming an image


			import {Cloudinary, Transformation} from "@cloudinary/url-gen";
			
			const yourCldInstance = new Cloudinary({cloud:{cloudName:'demo'}});
			const img = yourCldInstance.image('woman');
			
			import {trim} from '@cloudinary/url-gen/actions/reshape';
			
			img.reshape(
			   trim().colorOverride('blue').colorSimilarity(15)
			)
			img.toURL()
Details