Pixelz - Remove the Background

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

Cloudinary offers a very rich set of image transformation capabilities and allows you to upload images to the cloud, crop them on-the-fly and have them further transformed to match the graphic design of your websites and mobile applications.

Pixelz is a leading vendor of image editing solutions components, including powerful background removal of photos, done by a team of human experts. Cloudinary provides a Remove-The-Background add-on for using Pixelz's image editing capabilities, fully integrated into Cloudinary's image management and transformation pipeline.

With Pixelz's - Remove the Background add-on, you can extend Cloudinary's image transformation capabilities with automatic background removal from your photos, resulting with a transparent-background image focusing on the main object of your photo.

Note

The criteria for background removal can be customized by contacting us.

Getting started

Before you can use the Pixelz - Remove the Background 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.

On this page:

Getting started
Remove image background
Update existing images
Status notification
Further image transformations

Remove image background

You can try the Pixelz - Remove the Background add-on for free and later on subscribe to an add-on plan that best matches your usage requirements.

Note

The Pixelz - Remove the Background add-on is only free-to-try for Cloudinary paid accounts: the add-on is not available to the Cloudinary free-tier accounts.

In order to remove the background from your images, you will first need to upload images to Cloudinary. Requesting background removal can be done either while uploading files to Cloudinary (from your server-side code or directly from the browser), or by updating an existing image, either programmatically or interactively.

The following code sample shows how to upload a photo to Cloudinary, while telling Cloudinary to remove its background. In order to remove the background of the uploaded image, the background_removal parameter should be set to pixelz.

Ruby PHP Python Node.js Java .NET Android cURL CLI All

Ruby:

Cloudinary::Uploader.upload("wood_chair.jpg",
  :public_id => "wood_chair",
  :background_removal => 'pixelz')

PHP (cloudinary_php v2.x):

$cloudinary->uploadApi()->upload("wood_chair.jpg", [
    "public_id" => "wood_chair",
    "background_removal" => "pixelz"]);

Library:

PHP (cloudinary_php v1.x (legacy)):

\Cloudinary\Uploader::upload("wood_chair.jpg", [
    "public_id" => "wood_chair",
    "background_removal" => "pixelz"]);

Library:

Python:

cloudinary.uploader.upload("wood_chair.jpg",
  public_id = "wood_chair",
  background_removal = "pixelz")

Node.js:

cloudinary.v2.uploader.upload("wood_chair.jpg", 
  { public_id: "wood_chair",
    background_removal: "pixelz" },
  function(error, result){console.log(result);});

Java:

cloudinary.uploader().upload("wood_chair.jpg", 
  ObjectUtils.asMap(
    "public_id", "wood_chair",
    "background_removal", "pixelz"));

.NET:

var uploadParams = new ImageUploadParams(){
  File = new FileDescription(@"wood_chair.jpg"),
  PublicId = "wood_chair",
  BackgroundRemoval = "pixelz"};
var uploadResult = cloudinary.Upload(uploadParams);

Android:

MediaManager.get().upload("wood_chair.jpg")
  .option("public_id", "wood_chair")
  .option("background_removal", "pixelz").dispatch();

cURL:

curl https://api.cloudinary.com/v1_1/demo/image/upload -X POST --data 'file=wood_chair.jpg&public_id=wood_chair&background_removal=pixelz&timestamp=173719931&api_key=436464676&signature=a781d61f86a6f818af'

CLI:

cld uploader upload "wood_chair.jpg" public_id="wood_chair" background_removal="pixelz"

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

Background removal is performed asynchronously in the background after the upload call is completed.

Note

The background removal is done by a team of human experts: editing can take up to 24 hours.

The response of the uploaded request mentions that the editing process is in the pending status.

{ 
  "public_id": "wood_chair",
  "version": 1414316122,
  "resource_type": "image",
  "type": "upload",
  "url": "http://res.cloudinary.com/demo/image/upload/v1414316122/wood_chair.jpg",
  "info": 
    { "background_removal":
      { "remove_the_background":
        { "status": "pending" }}},
  ...
}

As a result of the upload example above, the original image is automatically sent, behind the scenes, to Remove-The-Background for editing. When background removal is completed, the original image is automatically replaced with the edited one and is available for delivery via a fast CDN, without any code changes required. The original image is made available as a backed-up revision of the image and you can always revert to it, if needed.

