Imagga Crop and Scale

Cloudinary is a cloud-based service that provides an end-to-end asset management solution including uploads, storage, transformations, optimizations and delivery.

Cloudinary offers a very rich set of image transformation and cropping capabilities. Cloudinary allows you to crop an image in various cropping modes (scale, fit, fill and more). To achieve a great looking cropped image, Cloudinary allows you to specify the area of interest of an image, either manually or automatically using face-detection based cropping.

Imagga develops and offers technologies, services, and online tools for visual image recognition. Cloudinary provides an add-on for using Imagga's image recognition capabilities, fully integrated into Cloudinary's image management and transformation pipeline.

With Imagga's smart cropping add-on, you can extend Cloudinary's powerful cropping capabilities with automatically cropping that is not only based on detected faces. When using the Imagga add-on, your images will be scaled and cropped based on automatically calculated areas of interest of each specific photo.

Getting started

Before you can use the Imagga Crop and Scale add-on:

  • You must have a Cloudinary account. If you don't already have one, you can sign up for a free account.

  • Register for the add-on: make sure you're logged in to your account and then go to the Add-ons page. For more information about add-on registrations, see Registering for add-ons.

  • Keep in mind that many of the examples on this page use our SDKs. For SDK installation and configuration details, see the relevant SDK guide.

  • If you are new to Cloudinary, you may want to take a look at How to integrate Cloudinary in your app for a walk through on the basics of creating and setting up your account, working with SDKs, and then uploading, transforming and delivering assets.

Important
By default, delivery URLs that use this add-on either need to be signed or eagerly generated. You can optionally remove this requirement by selecting this add-on in the Allow unsigned add-on transformations section of the Security account settings in the Cloudinary console (the demo account has this setting applied to make the examples on this page easier to read and try out).

Using Imagga

Before you start, if you haven't done so already, please sign-up to a free Cloudinary account. After signing up, you can try the Imagga add-on for free and later on subscribe to an Imagga add-on plan that best matches your usage requirements.

Take a look at the following photo that was uploaded to Cloudinary. As you can see, most of the photo consists of the green park background surrounding the happy family. In order to better fit in websites and mobile apps, we would want to crop the image so it focuses on the most important region of the photo.

