ImageTransform

Image transformations can be performed on images by specifying the desired parameters. The parameters control the specific transformations that will be applied to the image.

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().bgColor('cccccc');


const transformURL = url.transform(transformObj);

auto

The auto method enables the functionality that automates certain image optimization features.

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().auto();


const transformURL = url.transform(transformObj);

bgColor

The bgColor method sets a background color for the given image.

Name	Type	Description
color (required)	string	Color of the background

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().bgColor('cccccc');


const transformURL = url.transform(transformObj);

blur

The blur method allows you to decrease the focus and clarity of a given image.

Name	Type	Description
blurValue (required)	number	Set the blur intensity between 1 to 1000

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().blur(10);


const transformURL = url.transform(transformObj);

brightness

The brightness method enables the functionality that automates certain image optimization features.

Name	Type	Description
brightnessValue (required)	number	Set the brightness of the image between -100 to 100

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().brightness(80.50);

const transformURL = url.transform(transformObj);

canvas

The canvas method allows you to increase the size of the canvas that surrounds an image.

Name	Type	Description
canvasBy	CanvasByEnum	Specifies what params to use for creating canvas - DEFAULT, ASPECTRATIO, REGION, OFFSET
height (required)	string \| number	Sets height of the canvas
width (required)	string \| number	Sets width of the canvas
xval	string \| number	Defines the X-axis position of the top left corner or horizontal offset
yval	string \| number	Defines the Y-axis position of the top left corner or vertical offset

Example 1:

const url = 'www.example.com';

const transformObj = new ImageTransform().canvas({ width: 100, height: 200 });

const transformURL = url.transform(transformObj);

Example 2:

const url = 'www.example.com';

const transformObj = new ImageTransform().canvas({ width: 200, height: 300, canvasBy: CanvasByEnum.OFFSET, xval: 100, yval: 150 });

const transformURL = url.transform(transformObj);

contrast

The contrast method enables the functionality that automates certain image optimization features.

Name	Type	Description
contrastValue (required)	number	Set the contrast of the image between -100 to 100

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().contrast(-80.99);

const transformURL = url.transform(transformObj);

crop

The crop method allows you to remove pixels from an image by adjusting the height and width in the percentage value or aspect ratio.

Name	Type	Description
cropBy	CropByEnum	Specify the CropBy type using values DEFAULT, ASPECTRATIO, REGION, or OFFSET.
width (required)	string \| number	Specify the width to resize the image to. The value can be in pixels (for example, 400) or in percentage (for example, 0.60 OR '60p')
height (required)	string \| number	Specify the height to resize the image to. The value can be in pixels (for example, 400) or in percentage (for example, 0.60 OR '60p')
xval (required)	string \| number	For the CropBy Region, specify the X-axis position of the top left corner of the crop. For CropBy Offset, specify the horizontal offset of the crop region.
yval	string \| number	For CropBy Region, specify the Y-axis position of the top left corner of the crop. For CropBy Offset, specify the vertical offset of the crop region.
safe	boolean	Ensures that the output image never returns an error due to the specified crop area being out of bounds. The output image is returned as an intersection of the source image and the defined crop area.
smart	boolean	Ensures crop is done using content-aware algorithms. Content-aware image cropping returns a cropped image that automatically fits the defined dimensions while intelligently including the most important components of the image.

Example 1:

const url = 'www.example.com';

const transformObj = new ImageTransform().crop({ width: 100, height: 200 });


const transformURL = url.transform(transformObj);

Example 2:

const url = 'www.example.com';

const transformObj = new ImageTransform().crop({ width: 2, height: 3, cropBy: CropByEnum.ASPECTRATIO });


const transformURL = url.transform(transformObj);

Example 3:

const url = 'www.example.com';

const transformObj = new ImageTransform().crop({ width: 200, height: 300, cropBy: CropByEnum.REGION, xval: 100, yval: 150 });

const transformURL = url.transform(transformObj);

Example 4:

const url = 'www.example.com';

const transformObj = new ImageTransform().crop({ width: 200, height: 300, cropBy: CropByEnum.OFFSET, xval: 100, yval: 150 });


const transformURL = url.transform(transformObj);

dpr

The dpr method lets you deliver images with appropriate size to devices that come with a defined device pixel ratio.

Name	Type	Description
dprValue	number	Specify the device pixel ratio. The value should range between 1-10000 or 0.0 to 9999.999

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().resize({ width: 300, height: 500 }).dpr(10);

const transformURL = url.transform(transformObj);

fit

The fit method enables you to fit the given image properly within the specified height and width.

Name	Type	Description
type	FitByEnum	Specifies fit type (Bounds or Crop)

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().resize({ width: 200, height: 200 }).fit(FitByEnum.BOUNDS);

const transformURL = url.transform(transformObj);

format

The format method lets you convert a given image from one format to another.

Name	Type	Description
format	FitByEnum	Specify the format

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().format(FormatEnum.PJPG);

const transformURL = url.transform(transformObj);

frame

The frame method retrieves the first frame from an animated GIF (Graphics Interchange Format) file that comprises a sequence of moving images.

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().frame();

const transformURL = url.transform(transformObj);

orient

The orient method allows you to rotate or flip an image in any direction.