For example, the following dynamic transformation and delivery URL shows the original image of an uploaded wooden chair photo:

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

URL:

https://res.cloudinary.com/demo/image/upload/w_300/wood_chair_orig.jpg

Ruby:

cl_image_tag("wood_chair_orig.jpg", :width=>300, :crop=>"scale")

PHP (cloudinary_php v2.x):

(new ImageTag('wood_chair_orig.jpg'))
  ->resize(Resize::scale()->width(300));

Library:

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("wood_chair_orig.jpg", array("width"=>300, "crop"=>"scale"))

Library:

Python:

CloudinaryImage("wood_chair_orig.jpg").image(width=300, crop="scale")

Node.js:

cloudinary.image("wood_chair_orig.jpg", {width: 300, crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(300).crop("scale")).imageTag("wood_chair_orig.jpg");

JS (js-url-gen v1.x):

new CloudinaryImage("wood_chair_orig.jpg").resize(scale().width(300));

Library:

JS (cloudinary-core v2.x (legacy)):

cloudinary.imageTag('wood_chair_orig.jpg', {width: 300, crop: "scale"}).toHtml();

Library:

jQuery:

$.cloudinary.image("wood_chair_orig.jpg", {width: 300, crop: "scale"})

React:

<Image publicId="wood_chair_orig.jpg" >
  <Transformation width="300" crop="scale" />
</Image>

Vue.js:

<cld-image public-id="wood_chair_orig.jpg" >
  <cld-transformation width="300" crop="scale" />
</cld-image>

Angular:

<cl-image public-id="wood_chair_orig.jpg" >
  <cl-transformation width="300" crop="scale">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Crop("scale")).BuildImageTag("wood_chair_orig.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setCrop("scale")).generate("wood_chair_orig.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().width(300).crop("scale")).generate("wood_chair_orig.jpg");

Kotlin:

cloudinary.image {
  publicId("wood_chair_orig.jpg")
   resize(Resize.scale() { width(300) }) 
}.generate()

Below you can see the result of Remove-The-Background editing:

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

URL:

https://res.cloudinary.com/demo/image/upload/w_300/wood_chair.jpg

Ruby:

cl_image_tag("wood_chair.jpg", :width=>300, :crop=>"scale")

PHP (cloudinary_php v2.x):

(new ImageTag('wood_chair.jpg'))
  ->resize(Resize::scale()->width(300));

Library:

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("wood_chair.jpg", array("width"=>300, "crop"=>"scale"))

Library:

Python:

CloudinaryImage("wood_chair.jpg").image(width=300, crop="scale")

Node.js:

cloudinary.image("wood_chair.jpg", {width: 300, crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(300).crop("scale")).imageTag("wood_chair.jpg");

JS (js-url-gen v1.x):

new CloudinaryImage("wood_chair.jpg").resize(scale().width(300));

Library:

JS (cloudinary-core v2.x (legacy)):

cloudinary.imageTag('wood_chair.jpg', {width: 300, crop: "scale"}).toHtml();

Library:

jQuery:

$.cloudinary.image("wood_chair.jpg", {width: 300, crop: "scale"})

React:

<Image publicId="wood_chair.jpg" >
  <Transformation width="300" crop="scale" />
</Image>

Vue.js:

<cld-image public-id="wood_chair.jpg" >
  <cld-transformation width="300" crop="scale" />
</cld-image>

Angular:

<cl-image public-id="wood_chair.jpg" >
  <cl-transformation width="300" crop="scale">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Crop("scale")).BuildImageTag("wood_chair.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setCrop("scale")).generate("wood_chair.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().width(300).crop("scale")).generate("wood_chair.jpg");

Kotlin:

cloudinary.image {
  publicId("wood_chair.jpg")
   resize(Resize.scale() { width(300) }) 
}.generate()

Update existing images

The examples above show how to automatically schedule background removal of images during their upload process. As an alternative, you can use Cloudinary's Admin API to request background removal to already uploaded images, based on their public IDs.

For example, the following code sample uses Cloudinary's update API to apply background removal to the uploaded image that has the wood_chair public ID.

Ruby PHP Python Node.js Java .NET CLI All

Ruby:

Cloudinary::Api.update("wood_chair", 
  :background_removal => "pixelz")

PHP (cloudinary_php v2.x):

$api->update("wood_chair", 
  ["background_removal" => "pixelz"]);

Library:

PHP (cloudinary_php v1.x (legacy)):

$api = new \Cloudinary\Api();
$api->update("wood_chair", 
  ["background_removal" => "pixelz"]);

Library:

Python:

cloudinary.api.update("wood_chair",
  background_removal = "pixelz")

Node.js:

cloudinary.v2.api.update("wood_chair", 
  { background_removal: "pixelz" },
  function(error, result){console.log(result);});

Java:

cloudinary.api().update("wood_chair", 
  ObjectUtils.asMap("background_removal", "pixelz" ));

.NET:

var updateParams = new UpdateParams("wood_chair"){
  BackgroundRemoval = "pixelz"};
var updateResult = cloudinary.UpdateResource(updateParams);

CLI:

cld admin update "wood_chair" background_removal="pixelz"

You can also use Cloudinary's media library to interactively tell Cloudinary to remove the background of an existing image via your web browser:

Status notification

The Pixelz - Remove the Background add-on edits images asynchronously. The image editing is done by a trained team of human experts and may take up to 24 hours to complete. As a result, you may want to get notified when the editing process is completed.

When calling the upload API with background removal request, you can request a notification by adding the notification_url parameter to a public HTTP or HTTPS URL of your online web application. Cloudinary sends a POST request to the specified endpoint when image editing is completed.

Ruby PHP Python Node.js Java .NET Android cURL CLI All

Ruby:

Cloudinary::Uploader.upload("wood_chair.jpg",
  :public_id => "wood_chair",
  :background_removal => 'pixelz',
  :notification_url => "https://mysite.example.com/hooks")

PHP (cloudinary_php v2.x):

$cloudinary->uploadApi()->upload("wood_chair.jpg", [
    "public_id" => "wood_chair",
    "background_removal" => "pixelz",
    "notification_url" => "https://mysite.example.com/hooks"]);

Library:

PHP (cloudinary_php v1.x (legacy)):

\Cloudinary\Uploader::upload("wood_chair.jpg", [
    "public_id" => "wood_chair",
    "background_removal" => "pixelz",
    "notification_url" => "https://mysite.example.com/hooks"]);

Library:

Python:

cloudinary.uploader.upload("wood_chair.jpg",
  public_id = "wood_chair",
  background_removal = "pixelz",
  notification_url = "https://mysite.example.com/hooks")

Node.js:

cloudinary.v2.uploader.upload("wood_chair.jpg", 
  { public_id: "wood_chair",
    background_removal: "pixelz",
    notification_url: "https://mysite.example.com/hooks" },
  function(error, result){console.log(result);});

Java:

cloudinary.uploader().upload("wood_chair.jpg", 
  ObjectUtils.asMap(
    "public_id", "wood_chair", 
    "background_removal", "pixelz", 
    "notification_url", "https://mysite.example.com/hooks"));

.NET:

var uploadParams = new ImageUploadParams(){
  File = new FileDescription(@"wood_chair.jpg"),
  PublicId = "wood_chair",
  BackgroundRemoval = "pixelz",
  NotificationUrl = "https://mysite.example.com/hooks"};
var uploadResult = cloudinary.Upload(uploadParams);

Android:

MediaManager.get().upload("wood_chair.jpg")
  .option("public_id", "wood_chair")
  .option("background_removal", "pixelz")
  .option("notification_url", "https://mysite.example.com/hooks").dispatch();

cURL:

curl https://api.cloudinary.com/v1_1/demo/image/upload -X POST --data 'file=wood_chair.jpg&public_id=wood_chair&background_removal=pixelz&notification_url=https://mysite.example.com/hooks&timestamp=173719931&api_key=436464676&signature=a781d61f86a6f818af'

CLI:

cld uploader upload "wood_chair.jpg" public_id="wood_chair" background_removal="pixelz" notification_url="https://mysite.example.com/hooks"

The following JSON snippet is an example of a POST request sent to the notification URL when image editing is completed:

{ 
  "notification_type": "info",
  "info_kind": "pixelz",
  "info_status": "complete",
  "public_id": "wood_chair",
  "uploaded_at": "2014-10-26T11:35:22Z",
  "version": 1414316122,
  "url": 
    "https://res.cloudinary.com/demo/image/upload/v1393688588/wood_chair.jpg",
  "secure_url":
    "https://res.cloudinary.com/demo/image/upload/v1393688588/wood_chair.jpg",
  "etag": "a56e9e88c2add15cac1775c1f687bf73"
}

The JSON content is signed using the API Secret of your Cloudinary account. For more details regarding Cloudinary's notifications and webhooks, see this blog post.

Note

If the image returned does not meet your expectations you can contest the result and request a redo: open the image in the media library, click the Contest button, and fill in the reason for your redo request.

Further image transformations

Images edited for removing their backgrounds can be mixed with any of Cloudinary's rich set of image transformation capabilities.

For example, the following dynamic transformation and delivery URL generates a 200x200 padded version of the edited image. Image color saturation is increased by 50%. A shadow is added and so is a solid one pixel black border. This technique can be used to make sure that all product images on your e-commerce website share a consistent look & feel.

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

URL:

https://res.cloudinary.com/demo/image/upload/c_pad,h_200,w_200/e_saturation:50/e_shadow/bo_1px_solid_rgb:666/wood_chair.jpg

Ruby:

cl_image_tag("wood_chair.jpg", :transformation=>[
  {:height=>200, :width=>200, :crop=>"pad"},
  {:effect=>"saturation:50"},
  {:effect=>"shadow"},
  {:border=>"1px_solid_rgb:666"}
  ])

PHP (cloudinary_php v2.x):

(new ImageTag('wood_chair.jpg'))
  ->resize(Resize::pad()->width(200)
->height(200))
  ->adjust(Adjust::saturation()->level(50))
  ->effect(Effect::shadow())
  ->border(Border::solid(1,Color::rgb("666")));

Library:

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("wood_chair.jpg", array("transformation"=>array(
  array("height"=>200, "width"=>200, "crop"=>"pad"),
  array("effect"=>"saturation:50"),
  array("effect"=>"shadow"),
  array("border"=>"1px_solid_rgb:666")
  )))

Library:

Python:

CloudinaryImage("wood_chair.jpg").image(transformation=[
  {'height': 200, 'width': 200, 'crop': "pad"},
  {'effect': "saturation:50"},
  {'effect': "shadow"},
  {'border': "1px_solid_rgb:666"}
  ])

Node.js:

cloudinary.image("wood_chair.jpg", {transformation: [
  {height: 200, width: 200, crop: "pad"},
  {effect: "saturation:50"},
  {effect: "shadow"},
  {border: "1px_solid_rgb:666"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .height(200).width(200).crop("pad").chain()
  .effect("saturation:50").chain()
  .effect("shadow").chain()
  .border("1px_solid_rgb:666")).imageTag("wood_chair.jpg");

JS (js-url-gen v1.x):

new CloudinaryImage("wood_chair.jpg")
  .resize(pad().width(200).height(200))
  .adjust(saturation().level(50))
  .effect(shadow())
  .border(solid(1, "#666"));

Library:

JS (cloudinary-core v2.x (legacy)):

cloudinary.imageTag('wood_chair.jpg', {transformation: [
  {height: 200, width: 200, crop: "pad"},
  {effect: "saturation:50"},
  {effect: "shadow"},
  {border: "1px_solid_rgb:666"}
  ]}).toHtml();

Library:

jQuery:

$.cloudinary.image("wood_chair.jpg", {transformation: [
  {height: 200, width: 200, crop: "pad"},
  {effect: "saturation:50"},
  {effect: "shadow"},
  {border: "1px_solid_rgb:666"}
  ]})

React:

<Image publicId="wood_chair.jpg" >
  <Transformation height="200" width="200" crop="pad" />
  <Transformation effect="saturation:50" />
  <Transformation effect="shadow" />
  <Transformation border="1px_solid_rgb:666" />
</Image>

Vue.js:

<cld-image public-id="wood_chair.jpg" >
  <cld-transformation height="200" width="200" crop="pad" />
  <cld-transformation effect="saturation:50" />
  <cld-transformation effect="shadow" />
  <cld-transformation border="1px_solid_rgb:666" />
</cld-image>

Angular:

<cl-image public-id="wood_chair.jpg" >
  <cl-transformation height="200" width="200" crop="pad">
  </cl-transformation>
  <cl-transformation effect="saturation:50">
  </cl-transformation>
  <cl-transformation effect="shadow">
  </cl-transformation>
  <cl-transformation border="1px_solid_rgb:666">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Height(200).Width(200).Crop("pad").Chain()
  .Effect("saturation:50").Chain()
  .Effect("shadow").Chain()
  .Border("1px_solid_rgb:666")).BuildImageTag("wood_chair.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setHeight(200).setWidth(200).setCrop("pad").chain()
  .setEffect("saturation:50").chain()
  .setEffect("shadow").chain()
  .setBorder("1px_solid_rgb:666")).generate("wood_chair.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .height(200).width(200).crop("pad").chain()
  .effect("saturation:50").chain()
  .effect("shadow").chain()
  .border("1px_solid_rgb:666")).generate("wood_chair.jpg");

Kotlin:

cloudinary.image {
  publicId("wood_chair.jpg")
   resize(Resize.pad() { width(200)
 height(200) })
   adjust(Adjust.saturation() { level(50) })
   effect(Effect.shadow())
   border(Border.solid(1,Color.rgb("666"))) 
}.generate()

200x200 padded image with shadow and border

Another example, this time fitting the edited image to a 200x200 frame. The image is flipped horizontally and a watermark of Cloudinary's icon is added while increasing its brightness and making it semi-transparent.

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

URL:

https://res.cloudinary.com/demo/image/upload/a_hflip/c_fit,h_200,w_200/l_cloudinary_icon_white/a_4/c_scale,fl_relative,w_0.4/o_70/e_brightness:100/fl_layer_apply,g_north,x_15,y_35/wood_chair.jpg

Ruby:

cl_image_tag("wood_chair.jpg", :transformation=>[
  {:angle=>"hflip"},
  {:height=>200, :width=>200, :crop=>"fit"},
  {:overlay=>"cloudinary_icon_white"},
  {:angle=>4},
  {:flags=>"relative", :width=>0.4, :crop=>"scale"},
  {:opacity=>70},
  {:effect=>"brightness:100"},
  {:flags=>"layer_apply", :gravity=>"north", :x=>15, :y=>35}
  ])

PHP (cloudinary_php v2.x):

(new ImageTag('wood_chair.jpg'))
  ->rotate(Rotate::mode(
  RotationMode::horizontalFlip()))
  ->resize(Resize::fit()->width(200)
->height(200))
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_white")
  ->transformation((new Transformation())
  ->rotate(Rotate::byAngle(4))
  ->resize(Resize::scale()->width(0.4)
  ->relative()
  )
  ->adjust(Adjust::opacity(70))
  ->adjust(Adjust::brightness()->level(100)))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::north()))
->offsetX(15)
->offsetY(35))
  );

Library:

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("wood_chair.jpg", array("transformation"=>array(
  array("angle"=>"hflip"),
  array("height"=>200, "width"=>200, "crop"=>"fit"),
  array("overlay"=>"cloudinary_icon_white"),
  array("angle"=>4),
  array("flags"=>"relative", "width"=>"0.4", "crop"=>"scale"),
  array("opacity"=>70),
  array("effect"=>"brightness:100"),
  array("flags"=>"layer_apply", "gravity"=>"north", "x"=>15, "y"=>35)
  )))

Library:

Python:

CloudinaryImage("wood_chair.jpg").image(transformation=[
  {'angle': "hflip"},
  {'height': 200, 'width': 200, 'crop': "fit"},
  {'overlay': "cloudinary_icon_white"},
  {'angle': 4},
  {'flags': "relative", 'width': "0.4", 'crop': "scale"},
  {'opacity': 70},
  {'effect': "brightness:100"},
  {'flags': "layer_apply", 'gravity': "north", 'x': 15, 'y': 35}
  ])

Node.js:

