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:
Copy to clipboard
cl_image_tag("kitten.jpg")
PHP:
Copy to clipboard
cl_image_tag("kitten.jpg")
Python:
Copy to clipboard
CloudinaryImage("kitten.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("kitten.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("kitten.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('kitten.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("kitten.jpg")
React:
Copy to clipboard
<Image publicId="kitten.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="kitten.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="kitten.jpg" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("kitten.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("kitten.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("kitten.jpg")!, cloudinary: cloudinary)
Original

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

Ruby:
Copy to clipboard
cl_image_tag("kitten.jpg", :width=>300, :height=>250, :crop=>"crop")
PHP:
Copy to clipboard
cl_image_tag("kitten.jpg", array("width"=>300, "height"=>250, "crop"=>"crop"))
Python:
Copy to clipboard
CloudinaryImage("kitten.jpg").image(width=300, height=250, crop="crop")
Node.js:
Copy to clipboard
cloudinary.image("kitten.jpg", {width: 300, height: 250, crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(300).height(250).crop("crop")).imageTag("kitten.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('kitten.jpg', {width: 300, height: 250, crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("kitten.jpg", {width: 300, height: 250, crop: "crop"})
React:
Copy to clipboard
<Image publicId="kitten.jpg" >
  <Transformation width="300" height="250" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="kitten.jpg" >
  <cld-transformation width="300" height="250" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="kitten.jpg" >
  <cl-transformation width="300" height="250" crop="crop">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(250).Crop("crop")).BuildImageTag("kitten.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(300).height(250).crop("crop")).generate("kitten.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(250).setCrop("crop")).generate("kitten.jpg")!, cloudinary: cloudinary)
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:
Copy to clipboard
cl_image_tag("kitten.jpg", :x=>385, :y=>90, :width=>300, :height=>250, :crop=>"crop")
PHP:
Copy to clipboard
cl_image_tag("kitten.jpg", array("x"=>385, "y"=>90, "width"=>300, "height"=>250, "crop"=>"crop"))
Python:
Copy to clipboard
CloudinaryImage("kitten.jpg").image(x=385, y=90, width=300, height=250, crop="crop")
Node.js:
Copy to clipboard
cloudinary.image("kitten.jpg", {x: 385, y: 90, width: 300, height: 250, crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().x(385).y(90).width(300).height(250).crop("crop")).imageTag("kitten.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('kitten.jpg', {x: 385, y: 90, width: 300, height: 250, crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("kitten.jpg", {x: 385, y: 90, width: 300, height: 250, crop: "crop"})
React:
Copy to clipboard
<Image publicId="kitten.jpg" >
  <Transformation x="385" y="90" width="300" height="250" crop="crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="kitten.jpg" >
  <cld-transformation x="385" y="90" width="300" height="250" crop="crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="kitten.jpg" >
  <cl-transformation x="385" y="90" width="300" height="250" crop="crop">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().X(385).Y(90).Width(300).Height(250).Crop("crop")).BuildImageTag("kitten.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().x(385).y(90).width(300).height(250).crop("crop")).generate("kitten.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setX(385).setY(90).setWidth(300).setHeight(250).setCrop("crop")).generate("kitten.jpg")!, cloudinary: cloudinary)
By Coordinates

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

by Itay Taragano