# Positionable crop

Allows to crop an image by providing the exact cropping area. It is useful when you want to crop a specific part of the image. To set the coordinates of the crop rectangle, use the **tl\_px** and **br\_px** operations or  the `X` and `Y` Parameters are an alternative way to set the coordinates.

<mark style="color:orange;">**tl\_px=X1,Y1**</mark>

<mark style="color:orange;">**br\_px=X2,Y2**</mark>\
\ <mark style="color:orange;">**X=X1**</mark>\ <mark style="color:orange;">**Y=Y1**</mark>

## Examples

Origin image: [/docs/kids.jpg](https://doc.cloudimg.io/https://samples.scaleflex.com/kids.jpg)

<figure><img src="https://fdocs.filerobot.com/docs/kids.jpg" alt=""><figcaption></figcaption></figure>

| Preview                                                                                                                               | Syntax                                                                                                                                                                                                                                       |
| ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/vi9ezcYK4Ws9WEs2uCMu/image.png)                                    | [/samples.scaleflex.com/kids.jpg?<mark style="color:orange;">**tl\_px=900,100**</mark>&<mark style="color:orange;">**br\_px=1300,550**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/kids.jpg?tl_px=900,100\&br_px=1300,550) |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/ly2aBMyeNzWG9QN3i7OR/image.png)                                    | [/samples.scaleflex.com/kids.jpg?<mark style="color:orange;">**br\_px=890,560**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/kids.jpg?br_px=890,560)                                                                        |
| <img src="https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/PJiPS88JRkfWtNjoRo6U/image.png" alt="" data-size="original"> | [<mark style="color:blue;">**/samples.scaleflex.com/kids.jpg?**</mark><mark style="color:orange;">**x=650\&y=100**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/kids.jpg?x=650\&y=100)                                      |

## Combining positionable crop with resize modes

Positionable crop is a separate operation can be combined with all available resize functions - [width-and-height](https://docs.cloudimage.io/transformations/image-operations/width-and-height "mention"), [](https://docs.cloudimage.io/transformations/image-operations/crop "mention"), [fit](https://docs.cloudimage.io/transformations/image-operations/fit "mention"), [bound](https://docs.cloudimage.io/transformations/image-operations/bound "mention") and [cover](https://docs.cloudimage.io/transformations/image-operations/cover "mention"). This resize is always performed after the positionable crop.

### Examples

| Preview                                                                                            | Syntax                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/c1356chEfyyb8iLolVEO/image.png) | [/samples.scaleflex.com/kids.jpg?<mark style="color:orange;">**w=200**</mark>&<mark style="color:orange;">**tl\_px=900,0**</mark>&<mark style="color:orange;">**br\_px=1300,600**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/kids.jpg?w=200\&tl_px=900,0\&br_px=1300,600)                                                                                                                                                                                          |
| ![](https://content.gitbook.com/content/IDIcmPiz7q6Sr6ZHHQxV/blobs/L6XVw0HcvJ7rpIl1pHTJ/image.png) | [/samples.scaleflex.com/kids.jpg?<mark style="color:orange;">**w=800**</mark>&<mark style="color:orange;">**h=270**</mark>&<mark style="color:orange;">**tl\_px=310,70**</mark>&<mark style="color:orange;">**br\_px=1550,580**</mark>&<mark style="color:orange;">**func=fit**</mark>&<mark style="color:orange;">**bg\_color=3498db**</mark>](https://doc.cloudimg.io/https://samples.scaleflex.com/kids.jpg?w=800\&h=270\&tl_px=310,70\&br_px=1550,580\&func=fit\&bg_color=3498db) |