1. Home
  2. Actions & Qualifiers
  3. Reshape

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

actions/reshape.ts, line 7

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
Returns
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.toString()
Details

actions/reshape.ts, line 39

<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
Returns
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.toString()
Details

actions/reshape.ts, line 66

<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
Returns
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.toString()
Details

actions/reshape.ts, line 94

<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)
Returns
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.toString()
Details

actions/reshape.ts, line 118

<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

Returns
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.toString()
Details

actions/reshape.ts, line 141