Ruby:
Copy to clipboard
cl_image_tag("family_bench.jpg")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('family_bench.jpg'));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("family_bench.jpg")
Python:
Copy to clipboard
CloudinaryImage("family_bench.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("family_bench.jpg")
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().imageTag("family_bench.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("family_bench.jpg");
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('family_bench.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("family_bench.jpg")
React:
Copy to clipboard
<Image publicId="family_bench.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="family_bench.jpg" >

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

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("family_bench.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("family_bench.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().generate("family_bench.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("family_bench.jpg") 
}.generate()
family

Setting the crop transformation parameter to imagga_crop (or c_imagga_crop for URLs) tells Cloudinary to generate the best cropped version of the original image using the Imagga add-on. The example image below was smartly cropped using Imagga, focusing on the family while keeping parts of the green park background. Note that no width or height parameters were specified. This means that Imagga automatically defines the best crop resolution. The generated image is stored in the cloud and delivered optimized via a fast CDN.

Ruby:
Copy to clipboard
cl_image_tag("family_bench.jpg", :crop=>"imagga_crop")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('family_bench.jpg'))
  ->resize(Resize::imaggaCrop());
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("family_bench.jpg", array("crop"=>"imagga_crop"))
Python:
Copy to clipboard
CloudinaryImage("family_bench.jpg").image(crop="imagga_crop")
Node.js:
Copy to clipboard
cloudinary.image("family_bench.jpg", {crop: "imagga_crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().crop("imagga_crop")).imageTag("family_bench.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("family_bench.jpg").resize(imaggaCrop());
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('family_bench.jpg', {crop: "imagga_crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("family_bench.jpg", {crop: "imagga_crop"})
React:
Copy to clipboard
<Image publicId="family_bench.jpg" >
  <Transformation crop="imagga_crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="family_bench.jpg" >
  <cld-transformation crop="imagga_crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="family_bench.jpg" >
  <cl-transformation crop="imagga_crop">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Crop("imagga_crop")).BuildImageTag("family_bench.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setCrop("imagga_crop")).generate("family_bench.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().crop("imagga_crop")).generate("family_bench.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("family_bench.jpg")
   resize(Resize.imaggaCrop()) 
}.generate()
family

Signed URLs

Cloudinary's dynamic image transformation URLs are quite powerful and enable agile web and mobile development. However, due to the potential costs of users accessing unplanned dynamic URLs with Imagga cropping directives, image transformation add-on URLs are required (by default) to be signed using Cloudinary's authenticated API and with the sign_url parameter set to true. Only URLs with a valid signature that matches the requested image transformation will be approved for on-the-fly image transformation and delivery.

The following code example generates an image tag with a signed Cloudinary URL while setting the crop parameter to imagga_scale while requesting a 150x200 smartly cropped image of the same original image. The generated Cloudinary URL includes a signature component (s--N5szE634--).

Ruby:
Copy to clipboard
cl_image_tag("family_bench.jpg", :height=>200, :width=>150, :crop=>"imagga_scale", :sign_url=>true)
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('family_bench.jpg'))
  ->resize(Resize::imaggaScale()->width(150)
->height(200))
  ->sign();
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("family_bench.jpg", array("height"=>200, "width"=>150, "crop"=>"imagga_scale", "sign_url"=>true))
Python:
Copy to clipboard
CloudinaryImage("family_bench.jpg").image(height=200, width=150, crop="imagga_scale", sign_url=True)
Node.js:
Copy to clipboard
cloudinary.image("family_bench.jpg", {height: 200, width: 150, crop: "imagga_scale", sign_url: true})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().height(200).width(150).crop("imagga_scale")).signed(true).imageTag("family_bench.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("family_bench.jpg")
  .resize(imaggaScale().width(150).height(200))
  .setSignature("N5szE634");
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('family_bench.jpg', {height: 200, width: 150, crop: "imagga_scale", signUrl: true}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("family_bench.jpg", {height: 200, width: 150, crop: "imagga_scale"})
React:
Copy to clipboard
<Image publicId="family_bench.jpg" signUrl="true">
  <Transformation height="200" width="150" crop="imagga_scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="family_bench.jpg" sign-url="true">
  <cld-transformation height="200" width="150" crop="imagga_scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="family_bench.jpg" sign-url="true">
  <cl-transformation height="200" width="150" crop="imagga_scale">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200).Width(150).Crop("imagga_scale")).Signed(true).BuildImageTag("family_bench.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setWidth(150).setCrop("imagga_scale")).generate("family_bench.jpg", signUrl: true)!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().height(200).width(150).crop("imagga_scale")).signed(true).generate("family_bench.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("family_bench.jpg")
   resize(Resize.imaggaScale() { width(150)
 height(200) })
   signature() 
}.generate()

For more details regarding signed URLs, see the following blog post: On-the-fly image transformations secured with signed URLs.

Note
You can optionally remove the default signed URL requirement for a particular add-on by selecting it in the Allow unsigned add-on transformations section of the Security account settings in the Cloudinary console.

Eager transformations

Alternatively to signed URLs, you can eagerly generate all cropped images during upload. This way you already use Cloudinary's authenticated API for requesting Imagga cropping, therefore, accessing the generated images can be done using regular unsigned Cloudinary URLs.

The following code sample uploads a local JPG file to Cloudinary, assigns a custom public ID and eagerly generates the same 150x200 smartly cropped thumbnail using Imagga as in the signed-URL example above.

Ruby:
Copy to clipboard
Cloudinary::Uploader.upload("local_file.jpg",
  :public_id => "family_bench",
  :eager => { :crop => "imagga_scale", :width => 150, :height => 200 })
PHP (cloudinary_php v2.x):
Copy to clipboard
$cloudinary->uploadApi()->upload("local_file.jpg", [
    "public_id" => "family_bench",
    "eager" =>
      [ "crop" => "imagga_scale", "width" => 150, "height" => 200 ]]);
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
\Cloudinary\Uploader::upload("local_file.jpg", [
    "public_id" => "family_bench",
    "eager" =>
      [ "crop" => "imagga_scale", "width" => 150, "height" => 200 ]]);
Python:
Copy to clipboard
cloudinary.uploader.upload("local_file.jpg",
  public_id = "family_bench",
  eager = { 'crop': "imagga_scale", 'width': 150, 'height': 200 })
Node.js:
Copy to clipboard
cloudinary.v2.uploader.upload("local_file.jpg",
  { public_id: "family_bench",
    eager: { crop: "imagga_scale", width: 150, height: 200 }}),
  function(error, result) {console.log(result, error); });
Java:
Copy to clipboard
cloudinary.uploader().upload("local_file.jpg",
  ObjectUtils.asMap("public_id", "family_bench", 
    "eager", Arrays.asList(
      new EagerTransformation().crop("imagga_scale").width(150).height(200))));
.NET:
Copy to clipboard
var uploadParams = new ImageUploadParams(){
  File = new FileDescription(@"local_file.jpg"),
  PublicId = "family_bench",
  EagerTransforms = new List<Transformation>(){
   new EagerTransformation().Crop("imagga_scale").Width(150).Height(200)}};
var uploadResult = cloudinary.Upload(uploadParams);
iOS:
Copy to clipboard
let eager = CLDEagerTransformation()
  .setWidth(150).setHeight(200).setCrop("imagga_scale")
let params = CLDUploadRequestParams().setEager([eager])
var mySig = MyFunction(params)  // your own function that returns a signature generated on your backend
params.setSignature(CLDSignature(signature: mySig.signature, timestamp: mySig.timestamp))
let request = cloudinary.createUploader().signedUpload(url: "local_file.jpg", params: params)
Android:
Copy to clipboard
MediaManager.get().upload("local_file.jpg")
  .option("public_id", "family_bench")
  .option("eager", Arrays.asList(
      new EagerTransformation().crop("imagga_scale").width(150).height(200))).dispatch();
cURL:
Copy to clipboard
curl https://api.cloudinary.com/v1_1/demo/image/upload -X POST --data 'file=local_file.jpg&public_id=family_bench&eager=c_imagga_scale,w_150,h_200&timestamp=173719931&api_key=436464676&signature=a781d61f86a6f818af'
CLI:
Copy to clipboard
cld uploader upload "local_file.jpg" public_id="family_bench" eager='{"crop": "imagga_scale", "width": 150, "height": 200}'

Tip
You can use upload presets to centrally define a set of upload options including add-on operations to apply, instead of specifying them in each upload call. You can define multiple upload presets, and apply different presets in different upload scenarios. You can create new upload presets in the Upload page of the Management Console settings or using the upload_presets Admin API method. From the Upload page of the console settings, you can also select default upload presets to use for image, video, and raw API uploads (respectively) as well as default presets for image, video, and raw uploads performed via the Media Library UI.

Learn more: Upload presets

The cropped image is available for delivery immediately when the upload request completes. Therefore, the cropped version can be accessed using an unsigned URL as in the example below:

Copy to clipboard
https://res.cloudinary.com/demo/image/upload/c_imagga_scale,w_150,h_200/family_bench.jpg

Smartly scale images

Imagga's smart cropping can be applied in two modes: scale and crop. The scale mode is similar to Cloudinary's standard fill mode and generates an image of the exact requested width and height dimensions, while only a certain portion of the original image is included in the derived image.

Take a look at the following photo that was uploaded to Cloudinary:

Ruby:
Copy to clipboard
cl_image_tag("sample_van.jpg")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('sample_van.jpg'));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("sample_van.jpg")
Python:
Copy to clipboard
CloudinaryImage("sample_van.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("sample_van.jpg")
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().imageTag("sample_van.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("sample_van.jpg");
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('sample_van.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample_van.jpg")
React:
Copy to clipboard
<Image publicId="sample_van.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="sample_van.jpg" >

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

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("sample_van.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("sample_van.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().generate("sample_van.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("sample_van.jpg") 
}.generate()
sample van

As you can see in the sample code below, setting the crop parameter to imagga_scale together with the width and height parameters generates a smartly scaled image that perfectly fits the requested dimensions. In this sample code, we generate the actual URL instead of the HTML image tag.

Ruby:
Copy to clipboard
cloudinary_url("sample_van.jpg", :crop => "imagga_scale",
  :width => 260, :height => 240,
  :sign_url => true)
PHP (cloudinary_php v2.x):
Copy to clipboard
Image::fromParams("sample_van.jpg", [
  "crop" => "imagga_scale", "width" => 260, "height" => 240,
        "sign_url" => true]);
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cloudinary_url("sample_van.jpg", [
  "crop" => "imagga_scale", "width" => 260, "height" => 240,
        "sign_url" => true]);
Python:
Copy to clipboard
cloudinary.CloudinaryImage("sample_van.jpg").build_url(
  crop = "imagga_scale", width = 260, height = 240,
  sign_url = True)
Node.js:
Copy to clipboard
cloudinary.url("sample_van.jpg",
  { crop: "imagga_scale", width: 260, height: 240,
    sign_url: true });
Java:
Copy to clipboard
cloudinary.url().transformation(
  new Transformation().crop("imagga_scale").
    width(260).height(240)).signed(true).generate("sample_van.jpg");
.NET:
Copy to clipboard
cloudinary.UrlImgUp.Transform(
  new Transformation().Crop("imagga_scale")
    .Width(260).Height(240)).Signed(true).BuildUrl("sample_van.jpg")
iOS:
Copy to clipboard
let tr = CLDTransformation().setWidth(260).setHeight(240).setCrop("imagga_scale")
let url = cloudinary.createUrl().setTransformation(tr).generate("sample.jpg", signUrl: true)
Android:
Copy to clipboard
MediaManager.get().url().transformation(
  new Transformation().crop("imagga_scale").
    width(260).height(240)).signed(true).generate("sample_van.jpg");
CLI:
Copy to clipboard
cld url -s sample_van.jpg 'c_imagga_scale,h_240,w_260'

The following 260x240 JPG image is generated on-the-fly in the cloud and can be embedded directly in your website using the sample code above:

Ruby:
Copy to clipboard
cl_image_tag("sample_van.jpg", :height=>240, :width=>260, :crop=>"imagga_scale", :sign_url=>true)
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('sample_van.jpg'))
  ->resize(Resize::imaggaScale()->width(260)
->height(240))
  ->sign();
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("sample_van.jpg", array("height"=>240, "width"=>260, "crop"=>"imagga_scale", "sign_url"=>true))
Python:
Copy to clipboard
CloudinaryImage("sample_van.jpg").image(height=240, width=260, crop="imagga_scale", sign_url=True)
Node.js:
Copy to clipboard
cloudinary.image("sample_van.jpg", {height: 240, width: 260, crop: "imagga_scale", sign_url: true})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().height(240).width(260).crop("imagga_scale")).signed(true).imageTag("sample_van.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("sample_van.jpg")
  .resize(imaggaScale().width(260).height(240))
  .setSignature("Kwuyl0FK");
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('sample_van.jpg', {height: 240, width: 260, crop: "imagga_scale", signUrl: true}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample_van.jpg", {height: 240, width: 260, crop: "imagga_scale"})
React:
Copy to clipboard
<Image publicId="sample_van.jpg" signUrl="true">
  <Transformation height="240" width="260" crop="imagga_scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="sample_van.jpg" sign-url="true">
  <cld-transformation height="240" width="260" crop="imagga_scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample_van.jpg" sign-url="true">
  <cl-transformation height="240" width="260" crop="imagga_scale">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(240).Width(260).Crop("imagga_scale")).Signed(true).BuildImageTag("sample_van.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(240).setWidth(260).setCrop("imagga_scale")).generate("sample_van.jpg", signUrl: true)!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().height(240).width(260).crop("imagga_scale")).signed(true).generate("sample_van.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("sample_van.jpg")
   resize(Resize.imaggaScale() { width(260)
 height(240) })
   signature() 
}.generate()
with imagga scaling

Smartly crop images

In addition to scaling an image to fill the requested dimensions, the Imagga add-on can also crop the original image to a certain region, without scaling. The specific region is smartly selected by Imagga.

Let's take a look again at the following image that was previously uploaded to Cloudinary:

Ruby:
Copy to clipboard
cl_image_tag("family_bench.jpg")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('family_bench.jpg'));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("family_bench.jpg")
Python:
Copy to clipboard
CloudinaryImage("family_bench.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("family_bench.jpg")
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().imageTag("family_bench.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("family_bench.jpg");
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('family_bench.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("family_bench.jpg")
React:
Copy to clipboard
<Image publicId="family_bench.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="family_bench.jpg" >

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

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("family_bench.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("family_bench.jpg")!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().generate("family_bench.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("family_bench.jpg") 
}.generate()
family bench

Setting the crop transformation parameter to imagga_crop (or c_imagga_crop for dynamic URLs) together with the requested width and height dimensions, smartly crops an image.

For example, a 380x380 smartly cropped region of the original image was smartly selected to contain mainly the family members, rather than the large green park background.

Ruby:
Copy to clipboard
cl_image_tag("family_bench.jpg", :height=>380, :width=>380, :crop=>"imagga_crop", :sign_url=>true)
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('family_bench.jpg'))
  ->resize(Resize::imaggaCrop()->width(380)
->height(380))
  ->sign();
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("family_bench.jpg", array("height"=>380, "width"=>380, "crop"=>"imagga_crop", "sign_url"=>true))
Python:
Copy to clipboard
CloudinaryImage("family_bench.jpg").image(height=380, width=380, crop="imagga_crop", sign_url=True)
Node.js:
Copy to clipboard
cloudinary.image("family_bench.jpg", {height: 380, width: 380, crop: "imagga_crop", sign_url: true})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().height(380).width(380).crop("imagga_crop")).signed(true).imageTag("family_bench.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryImage("family_bench.jpg")
  .resize(imaggaCrop().width(380).height(380))
  .setSignature("_G14i7Wz");
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('family_bench.jpg', {height: 380, width: 380, crop: "imagga_crop", signUrl: true}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("family_bench.jpg", {height: 380, width: 380, crop: "imagga_crop"})
React:
Copy to clipboard
<Image publicId="family_bench.jpg" signUrl="true">
  <Transformation height="380" width="380" crop="imagga_crop" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="family_bench.jpg" sign-url="true">
  <cld-transformation height="380" width="380" crop="imagga_crop" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="family_bench.jpg" sign-url="true">
  <cl-transformation height="380" width="380" crop="imagga_crop">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(380).Width(380).Crop("imagga_crop")).Signed(true).BuildImageTag("family_bench.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(380).setWidth(380).setCrop("imagga_crop")).generate("family_bench.jpg", signUrl: true)!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().height(380).width(380).crop("imagga_crop")).signed(true).generate("family_bench.jpg");
Kotlin:
Copy to clipboard
cloudinary.image {
  publicId("family_bench.jpg")
   resize(Resize.imaggaCrop() { width(380)
 height(380) })
   signature() 
}.generate()
with imagga_crop

Further image transformations

Smart cropping and scaling using the Imagga Cloudinary add-on can be mixed with any of Cloudinary's rich set of image transformation capabilities.

For example, the following code first crops an uploaded image to 450x300 while rounding its corners and increasing color saturation by 50%. Then another uploaded image named 'imagga_logo' is added as an overlay. The overlay is resized to a width of 100 pixels, positioned 10 pixels from the bottom left corner of the containing image and is made 80% semi transparent.

Ruby:
Copy to clipboard
cl_image_tag("family_bench.jpg", :sign_url=>true, :transformation=>[
  {:height=>300, :width=>450, :crop=>"imagga_crop"},
  {:radius=>20},
  {:effect=>"saturation:50"},
  {:overlay=>"imagga_logo"},
  {:width=>100, :crop=>"scale"},
  {:opacity=>80},
  {:flags=>"layer_apply", :gravity=>"south_west", :x=>10, :y=>10}
  ])
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('family_bench.jpg'))
  ->resize(Resize::imaggaCrop()->width(450)
->height(300))
  ->roundCorners(RoundCorners::byRadius(20))
  ->adjust(Adjust::saturation()->level(50))
  ->overlay(Overlay::source(
  Source::image("imagga_logo")
  ->transformation((new MediaTransformation())
  ->resize(Resize::scale()->width(100))
  ->adjust(Adjust::opacity(80)))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::southWest()))
->offsetX(10)
->offsetY(10))
  )
  ->sign();
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("family_bench.jpg", array("sign_url"=>true, "transformation"=>array(
  array("height"=>300, "width"=>450, "crop"=>"imagga_crop"),
  array("radius"=>20),
  array("effect"=>"saturation:50"),
  array("overlay"=>"imagga_logo"),
  array("width"=>100, "crop"=>"scale"),
  array("opacity"=>80),
  array("flags"=>"layer_apply", "gravity"=>"south_west", "x"=>10, "y"=>10)
  )))
Python:
Copy to clipboard
CloudinaryImage("family_bench.jpg").image(sign_url=True, transformation=[
  {'height': 300, 'width': 450, 'crop': "imagga_crop"},
  {'radius': 20},
  {'effect': "saturation:50"},
  {'overlay': "imagga_logo"},
  {'width': 100, 'crop': "scale"},
  {'opacity': 80},
  {'flags': "layer_apply", 'gravity': "south_west", 'x': 10, 'y': 10}
  ])
Node.js:
Copy to clipboard
cloudinary.image("family_bench.jpg", {sign_url: true, transformation: [
  {height: 300, width: 450, crop: "imagga_crop"},
  {radius: 20},
  {effect: "saturation:50"},
  {overlay: "imagga_logo"},
  {width: 100, crop: "scale"},
  {opacity: 80},
  {flags: "layer_apply", gravity: "south_west", x: 10, y: 10}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .height(300).width(450).crop("imagga_crop").chain()
  .radius(20).chain()
  .effect("saturation:50").chain()
  .overlay(new Layer().publicId("imagga_logo")).chain()
  .width(100).crop("scale").chain()
  .opacity(80).chain()
  .flags("layer_apply").gravity("south_west").x(10).y(10)).signed(true).imageTag("family_bench.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
// This code example is not currently available.
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('family_bench.jpg', {signUrl: true, transformation: [
  {height: 300, width: 450, crop: "imagga_crop"},
  {radius: 20},
  {effect: "saturation:50"},
  {overlay: new cloudinary.Layer().publicId("imagga_logo")},
  {width: 100, crop: "scale"},
  {opacity: 80},
  {flags: "layer_apply", gravity: "south_west", x: 10, y: 10}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("family_bench.jpg", {transformation: [
  {height: 300, width: 450, crop: "imagga_crop"},
  {radius: 20},
  {effect: "saturation:50"},
  {overlay: new cloudinary.Layer().publicId("imagga_logo")},
  {width: 100, crop: "scale"},
  {opacity: 80},
  {flags: "layer_apply", gravity: "south_west", x: 10, y: 10}
  ]})
React:
Copy to clipboard
<Image publicId="family_bench.jpg" signUrl="true">
  <Transformation height="300" width="450" crop="imagga_crop" />
  <Transformation radius="20" />
  <Transformation effect="saturation:50" />
  <Transformation overlay="imagga_logo" />
  <Transformation width="100" crop="scale" />
  <Transformation opacity="80" />
  <Transformation flags="layer_apply" gravity="south_west" x="10" y="10" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="family_bench.jpg" sign-url="true">
  <cld-transformation height="300" width="450" crop="imagga_crop" />
  <cld-transformation radius="20" />
  <cld-transformation effect="saturation:50" />
  <cld-transformation :overlay="imagga_logo" />
  <cld-transformation width="100" crop="scale" />
  <cld-transformation opacity="80" />
  <cld-transformation flags="layer_apply" gravity="south_west" x="10" y="10" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="family_bench.jpg" sign-url="true">
  <cl-transformation height="300" width="450" crop="imagga_crop">
  </cl-transformation>
  <cl-transformation radius="20">
  </cl-transformation>
  <cl-transformation effect="saturation:50">
  </cl-transformation>
  <cl-transformation overlay="imagga_logo">
  </cl-transformation>
  <cl-transformation width="100" crop="scale">
  </cl-transformation>
  <cl-transformation opacity="80">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south_west" x="10" y="10">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Height(300).Width(450).Crop("imagga_crop").Chain()
  .Radius(20).Chain()
  .Effect("saturation:50").Chain()
  .Overlay(new Layer().PublicId("imagga_logo")).Chain()
  .Width(100).Crop("scale").Chain()
  .Opacity(80).Chain()
  .Flags("layer_apply").Gravity("south_west").X(10).Y(10)).Signed(true).BuildImageTag("family_bench.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setHeight(300).setWidth(450).setCrop("imagga_crop").chain()
  .setRadius(20).chain()
  .setEffect("saturation:50").chain()
  .setOverlay("imagga_logo").chain()
  .setWidth(100).setCrop("scale").chain()
  .setOpacity(80).chain()
  .setFlags("layer_apply").setGravity("south_west").setX(10).setY(10)).generate("family_bench.jpg", signUrl: true)!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .height(300).width(450).crop("imagga_crop").chain()
  .radius(20).chain()
  .effect("saturation:50").chain()
  .overlay(new Layer().publicId("imagga_logo")).chain()
  .width(100).crop("scale").chain()
  .opacity(80).chain()
  .flags("layer_apply").gravity("south_west").x(10).y(10)).signed(true).generate("family_bench.jpg");
Kotlin:
Copy to clipboard
// This code example is not currently available.
cropped with overlay

Overlay cropping

The examples above used the Imagga add-on for smartly scaling and cropping an uploaded image. In addition, you can smartly crop an image that is used as an overlay on top of another image.

The following code sample sets the crop parameter of a chained overlay transformation component to imagga_scale. The family_bench image is converted to a circular shape with a transparent background, overlaid on top of an uploaded image named coast:

Ruby:
Copy to clipboard
cl_image_tag("coast.jpg", :sign_url=>true, :transformation=>[
  {:width=>400, :crop=>"scale"},
  {:overlay=>"family_bench"},
  {:height=>150, :width=>150, :crop=>"imagga_scale"},
  {:radius=>"max"},
  {:flags=>"layer_apply"}
  ])
PHP (cloudinary_php v2.x):
Copy to clipboard
(new ImageTag('coast.jpg'))
  ->resize(Resize::scale()->width(400))
  ->overlay(Overlay::source(
  Source::image("family_bench")
  ->transformation((new MediaTransformation())
  ->resize(Resize::imaggaScale()->width(150)
->height(150))
  ->roundCorners(RoundCorners::max()))
  ))
  ->sign();
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_image_tag("coast.jpg", array("sign_url"=>true, "transformation"=>array(
  array("width"=>400, "crop"=>"scale"),
  array("overlay"=>"family_bench"),
  array("height"=>150, "width"=>150, "crop"=>"imagga_scale"),
  array("radius"=>"max"),
  array("flags"=>"layer_apply")
  )))
Python:
Copy to clipboard
CloudinaryImage("coast.jpg").image(sign_url=True, transformation=[
  {'width': 400, 'crop': "scale"},
  {'overlay': "family_bench"},
  {'height': 150, 'width': 150, 'crop': "imagga_scale"},
  {'radius': "max"},
  {'flags': "layer_apply"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("coast.jpg", {sign_url: true, transformation: [
  {width: 400, crop: "scale"},
  {overlay: "family_bench"},
  {height: 150, width: 150, crop: "imagga_scale"},
  {radius: "max"},
  {flags: "layer_apply"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(400).crop("scale").chain()
  .overlay(new Layer().publicId("family_bench")).chain()
  .height(150).width(150).crop("imagga_scale").chain()
  .radius("max").chain()
  .flags("layer_apply")).signed(true).imageTag("coast.jpg");
JS (js-url-gen v1.x):
Copy to clipboard
// This code example is not currently available.
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.imageTag('coast.jpg', {signUrl: true, transformation: [
  {width: 400, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("family_bench")},
  {height: 150, width: 150, crop: "imagga_scale"},
  {radius: "max"},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("coast.jpg", {transformation: [
  {width: 400, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("family_bench")},
  {height: 150, width: 150, crop: "imagga_scale"},
  {radius: "max"},
  {flags: "layer_apply"}
  ]})
React:
Copy to clipboard
<Image publicId="coast.jpg" signUrl="true">
  <Transformation width="400" crop="scale" />
  <Transformation overlay="family_bench" />
  <Transformation height="150" width="150" crop="imagga_scale" />
  <Transformation radius="max" />
  <Transformation flags="layer_apply" />
</Image>
Vue.js:
Copy to clipboard
<cld-image public-id="coast.jpg" sign-url="true">
  <cld-transformation width="400" crop="scale" />
  <cld-transformation :overlay="family_bench" />
  <cld-transformation height="150" width="150" crop="imagga_scale" />
  <cld-transformation radius="max" />
  <cld-transformation flags="layer_apply" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="coast.jpg" sign-url="true">
  <cl-transformation width="400" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="family_bench">
  </cl-transformation>
  <cl-transformation height="150" width="150" crop="imagga_scale">
  </cl-transformation>
  <cl-transformation radius="max">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("family_bench")).Chain()
  .Height(150).Width(150).Crop("imagga_scale").Chain()
  .Radius("max").Chain()
  .Flags("layer_apply")).Signed(true).BuildImageTag("coast.jpg")
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setCrop("scale").chain()
  .setOverlay("family_bench").chain()
  .setHeight(150).setWidth(150).setCrop("imagga_scale").chain()
  .setRadius("max").chain()
  .setFlags("layer_apply")).generate("coast.jpg", signUrl: true)!, cloudinary: cloudinary)
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(400).crop("scale").chain()
  .overlay(new Layer().publicId("family_bench")).chain()
  .height(150).width(150).crop("imagga_scale").chain()
  .radius("max").chain()
  .flags("layer_apply")).signed(true).generate("coast.jpg");
Kotlin:
Copy to clipboard
// This code example is not currently available.
imagga_scale on overlay

For a full list of additional Cloudinary's image transformation options, see Image transformations.

✔️ Feedback sent!

Rate this page: