-
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
|
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
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=transform:rotate,angle:45
|
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
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=transform:flip
With this transformation you can flip the image horizontally. See the example below.
?io=transform:mirror
Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?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 |
<%= heading %>