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.
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.
cl_image_tag("family_bench.jpg")
cl_image_tag("family_bench.jpg")
CloudinaryImage("family_bench.jpg").image()
cloudinary.image("family_bench.jpg")
cloudinary.url().imageTag("family_bench.jpg");
cloudinary.imageTag('family_bench.jpg').toHtml();
$.cloudinary.image("family_bench.jpg")
<Image publicId="family_bench.jpg" > </Image>
<cld-image publicId="family_bench.jpg" > </cld-image>
<cl-image public-id="family_bench.jpg" > </cl-image>
cloudinary.Api.UrlImgUp.BuildImageTag("family_bench.jpg")
MediaManager.get().url().generate("family_bench.jpg");
imageView.cldSetImage(cloudinary.createUrl().generate("family_bench.jpg")!, cloudinary: cloudinary)
![family family](http://web.archive.org./web/20190521134756im_/https://res.cloudinary.com/demo/image/upload/family_bench.jpg)
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.
cl_image_tag("family_bench.jpg", :crop=>"imagga_crop")
cl_image_tag("family_bench.jpg", array("crop"=>"imagga_crop"))
CloudinaryImage("family_bench.jpg").image(crop="imagga_crop")
cloudinary.image("family_bench.jpg", {crop: "imagga_crop"})
cloudinary.url().transformation(new Transformation().crop("imagga_crop")).imageTag("family_bench.jpg");
cloudinary.imageTag('family_bench.jpg', {crop: "imagga_crop"}).toHtml();
$.cloudinary.image("family_bench.jpg", {crop: "imagga_crop"})
<Image publicId="family_bench.jpg" > <Transformation crop="imagga_crop" /> </Image>
<cld-image publicId="family_bench.jpg" > <cld-transformation crop="imagga_crop" /> </cld-image>
<cl-image public-id="family_bench.jpg" > <cl-transformation crop="imagga_crop"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation().Crop("imagga_crop")).BuildImageTag("family_bench.jpg")
MediaManager.get().url().transformation(new Transformation().crop("imagga_crop")).generate("family_bench.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setCrop("imagga_crop")).generate("family_bench.jpg")!, cloudinary: cloudinary)
![family family](http://web.archive.org./web/20190521134756im_/https://res.cloudinary.com/demo/image/upload/c_imagga_crop/family_bench.jpg)
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--
).
cl_image_tag("family_bench.jpg", :height=>200, :width=>150, :crop=>"imagga_scale", :sign_url=>true)
cl_image_tag("family_bench.jpg", array("height"=>200, "width"=>150, "crop"=>"imagga_scale", "sign_url"=>true))
CloudinaryImage("family_bench.jpg").image(height=200, width=150, crop="imagga_scale", sign_url=True)
cloudinary.image("family_bench.jpg", {height: 200, width: 150, crop: "imagga_scale", sign_url: true})
cloudinary.url().transformation(new Transformation().height(200).width(150).crop("imagga_scale")).signed(true).imageTag("family_bench.jpg");
cloudinary.imageTag('family_bench.jpg', {height: 200, width: 150, crop: "imagga_scale", signUrl: true}).toHtml();
$.cloudinary.image("family_bench.jpg", {height: 200, width: 150, crop: "imagga_scale"})
<Image publicId="family_bench.jpg" signUrl="true"> <Transformation height="200" width="150" crop="imagga_scale" /> </Image>
<cld-image publicId="family_bench.jpg" signUrl="true"> <cld-transformation height="200" width="150" crop="imagga_scale" /> </cld-image>
<cl-image public-id="family_bench.jpg" sign-url="true"> <cl-transformation height="200" width="150" crop="imagga_scale"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200).Width(150).Crop("imagga_scale")).Signed(true).BuildImageTag("family_bench.jpg")
MediaManager.get().url().transformation(new Transformation().height(200).width(150).crop("imagga_scale")).signed(true).generate("family_bench.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setWidth(150).setCrop("imagga_scale")).generate("family_bench.jpg", signUrl: true)!, cloudinary: cloudinary)
![](http://web.archive.org./web/20190521134756im_/https://res.cloudinary.com/demo/image/upload/s--N5szE634--/c_imagga_scale,h_200,w_150/family_bench.jpg)
For more details regarding signed URLs, see the following blog post: On-the-fly image manipulations secured with signed URLs.
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.
Cloudinary::Uploader.upload("local_file.jpg", :public_id => "family_bench", :eager => { :crop => "imagga_scale", :width => 150, :height => 200 })
\Cloudinary\Uploader::upload("local_file.jpg", array( "public_id" => "family_bench", "eager" => array( "crop" => "imagga_scale", "width" => 150, "height" => 200 ) ));
cloudinary.uploader.upload("local_file.jpg", public_id = "family_bench", eager = { 'crop': "imagga_scale", 'width': 150, 'height': 200 })
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); });
cloudinary.uploader().upload("local_file.jpg", ObjectUtils.asMap("public_id", "family_bench", "eager", Arrays.asList( new Transformation().crop("imagga_scale").width(150).height(200))));
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);
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:
cl_image_tag("sample_van.jpg")
cl_image_tag("sample_van.jpg")
CloudinaryImage("sample_van.jpg").image()
cloudinary.image("sample_van.jpg")
cloudinary.url().imageTag("sample_van.jpg");
cloudinary.imageTag('sample_van.jpg').toHtml();
$.cloudinary.image("sample_van.jpg")
<Image publicId="sample_van.jpg" > </Image>
<cld-image publicId="sample_van.jpg" > </cld-image>
<cl-image public-id="sample_van.jpg" > </cl-image>
cloudinary.Api.UrlImgUp.BuildImageTag("sample_van.jpg")
MediaManager.get().url().generate("sample_van.jpg");
imageView.cldSetImage(cloudinary.createUrl().generate("sample_van.jpg")!, cloudinary: cloudinary)
![sample van sample van](http://web.archive.org./web/20190521134756im_/https://res.cloudinary.com/demo/image/upload/sample_van.jpg)
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.
cloudinary_url("sample_van.jpg", :crop => "imagga_scale", :width => 260, :height => 240, :sign_url => true)
<?php echo cloudinary_url("sample_van.jpg", array("crop" => "imagga_scale", "width" => 260, "height" => 240, "sign_url" => true)); ?>
cloudinary.CloudinaryImage("sample_van.jpg").build_url( crop = "imagga_scale", width = 260, height = 240, sign_url = True)
cloudinary.url("sample_van.jpg", { crop: "imagga_scale", width: 260, height: 240, sign_url: true });
cloudinary.url().transformation( new Transformation().crop("imagga_scale"). width(260).height(240)).signed(true).generate("sample_van.jpg");
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:
cl_image_tag("sample_van.jpg", :height=>240, :width=>260, :crop=>"imagga_scale", :sign_url=>true)
cl_image_tag("sample_van.jpg", array("height"=>240, "width"=>260, "crop"=>"imagga_scale", "sign_url"=>true))
CloudinaryImage("sample_van.jpg").image(height=240, width=260, crop="imagga_scale", sign_url=True)
cloudinary.image("sample_van.jpg", {height: 240, width: 260, crop: "imagga_scale", sign_url: true})
cloudinary.url().transformation(new Transformation().height(240).width(260).crop("imagga_scale")).signed(true).imageTag("sample_van.jpg");
cloudinary.imageTag('sample_van.jpg', {height: 240, width: 260, crop: "imagga_scale", signUrl: true}).toHtml();
$.cloudinary.image("sample_van.jpg", {height: 240, width: 260, crop: "imagga_scale"})
<Image publicId="sample_van.jpg" signUrl="true"> <Transformation height="240" width="260" crop="imagga_scale" /> </Image>
<cld-image publicId="sample_van.jpg" signUrl="true"> <cld-transformation height="240" width="260" crop="imagga_scale" /> </cld-image>
<cl-image public-id="sample_van.jpg" sign-url="true"> <cl-transformation height="240" width="260" crop="imagga_scale"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(240).Width(260).Crop("imagga_scale")).Signed(true).BuildImageTag("sample_van.jpg")
MediaManager.get().url().transformation(new Transformation().height(240).width(260).crop("imagga_scale")).signed(true).generate("sample_van.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(240).setWidth(260).setCrop("imagga_scale")).generate("sample_van.jpg", signUrl: true)!, cloudinary: cloudinary)
![with imagga scaling with imagga scaling](http://web.archive.org./web/20190521134756im_/https://res.cloudinary.com/demo/image/upload/s--Kwuyl0FK--/c_imagga_scale,h_240,w_260/sample_van.jpg)
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:
cl_image_tag("family_bench.jpg")
cl_image_tag("family_bench.jpg")
CloudinaryImage("family_bench.jpg").image()
cloudinary.image("family_bench.jpg")
cloudinary.url().imageTag("family_bench.jpg");
cloudinary.imageTag('family_bench.jpg').toHtml();
$.cloudinary.image("family_bench.jpg")
<Image publicId="family_bench.jpg" > </Image>
<cld-image publicId="family_bench.jpg" > </cld-image>
<cl-image public-id="family_bench.jpg" > </cl-image>
cloudinary.Api.UrlImgUp.BuildImageTag("family_bench.jpg")
MediaManager.get().url().generate("family_bench.jpg");
imageView.cldSetImage(cloudinary.createUrl().generate("family_bench.jpg")!, cloudinary: cloudinary)
![family bench family bench](http://web.archive.org./web/20190521134756im_/https://res.cloudinary.com/demo/image/upload/family_bench.jpg)
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.
cl_image_tag("family_bench.jpg", :height=>380, :width=>380, :crop=>"imagga_crop", :sign_url=>true)
cl_image_tag("family_bench.jpg", array("height"=>380, "width"=>380, "crop"=>"imagga_crop", "sign_url"=>true))
CloudinaryImage("family_bench.jpg").image(height=380, width=380, crop="imagga_crop", sign_url=True)
cloudinary.image("family_bench.jpg", {height: 380, width: 380, crop: "imagga_crop", sign_url: true})
cloudinary.url().transformation(new Transformation().height(380).width(380).crop("imagga_crop")).signed(true).imageTag("family_bench.jpg");
cloudinary.imageTag('family_bench.jpg', {height: 380, width: 380, crop: "imagga_crop", signUrl: true}).toHtml();
$.cloudinary.image("family_bench.jpg", {height: 380, width: 380, crop: "imagga_crop"})
<Image publicId="family_bench.jpg" signUrl="true"> <Transformation height="380" width="380" crop="imagga_crop" /> </Image>
<cld-image publicId="family_bench.jpg" signUrl="true"> <cld-transformation height="380" width="380" crop="imagga_crop" /> </cld-image>
<cl-image public-id="family_bench.jpg" sign-url="true"> <cl-transformation height="380" width="380" crop="imagga_crop"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(380).Width(380).Crop("imagga_crop")).Signed(true).BuildImageTag("family_bench.jpg")
MediaManager.get().url().transformation(new Transformation().height(380).width(380).crop("imagga_crop")).signed(true).generate("family_bench.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(380).setWidth(380).setCrop("imagga_crop")).generate("family_bench.jpg", signUrl: true)!, cloudinary: cloudinary)
![with imagga_crop with imagga_crop](http://web.archive.org./web/20190521134756im_/https://res.cloudinary.com/demo/image/upload/s--_G14i7Wz--/c_imagga_crop,h_380,w_380/family_bench.jpg)
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.
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} ])
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) )))
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} ])
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} ]})
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");
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();
$.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} ]})
<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>
<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>
<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>
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")
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");
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)
![cropped with overlay cropped with overlay](http://web.archive.org./web/20190521134756im_/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)
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
:
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"} ])
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") )))
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"} ])
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"} ]})
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");
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();
$.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"} ]})
<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>
<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>
<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>
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")
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");
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)
![imagga_scale on overlay imagga_scale on overlay](http://web.archive.org./web/20190521134756im_/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)
For a full list of additional Cloudinary's image manipulation options, see image transformations.