Imagga Crop and Scale

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

Cloudinary offers a very rich set of image manipulation 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 manipulation 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.

On this page:

Using Imagga
Signed URLs
Eager transformations
Smartly scale images
Smartly crop images
Further image manipulations
Overlay cropping

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.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/family_bench.jpg

Ruby:

cl_image_tag("family_bench.jpg")

PHP:

cl_image_tag("family_bench.jpg")

Python:

CloudinaryImage("family_bench.jpg").image()

Node.js:

cloudinary.image("family_bench.jpg")

Java:

cloudinary.url().imageTag("family_bench.jpg");

JS:

cloudinary.imageTag('family_bench.jpg').toHtml();

jQuery:

$.cloudinary.image("family_bench.jpg")

React:

<Image publicId="family_bench.jpg" >

</Image>

Vue.js:

<cld-image publicId="family_bench.jpg" >

</cld-image>

Angular:

<cl-image public-id="family_bench.jpg" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("family_bench.jpg")

Android:

MediaManager.get().url().generate("family_bench.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("family_bench.jpg")!, cloudinary: cloudinary)

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.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/c_imagga_crop/family_bench.jpg

Ruby:

cl_image_tag("family_bench.jpg", :crop=>"imagga_crop")

PHP:

cl_image_tag("family_bench.jpg", array("crop"=>"imagga_crop"))

Python:

CloudinaryImage("family_bench.jpg").image(crop="imagga_crop")

Node.js:

cloudinary.image("family_bench.jpg", {crop: "imagga_crop"})

Java:

cloudinary.url().transformation(new Transformation().crop("imagga_crop")).imageTag("family_bench.jpg");

JS:

cloudinary.imageTag('family_bench.jpg', {crop: "imagga_crop"}).toHtml();

jQuery:

$.cloudinary.image("family_bench.jpg", {crop: "imagga_crop"})

React:

<Image publicId="family_bench.jpg" >
  <Transformation crop="imagga_crop" />
</Image>

Vue.js:

<cld-image publicId="family_bench.jpg" >
  <cld-transformation crop="imagga_crop" />
</cld-image>

Angular:

<cl-image public-id="family_bench.jpg" >
  <cl-transformation crop="imagga_crop">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Crop("imagga_crop")).BuildImageTag("family_bench.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().crop("imagga_crop")).generate("family_bench.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setCrop("imagga_crop")).generate("family_bench.jpg")!, cloudinary: cloudinary)

Signed URLs

Cloudinary's dynamic image manipulation 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 manipulation 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 manipulation will be approved for on-the-fly image manipulation 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--).

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/s--N5szE634--/c_imagga_scale,h_200,w_150/family_bench.jpg

Ruby:

cl_image_tag("family_bench.jpg", :height=>200, :width=>150, :crop=>"imagga_scale", :sign_url=>true)

PHP:

cl_image_tag("family_bench.jpg", array("height"=>200, "width"=>150, "crop"=>"imagga_scale", "sign_url"=>true))

Python:

CloudinaryImage("family_bench.jpg").image(height=200, width=150, crop="imagga_scale", sign_url=True)

Node.js:

cloudinary.image("family_bench.jpg", {height: 200, width: 150, crop: "imagga_scale", sign_url: true})

Java:

cloudinary.url().transformation(new Transformation().height(200).width(150).crop("imagga_scale")).signed(true).imageTag("family_bench.jpg");

JS:

cloudinary.imageTag('family_bench.jpg', {height: 200, width: 150, crop: "imagga_scale", signUrl: true}).toHtml();

jQuery:

$.cloudinary.image("family_bench.jpg", {height: 200, width: 150, crop: "imagga_scale"})

React:

<Image publicId="family_bench.jpg" signUrl="true">
  <Transformation height="200" width="150" crop="imagga_scale" />
</Image>

Vue.js:

<cld-image publicId="family_bench.jpg" signUrl="true">
  <cld-transformation height="200" width="150" crop="imagga_scale" />
</cld-image>

Angular:

<cl-image public-id="family_bench.jpg" sign-url="true">
  <cl-transformation height="200" width="150" crop="imagga_scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200).Width(150).Crop("imagga_scale")).Signed(true).BuildImageTag("family_bench.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().height(200).width(150).crop("imagga_scale")).signed(true).generate("family_bench.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setWidth(150).setCrop("imagga_scale")).generate("family_bench.jpg", signUrl: true)!, cloudinary: cloudinary)

For more details regarding signed URLs, see the following blog post: On-the-fly image manipulations 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 PHP Python Node.js Java .Net All

Ruby:

Cloudinary::Uploader.upload("local_file.jpg",
  :public_id => "family_bench",
  :eager => { :crop => "imagga_scale", :width => 150, :height => 200 })

PHP:

\Cloudinary\Uploader::upload("local_file.jpg",
  array(
    "public_id" => "family_bench",
    "eager" =>
      array( "crop" => "imagga_scale", "width" => 150, "height" => 200 )
    ));

Python:

cloudinary.uploader.upload("local_file.jpg",
  public_id = "family_bench",
  eager = { 'crop': "imagga_scale", 'width': 150, 'height': 200 })

Node.js:

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:

cloudinary.uploader().upload("local_file.jpg",
  ObjectUtils.asMap("public_id", "family_bench", 
    "eager", Arrays.asList(
      new Transformation().crop("imagga_scale").width(150).height(200))));

.Net:

var uploadParams = new ImageUploadParams(){
  File = new FileDescription(@"local_file.jpg"),
  PublicId = "family_bench",
  EagerTransforms = new List<Transformation>(){
   new Transformation().Crop("imagga_scale").Width(150).Height(200)}};
var uploadResult = cloudinary.Upload(uploadParams);

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.

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:

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:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/sample_van.jpg

Ruby:

cl_image_tag("sample_van.jpg")

PHP:

cl_image_tag("sample_van.jpg")

Python:

CloudinaryImage("sample_van.jpg").image()

Node.js:

cloudinary.image("sample_van.jpg")

Java:

cloudinary.url().imageTag("sample_van.jpg");

JS:

cloudinary.imageTag('sample_van.jpg').toHtml();

jQuery:

$.cloudinary.image("sample_van.jpg")

React:

<Image publicId="sample_van.jpg" >

</Image>

Vue.js:

<cld-image publicId="sample_van.jpg" >

</cld-image>

Angular:

<cl-image public-id="sample_van.jpg" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("sample_van.jpg")

Android:

MediaManager.get().url().generate("sample_van.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("sample_van.jpg")!, cloudinary: cloudinary)

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 PHP Python Node.js Java .Net All

Ruby:

cloudinary_url("sample_van.jpg", :crop => "imagga_scale",
  :width => 260, :height => 240,
  :sign_url => true)

PHP:

<?php echo cloudinary_url("sample_van.jpg",
  array("crop" => "imagga_scale", "width" => 260, "height" => 240,
        "sign_url" => true)); ?>

Python:

cloudinary.CloudinaryImage("sample_van.jpg").build_url(
  crop = "imagga_scale", width = 260, height = 240,
  sign_url = True)

Node.js:

cloudinary.url("sample_van.jpg",
  { crop: "imagga_scale", width: 260, height: 240,
    sign_url: true });

Java:

cloudinary.url().transformation(
  new Transformation().crop("imagga_scale").
    width(260).height(240)).signed(true).generate("sample_van.jpg");

.Net:

cloudinary.UrlImgUp.Transform(
  new Transformation().Crop("imagga_scale")
    .Width(260).Height(240)).Signed(true).BuildUrl("sample_van.jpg")

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:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/s--Kwuyl0FK--/c_imagga_scale,h_240,w_260/sample_van.jpg

Ruby:

cl_image_tag("sample_van.jpg", :height=>240, :width=>260, :crop=>"imagga_scale", :sign_url=>true)

PHP:

cl_image_tag("sample_van.jpg", array("height"=>240, "width"=>260, "crop"=>"imagga_scale", "sign_url"=>true))

Python:

CloudinaryImage("sample_van.jpg").image(height=240, width=260, crop="imagga_scale", sign_url=True)

Node.js:

cloudinary.image("sample_van.jpg", {height: 240, width: 260, crop: "imagga_scale", sign_url: true})

Java:

cloudinary.url().transformation(new Transformation().height(240).width(260).crop("imagga_scale")).signed(true).imageTag("sample_van.jpg");

JS:

cloudinary.imageTag('sample_van.jpg', {height: 240, width: 260, crop: "imagga_scale", signUrl: true}).toHtml();

jQuery:

$.cloudinary.image("sample_van.jpg", {height: 240, width: 260, crop: "imagga_scale"})

React:

<Image publicId="sample_van.jpg" signUrl="true">
  <Transformation height="240" width="260" crop="imagga_scale" />
</Image>

Vue.js:

<cld-image publicId="sample_van.jpg" signUrl="true">
  <cld-transformation height="240" width="260" crop="imagga_scale" />
</cld-image>

Angular:

<cl-image public-id="sample_van.jpg" sign-url="true">
  <cl-transformation height="240" width="260" crop="imagga_scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(240).Width(260).Crop("imagga_scale")).Signed(true).BuildImageTag("sample_van.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().height(240).width(260).crop("imagga_scale")).signed(true).generate("sample_van.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(240).setWidth(260).setCrop("imagga_scale")).generate("sample_van.jpg", signUrl: true)!, cloudinary: cloudinary)

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:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/family_bench.jpg

Ruby:

cl_image_tag("family_bench.jpg")

PHP:

cl_image_tag("family_bench.jpg")

Python:

CloudinaryImage("family_bench.jpg").image()

Node.js:

cloudinary.image("family_bench.jpg")

Java:

cloudinary.url().imageTag("family_bench.jpg");

JS:

cloudinary.imageTag('family_bench.jpg').toHtml();

jQuery:

$.cloudinary.image("family_bench.jpg")

React:

<Image publicId="family_bench.jpg" >

</Image>

Vue.js:

<cld-image publicId="family_bench.jpg" >

</cld-image>

Angular:

<cl-image public-id="family_bench.jpg" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("family_bench.jpg")

Android:

MediaManager.get().url().generate("family_bench.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("family_bench.jpg")!, cloudinary: cloudinary)

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.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/s--_G14i7Wz--/c_imagga_crop,h_380,w_380/family_bench.jpg

Ruby:

cl_image_tag("family_bench.jpg", :height=>380, :width=>380, :crop=>"imagga_crop", :sign_url=>true)

PHP:

cl_image_tag("family_bench.jpg", array("height"=>380, "width"=>380, "crop"=>"imagga_crop", "sign_url"=>true))

Python:

CloudinaryImage("family_bench.jpg").image(height=380, width=380, crop="imagga_crop", sign_url=True)

Node.js:

cloudinary.image("family_bench.jpg", {height: 380, width: 380, crop: "imagga_crop", sign_url: true})

Java:

cloudinary.url().transformation(new Transformation().height(380).width(380).crop("imagga_crop")).signed(true).imageTag("family_bench.jpg");

JS:

cloudinary.imageTag('family_bench.jpg', {height: 380, width: 380, crop: "imagga_crop", signUrl: true}).toHtml();

jQuery:

$.cloudinary.image("family_bench.jpg", {height: 380, width: 380, crop: "imagga_crop"})

React:

<Image publicId="family_bench.jpg" signUrl="true">
  <Transformation height="380" width="380" crop="imagga_crop" />
</Image>

Vue.js:

<cld-image publicId="family_bench.jpg" signUrl="true">
  <cld-transformation height="380" width="380" crop="imagga_crop" />
</cld-image>

Angular:

<cl-image public-id="family_bench.jpg" sign-url="true">
  <cl-transformation height="380" width="380" crop="imagga_crop">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(380).Width(380).Crop("imagga_crop")).Signed(true).BuildImageTag("family_bench.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().height(380).width(380).crop("imagga_crop")).signed(true).generate("family_bench.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(380).setWidth(380).setCrop("imagga_crop")).generate("family_bench.jpg", signUrl: true)!, cloudinary: cloudinary)

Further image manipulations

Smart cropping and scaling using the Imagga Cloudinary add-on can be mixed with any of Cloudinary's rich set of image manipulation 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.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/s--KMRAj9Cd--/c_imagga_crop,e_saturation:50,h_300,r_20,w_450/g_south_west,l_imagga_logo,o_80,w_100,x_10,y_10/family_bench.jpg

Ruby:

cl_image_tag("family_bench.jpg", :sign_url=>true, :transformation=>[
  {:effect=>"saturation:50", :height=>300, :radius=>20, :width=>450, :crop=>"imagga_crop"},
  {:gravity=>"south_west", :overlay=>"imagga_logo", :opacity=>80, :width=>100, :x=>10, :y=>10}
  ])

PHP:

cl_image_tag("family_bench.jpg", array("sign_url"=>true, "transformation"=>array(
  array("effect"=>"saturation:50", "height"=>300, "radius"=>20, "width"=>450, "crop"=>"imagga_crop"),
  array("gravity"=>"south_west", "overlay"=>"imagga_logo", "opacity"=>80, "width"=>100, "x"=>10, "y"=>10)
  )))

Python:

CloudinaryImage("family_bench.jpg").image(sign_url=True, transformation=[
  {'effect': "saturation:50", 'height': 300, 'radius': 20, 'width': 450, 'crop': "imagga_crop"},
  {'gravity': "south_west", 'overlay': "imagga_logo", 'opacity': 80, 'width': 100, 'x': 10, 'y': 10}
  ])

Node.js:

cloudinary.image("family_bench.jpg", {sign_url: true, transformation: [
  {effect: "saturation:50", height: 300, radius: 20, width: 450, crop: "imagga_crop"},
  {gravity: "south_west", overlay: "imagga_logo", opacity: 80, width: 100, x: 10, y: 10}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .effect("saturation:50").height(300).radius(20).width(450).crop("imagga_crop").chain()
  .gravity("south_west").overlay(new Layer().publicId("imagga_logo")).opacity(80).width(100).x(10).y(10)).signed(true).imageTag("family_bench.jpg");

JS:

cloudinary.imageTag('family_bench.jpg', {signUrl: true, transformation: [
  {effect: "saturation:50", height: 300, radius: 20, width: 450, crop: "imagga_crop"},
  {gravity: "south_west", overlay: new cloudinary.Layer().publicId("imagga_logo"), opacity: 80, width: 100, x: 10, y: 10}
  ]}).toHtml();

jQuery:

$.cloudinary.image("family_bench.jpg", {transformation: [
  {effect: "saturation:50", height: 300, radius: 20, width: 450, crop: "imagga_crop"},
  {gravity: "south_west", overlay: new cloudinary.Layer().publicId("imagga_logo"), opacity: 80, width: 100, x: 10, y: 10}
  ]})

React:

<Image publicId="family_bench.jpg" signUrl="true">
  <Transformation effect="saturation:50" height="300" radius="20" width="450" crop="imagga_crop" />
  <Transformation gravity="south_west" overlay="imagga_logo" opacity="80" width="100" x="10" y="10" />
</Image>

Vue.js:

<cld-image publicId="family_bench.jpg" signUrl="true">
  <cld-transformation effect="saturation:50" height="300" radius="20" width="450" crop="imagga_crop" />
  <cld-transformation gravity="south_west" overlay="imagga_logo" opacity="80" width="100" x="10" y="10" />
</cld-image>

Angular:

<cl-image public-id="family_bench.jpg" sign-url="true">
  <cl-transformation effect="saturation:50" height="300" radius="20" width="450" crop="imagga_crop">
  </cl-transformation>
  <cl-transformation gravity="south_west" overlay="imagga_logo" opacity="80" width="100" x="10" y="10">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("saturation:50").Height(300).Radius(20).Width(450).Crop("imagga_crop").Chain()
  .Gravity("south_west").Overlay(new Layer().PublicId("imagga_logo")).Opacity(80).Width(100).X(10).Y(10)).Signed(true).BuildImageTag("family_bench.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .effect("saturation:50").height(300).radius(20).width(450).crop("imagga_crop").chain()
  .gravity("south_west").overlay(new Layer().publicId("imagga_logo")).opacity(80).width(100).x(10).y(10)).signed(true).generate("family_bench.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("saturation:50").setHeight(300).setRadius(20).setWidth(450).setCrop("imagga_crop").chain()
  .setGravity("south_west").setOverlay("imagga_logo").setOpacity(80).setWidth(100).setX(10).setY(10)).generate("family_bench.jpg", signUrl: true)!, cloudinary: cloudinary)

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:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/s--aKE_VURh--/c_scale,w_400/c_imagga_scale,h_150,l_family_bench.png,r_max,w_150/coast.jpg

Ruby:

cl_image_tag("coast.jpg", :sign_url=>true, :transformation=>[
  {:width=>400, :crop=>"scale"},
  {:height=>150, :overlay=>"family_bench.png", :radius=>"max", :width=>150, :crop=>"imagga_scale"}
  ])

PHP:

cl_image_tag("coast.jpg", array("sign_url"=>true, "transformation"=>array(
  array("width"=>400, "crop"=>"scale"),
  array("height"=>150, "overlay"=>"family_bench.png", "radius"=>"max", "width"=>150, "crop"=>"imagga_scale")
  )))

Python:

CloudinaryImage("coast.jpg").image(sign_url=True, transformation=[
  {'width': 400, 'crop': "scale"},
  {'height': 150, 'overlay': "family_bench.png", 'radius': "max", 'width': 150, 'crop': "imagga_scale"}
  ])

Node.js:

cloudinary.image("coast.jpg", {sign_url: true, transformation: [
  {width: 400, crop: "scale"},
  {height: 150, overlay: "family_bench.png", radius: "max", width: 150, crop: "imagga_scale"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(400).crop("scale").chain()
  .height(150).overlay(new Layer().publicId("family_bench.png")).radius("max").width(150).crop("imagga_scale")).signed(true).imageTag("coast.jpg");

JS:

cloudinary.imageTag('coast.jpg', {signUrl: true, transformation: [
  {width: 400, crop: "scale"},
  {height: 150, overlay: new cloudinary.Layer().publicId("family_bench.png"), radius: "max", width: 150, crop: "imagga_scale"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("coast.jpg", {transformation: [
  {width: 400, crop: "scale"},
  {height: 150, overlay: new cloudinary.Layer().publicId("family_bench.png"), radius: "max", width: 150, crop: "imagga_scale"}
  ]})

React:

<Image publicId="coast.jpg" signUrl="true">
  <Transformation width="400" crop="scale" />
  <Transformation height="150" overlay="family_bench.png" radius="max" width="150" crop="imagga_scale" />
</Image>

Vue.js:

<cld-image publicId="coast.jpg" signUrl="true">
  <cld-transformation width="400" crop="scale" />
  <cld-transformation height="150" overlay="family_bench.png" radius="max" width="150" crop="imagga_scale" />
</cld-image>

Angular:

<cl-image public-id="coast.jpg" sign-url="true">
  <cl-transformation width="400" crop="scale">
  </cl-transformation>
  <cl-transformation height="150" overlay="family_bench.png" radius="max" width="150" crop="imagga_scale">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Crop("scale").Chain()
  .Height(150).Overlay(new Layer().PublicId("family_bench.png")).Radius("max").Width(150).Crop("imagga_scale")).Signed(true).BuildImageTag("coast.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(400).crop("scale").chain()
  .height(150).overlay(new Layer().publicId("family_bench.png")).radius("max").width(150).crop("imagga_scale")).signed(true).generate("coast.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setCrop("scale").chain()
  .setHeight(150).setOverlay("family_bench.png").setRadius("max").setWidth(150).setCrop("imagga_scale")).generate("coast.jpg", signUrl: true)!, cloudinary: cloudinary)

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