Crop pictures by custom coordinates

Crop your images by specifying the width and height parameters (w and h in URLs) while setting the crop parameter to crop (c_crop in URLs). This will extract only part of a given width & height out of the original image. The original proportions are retained and so is the size of the graphics.

Here's an original image:

Ruby:
cl_image_tag("kitten.jpg")
PHP:
cl_image_tag("kitten.jpg")
Python:
CloudinaryImage("kitten.jpg").image()
Node.js:
cloudinary.image("kitten.jpg")
Java:
cloudinary.url().imageTag("kitten.jpg")
JS:
cl.imageTag('kitten.jpg').toHtml();
jQuery:
$.cloudinary.image("kitten.jpg")
React:
<Image publicId="kitten.jpg" >

</Image>
Angular:
<cl-image public-id="kitten.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("kitten.jpg")
Original

Here is a 150x150 images cropped from the center of the original:

Ruby:
cl_image_tag("kitten.jpg", :width=>300, :height=>250, :crop=>"crop")
PHP:
cl_image_tag("kitten.jpg", array("width"=>300, "height"=>250, "crop"=>"crop"))
Python:
CloudinaryImage("kitten.jpg").image(width=300, height=250, crop="crop")
Node.js:
cloudinary.image("kitten.jpg", {width: 300, height: 250, crop: "crop"})
Java:
cloudinary.url().transformation(new Transformation().width(300).height(250).crop("crop")).imageTag("kitten.jpg")
JS:
cl.imageTag('kitten.jpg', {width: 300, height: 250, crop: "crop"}).toHtml();
jQuery:
$.cloudinary.image("kitten.jpg", {width: 300, height: 250, crop: "crop"})
React:
<Image publicId="kitten.jpg" >
  <Transformation width="300" height="250" crop="crop" />
</Image>
Angular:
<cl-image public-id="kitten.jpg" >
  <cl-transformation width="300" height="250" crop="crop">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(250).Crop("crop")).BuildImageTag("kitten.jpg")
Center crop

Cloudinary also supports custom/fixed coordinates cropping. Use this method when you know beforehand what the correct absolute cropping coordinates are. For example, this method is helpful when your users manually select the region to crop out of the original image. Many Javascript libraries (such as Jcrop) support client-side cropping region selection. Simply send the coordinates to Cloudinary and get the desired cropped image.

Custom coordinates cropping is applied by setting the x and y of the corner with the width and height of the requested result:

Ruby:
cl_image_tag("kitten.jpg", :x=>385, :y=>90, :width=>300, :height=>250, :crop=>"crop")
PHP:
cl_image_tag("kitten.jpg", array("x"=>385, "y"=>90, "width"=>300, "height"=>250, "crop"=>"crop"))
Python:
CloudinaryImage("kitten.jpg").image(x=385, y=90, width=300, height=250, crop="crop")
Node.js:
cloudinary.image("kitten.jpg", {x: 385, y: 90, width: 300, height: 250, crop: "crop"})
Java:
cloudinary.url().transformation(new Transformation().x(385).y(90).width(300).height(250).crop("crop")).imageTag("kitten.jpg")
JS:
cl.imageTag('kitten.jpg', {x: 385, y: 90, width: 300, height: 250, crop: "crop"}).toHtml();
jQuery:
$.cloudinary.image("kitten.jpg", {x: 385, y: 90, width: 300, height: 250, crop: "crop"})
React:
<Image publicId="kitten.jpg" >
  <Transformation x="385" y="90" width="300" height="250" crop="crop" />
</Image>
Angular:
<cl-image public-id="kitten.jpg" >
  <cl-transformation x="385" y="90" width="300" height="250" crop="crop">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().X(385).Y(90).Width(300).Height(250).Crop("crop")).BuildImageTag("kitten.jpg")
By Coordinates

See this blog post for more information: Cloudinary as the server-side for Javascript image cropping libraries.

by Itay Taragano