Transform Transformations – Bynder Support

Fill

With the below transformation you can ensure that as much of the image as possible remains visible. With the gravity you can set which part of the image shouldn't be cropped. Other sides still may be cropped depending on the entered dimensions. The aspect ratio is maintained. See the example below.
```
?io=transform:fill,width:100,height:200,gravity:center
```
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=transform:fill,width:500,height:500,gravity:topleft

Properties	Name	Type	Default Value	Range
Transformed image width in pixels	width	int	﹥0 and less than max width (max width = width of the base DAT derivative)
Transformed image height in pixels	height	int	﹥0 and less than max height (max height = width of the base DAT derivative)
Indicates which area to keep for the transformation. The other areas may be cropped.	gravity	sting	center	Center, top, topleft, topright, left, right, bottom, bottomleft, bottomright

With this transformation you can resize the image based on the specified parameters. The aspect ratio won't change. See the example below.

?io=transform:fit,width:200,height:200

Properties	Name	Type	Default Value	Required
Transformed image width in pixels	width	int	﹥0 and less than max width (max width = width of the base DAT derivative)	Yes
Transformed image height in pixels	height	int	﹥0 and less than max height (max height = width of the base DAT derivative)	Yes

With this transformation you can extend the image to the specified dimensions. See the example below.

?io=transform:extend,width:110,height:100

Name	Type	Default Value	Description	Range	Required
width	int	﹥0 and less than max width (max width = width of the base DAT derivative)	Fit the image (resize) to a box based on the specified width and height.		Yes
height	int	﹥0 and less than max height (max height = width of the base DAT derivative)
background	string	white		HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color.

With this transformation you can scale the image to the specified width and height. The aspect ratio may change. See the example below.

?io=transform:scale,width:200,height:200

Name	Type	Default value
width	int	﹥0 and less than max width (max width = width of the base DAT derivative)
height	int	﹥0 and less than max height (max height = width of the base DAT derivative)

With this transformation you can crop a part of the image. See the example below.

?io=transform:crop,width:200,height:200

Name	Type	Default Value	Description	Range	Required
width	int	﹥0 and less than max width (max width = width of the base DAT derivative)			Yes
height	int	﹥0 and less than max width (max width = width of the base DAT derivative)			Yes
gravity	string	center	The crop will start from the specified area. This part of the image will remain and other areas may be cropped.	Center, top, topleft, topright, left, right, bottom, bottomleft, bottomright	No
shape	string	circle	This will change the crop to a round shape. Make sure width and height are set to the same dimensions in order to use a circle. Use different dimensions to use an oval.		No
background	string	white	Add a background color	HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color.	No
blur	int	0	Blur the edge of the crop	0 to 100	No

With this transformation you can rotate the image clockwise based on the specified degrees. See the example below.

?io=transform:rotate,angle:270

Name	Type	Default Value	Description	Range	Required
angle	int	0	Rotate the image by a certain angle in degrees, clockwise	0 < 360	Yes

With this transformation you can flip the image vertically. See the example below.

?io=transform:flip

With this transformation you can flip the image horizontally. See the example below.

?io=transform:mirror

With this transformation you can add a border around the image and specify the border width and border color. See the example below.

?io=transform:border,width:2,color:black

Name	Type	Description	Range	Required
width	int	The border width specified in pixels.	﹥0 and less than the maximum width of the DAT derivative	Yes
color	string	The color of the border	Specify the border color using HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color.	No

With this transformation you can change the background color of a transparent image. See the example below.

?io=transform:background,color:grey

Name	Type	Default Value	Range	Required
color	string	white	Specify the background color using HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color.	Yes