Detect whether an object in an image is centered
Detect Center transformation allows users to detect whether or not an object in an image is in the center.
The result of Detect Center is a JSON, as shown below:
{
"data": {
"output": {
"is_center": true,
"distance_x_px": 313,
"distance_y_px": 115,
"distance_x_perc": 32.604,
"distance_y_perc": 21.296,
"original_input_size": "(1080, 1920, 4)"
}
}
}
The JSON keys are explained in the below table:
Property | Description |
---|---|
is_center | The boolean value specifies whether or not an image object is in the center. If the value is true , the image's object is in the center; if the value is false , the image's object is not in the center. |
distance_x_px | The distance in pixels between the y-axes drawn from the image's center and the object's center. |
distance_y_px | The distance in pixels between the x-axes drawn from the image's center and the object's center. |
distance_x_perc | The distance_x_px expressed in percentage is calculated after dividing an image's width in half. |
distance_y_perc | The distance_y_px expressed in percentage is calculated after dividing an image's height in half. |
original_input_size | A dimension of the input image (height, width, and channel). |
Instead of getting the output in a traditional CDN URL, you will find the JSON output from the Context API while the CDN URL will return the original image without any modifications.
- Input Image
- Context API Response
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/water_sprayer.jpeg" />
{
"output": {
"is_center": false,
"distance_x_px": 82,
"distance_x_perc": 25.625,
"distance_y_px": 19,
"distance_y_perc": 7.421,
"original_input_size": "(512, 640, 3)"
}
}
The Context API Response tab consists of a JSON response that has an is_center
property false
, which states that the object in the image is not in the center. As shown in the below image, point "A" is the center of the image, and point "B" is the center of the object. The distance_x_px
is 82 px, and the distance_x_perc
is 25.625%, which is calculated after dividing an image's width in half. The distance_y_px
is 19 px, and the distance_y_perc
is 7.421%, which is calculated after dividing an image's height in half. The original_input_size
is (512, 640, 3), where 512 px is the height of an image, 640 px is the width of an image, and the number of channels in the image is 3.
Params
Distance Percentage (dist_perc
)
Maximum distance percentage from the center of the image, beyond which the image won't be considered to be centered.
The default value is 10
.
- Input Image
- Context API Response (dist_perc=10 (default))
- Context API Response (dist_perc=20)
- URL
- React
<PixelBinImage url="https://cdn.pixelbin.io/v2/dummy-cloudname/FIDrmb/original/images/transformation/basic_pink_flower.jpeg" />
{
"output": {
"is_center": false,
"distance_x_px": 31,
"distance_y_px": 32,
"distance_x_perc": 9.538,
"distance_y_perc": 18.285,
"original_input_size": "(350, 650, 3)"
}
}
{
"output": {
"is_center": true,
"distance_x_px": 31,
"distance_y_px": 32,
"distance_x_perc": 9.538,
"distance_y_perc": 18.285,
"original_input_size": "(350, 650, 3)"
}
}
The Context API Response (dist_perc=10 (default)) tab consists of a JSON response that has an is_center
property false
, which states that the object in the image is not in the center. As shown in the below image, point "A" is the center of the image, and point "B" is the center of the object. The distance_x_px
is 31 px, and the distance_x_perc
is 9.538%, which is calculated after dividing an image's width in half. The distance_y_px
is 32 px, and the distance_y_perc
is 18.285%, which is calculated after dividing an image's height in half. In this case, the center of the object is 9.538% (31 px) to the right and 18.285% (32 px) to the top. The dist_perc is 10%, indicating that the object is centered as long as its center does not deviate above 10% from the center of the image.
The horizontal (x) deviation is 9.538% to the right, which is less than the dist_perc of 10%, while the vertical (y) deviation is 18.285% to the right, which is greater than the dist_perc of 10%. Since neither of the percentage values is greater than 18.285%, the is_center
property has returned false
.
To make the is_center
property true
in the above image, increase the dist_perc amount above 18.285%.
The Context API Response (dist_perc=20) tab contains a JSON response that is obtained when the dist_perc parameter is set to 20%. In this case, the is_center
property is returned as true
in the JSON.