Name	Type	Description
orientType (required)	FitByEnum	Type of Orientation. Values are DEFAULT, FLIP_HORIZONTAL, FLIP_HORIZONTAL_VERTICAL, FLIP_VERTICAL, FLIP_HORIZONTAL_LEFT, RIGHT, FLIP_HORIZONTAL_RIGHT, LEFT.

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().orient(Orientation.FLIP_HORIZONTAL);


const transformURL = url.transform(transformObj);

overlay

The overlay method lets you place one image over another by specifying the relative URL of the image.

Name	Type	Description
relativeURL (required)	string	URL of the image to overlay on base image
align	OverlayAlignEnum	Lets you define the position of the overlay image. Accepted values are TOP, BOTTOM, LEFT, RIGHT, MIDDLE, CENTER
repeat	OverlayRepeatEnum	Lets you define how the overlay image will be repeated on the given image. Accepted values are X, Y, BOTH
width	string \| number	Lets you define the width of the overlay image. For pixels, use any whole number between 1 and 8192. For percentages, use any decimal number between 0.0 and 0.99
height	string \| number	Lets you define the height of the overlay image. For pixels, use any whole number between 1 and 8192. For percentages, use any decimal number between 0.0 and 0.99
pad	number	Lets you add extra pixels to the edges of an image. This is useful if you want to add whitespace or border to an image

Example 1:

const url = 'www.example.com';

const transformObj = new ImageTransform().overlay({ relativeURL: overlayImgURL });

const transformURL = url.transform(transformObj);

Example 2:

const url = 'www.example.com';

const transformObj = new ImageTransform().overlay({ relativeURL: overlayImgURL, align: OverlayAlignEnum.BOTTOM });

const transformURL = url.transform(transformObj);

Example 3:

const url = 'www.example.com';

const transformObj = new ImageTransform().overlay({

                       relativeURL: overlayImgURL,

                       align: OverlayAlignEnum.BOTTOM,

                       repeat: OverlayRepeatEnum.Y,

                       width: '50p',

                     });

const transformURL = url.transform(transformObj);

padding

The padding method lets you add extra pixels to the edges of an image's border or add whitespace.

Name	Type	Description
padding (required)	number	padding value in pixels or percentages

Example 1:

const url = 'www.example.com';

const transformObj = new ImageTransform().padding([25, 50, 75, 90]);

const transformURL = url.transform(transformObj);

Example 2:

const url = 'www.example.com';

const transformObj = new ImageTransform().padding(50);

const transformURL = url.transform(transformObj);

quality

The quality method lets you control the compression level of images that have lossy file format.

Name	Type	Description
qualityNum (required)	number	Quality range: 1 - 100

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().quality(50);

const transformURL = url.transform(transformObj);

resize

The resize method lets you resize the image in terms of width, height, upscaling the image.

Name	Type	Description
width	number	Specifies the width to resize the image to. The value can be in pixels (for example, 400) or in percentage (for example, 0.60 OR '60p')
height	string \| number	Specifies the height to resize the image to.The value can be in pixels (for example, 400) or in percentage (for example, 0.60 OR '60p')
disable	string	The disable parameter disables the functionality that is enabled by default. As of now, there is only one value, i.e., upscale, that you can use with the disable parameter.

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().resize({ width: 200, height: 200, disable: 'upscale' });

const transformURL = url.transform(transformObj);

resizeFilter

The resizeFilter method allows you to increase or decrease the number of pixels in a given image.

Name	Type	Description
type (required)	ResizeFilterEnum	Types of Filter to apply. Values are NEAREST, BILINEAR, BICUBIC, LANCZOS2, LANCZOS3.

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().resize({ width: 500, height: 550 }).resizeFilter(ResizeFilterEnum.NEAREST);

const transformURL = url.transform(transformObj);

saturation

The saturation method allows you to increase or decrease the intensity of the colors in a given image.

Name	Type	Description
saturationValue (required)	number	To set the saturation of image between -100 to 100

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().saturation(-80.99);

const transformURL = url.transform(transformObj);

sharpen

The sharpen method allows you to increase the definition of the edges of objects in an image.

Name	Type	Description
amount (required)	number	Specifies the amount of contrast to be set for the image edges between the range [0-10]
radius (required)	number	Specifies the radius of the image edges between the range [1-1000]
threshold (required)	number	Specifies the range of image edges that need to be ignored while sharpening between the range [0-255]

Example:

const url = 'www.example.com';

const transformObj = new ImageTransform().sharpen(5, 1000, 2);

const transformURL = url.transform(transformObj);

trim

The trim method lets you trim an image from the edges.

Name	Type	Description
trimValue (required)	number \| number[]	Specifies values for top, right, bottom, and left edges of an image.

Example 1:

const url = 'www.example.com';

const transformObj = new ImageTransform().trim([25, 50, 75, 90]);

const transformURL = url.transform(transformObj);

Example 2:

const url = 'www.example.com';

const transformObj = new ImageTransform().trim([25, 50, 25]);

const transformURL = url.transform(transformObj);

Example 3:

const url = 'www.example.com';

const transformObj = new ImageTransform().trim(50);

const transformURL = url.transform(transformObj);