cloudinary.image("wood_chair.jpg", {transformation: [
  {angle: "hflip"},
  {height: 200, width: 200, crop: "fit"},
  {overlay: "cloudinary_icon_white"},
  {angle: 4},
  {flags: "relative", width: "0.4", crop: "scale"},
  {opacity: 70},
  {effect: "brightness:100"},
  {flags: "layer_apply", gravity: "north", x: 15, y: 35}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .angle("hflip").chain()
  .height(200).width(200).crop("fit").chain()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .angle(4).chain()
  .flags("relative").width(0.4).crop("scale").chain()
  .opacity(70).chain()
  .effect("brightness:100").chain()
  .flags("layer_apply").gravity("north").x(15).y(35)).imageTag("wood_chair.jpg");

JS (js-url-gen v1.x):

new CloudinaryImage("wood_chair.jpg")
  .rotate(mode(horizontalFlip()))
  .resize(fit().width(200).height(200))
  .overlay(
    source(
      image("cloudinary_icon_white").transformation(
        new MediaTransformation()
          .rotate(byAngle(4))
          .resize(scale().width(0.4).relative())
          .adjust(opacity(70))
          .adjust(brightness().level(100))
      )
    ).position(
      new Position()
        .gravity(compass("north"))
        .offsetX(15)
        .offsetY(35)
    )
  );

Library:

JS (cloudinary-core v2.x (legacy)):

cloudinary.imageTag('wood_chair.jpg', {transformation: [
  {angle: "hflip"},
  {height: 200, width: 200, crop: "fit"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {angle: 4},
  {flags: "relative", width: "0.4", crop: "scale"},
  {opacity: 70},
  {effect: "brightness:100"},
  {flags: "layer_apply", gravity: "north", x: 15, y: 35}
  ]}).toHtml();

Library:

jQuery:

$.cloudinary.image("wood_chair.jpg", {transformation: [
  {angle: "hflip"},
  {height: 200, width: 200, crop: "fit"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {angle: 4},
  {flags: "relative", width: "0.4", crop: "scale"},
  {opacity: 70},
  {effect: "brightness:100"},
  {flags: "layer_apply", gravity: "north", x: 15, y: 35}
  ]})

React:

<Image publicId="wood_chair.jpg" >
  <Transformation angle="hflip" />
  <Transformation height="200" width="200" crop="fit" />
  <Transformation overlay="cloudinary_icon_white" />
  <Transformation angle="4" />
  <Transformation flags="relative" width="0.4" crop="scale" />
  <Transformation opacity="70" />
  <Transformation effect="brightness:100" />
  <Transformation flags="layer_apply" gravity="north" x="15" y="35" />
</Image>

Vue.js:

<cld-image public-id="wood_chair.jpg" >
  <cld-transformation angle="hflip" />
  <cld-transformation height="200" width="200" crop="fit" />
  <cld-transformation :overlay="cloudinary_icon_white" />
  <cld-transformation angle="4" />
  <cld-transformation flags="relative" width="0.4" crop="scale" />
  <cld-transformation opacity="70" />
  <cld-transformation effect="brightness:100" />
  <cld-transformation flags="layer_apply" gravity="north" x="15" y="35" />
</cld-image>

Angular:

<cl-image public-id="wood_chair.jpg" >
  <cl-transformation angle="hflip">
  </cl-transformation>
  <cl-transformation height="200" width="200" crop="fit">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon_white">
  </cl-transformation>
  <cl-transformation angle="4">
  </cl-transformation>
  <cl-transformation flags="relative" width="0.4" crop="scale">
  </cl-transformation>
  <cl-transformation opacity="70">
  </cl-transformation>
  <cl-transformation effect="brightness:100">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north" x="15" y="35">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Angle("hflip").Chain()
  .Height(200).Width(200).Crop("fit").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon_white")).Chain()
  .Angle(4).Chain()
  .Flags("relative").Width(0.4).Crop("scale").Chain()
  .Opacity(70).Chain()
  .Effect("brightness:100").Chain()
  .Flags("layer_apply").Gravity("north").X(15).Y(35)).BuildImageTag("wood_chair.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAngle("hflip").chain()
  .setHeight(200).setWidth(200).setCrop("fit").chain()
  .setOverlay("cloudinary_icon_white").chain()
  .setAngle(4).chain()
  .setFlags("relative").setWidth(0.4).setCrop("scale").chain()
  .setOpacity(70).chain()
  .setEffect("brightness:100").chain()
  .setFlags("layer_apply").setGravity("north").setX(15).setY(35)).generate("wood_chair.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation()
  .angle("hflip").chain()
  .height(200).width(200).crop("fit").chain()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .angle(4).chain()
  .flags("relative").width(0.4).crop("scale").chain()
  .opacity(70).chain()
  .effect("brightness:100").chain()
  .flags("layer_apply").gravity("north").x(15).y(35)).generate("wood_chair.jpg");

Kotlin:

// This code example is not currently available.

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

✔️ Feedback sent!

✖️

Error

Unfortunately there's been an error sending your feedback.

Rate this page: