Trim photo background

Apply the trim filter to remove the edges around the image. Do this by setting the effect parameter to trim (e_trim in URLs). You can customize the color similarity tolerance between 0 and 100. The default level is10`.

Here's an example image:

Ruby:
Copy to clipboard
cl_image_tag("business_man_padded.jpg")
PHP:
Copy to clipboard
cl_image_tag("business_man_padded.jpg")
Python:
Copy to clipboard
CloudinaryImage("business_man_padded.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("business_man_padded.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("business_man_padded.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('business_man_padded.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("business_man_padded.jpg")
React:
Copy to clipboard
<Image publicId="business_man_padded.jpg" >

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

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

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

By enabling the trim effect, we tell Cloudinary to detect and remove image edges whose color is similar to corner pixels:

Ruby:
Copy to clipboard
cl_image_tag("business_man_padded.jpg", :effect=>"trim")
PHP:
Copy to clipboard
cl_image_tag("business_man_padded.jpg", array("effect"=>"trim"))
Python:
Copy to clipboard
CloudinaryImage("business_man_padded.jpg").image(effect="trim")
Node.js:
Copy to clipboard
cloudinary.image("business_man_padded.jpg", {effect: "trim"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("trim")).imageTag("business_man_padded.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('business_man_padded.jpg', {effect: "trim"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("business_man_padded.jpg", {effect: "trim"})
React:
Copy to clipboard
<Image publicId="business_man_padded.jpg" >
  <Transformation effect="trim" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="business_man_padded.jpg" >
  <cld-transformation effect="trim" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="business_man_padded.jpg" >
  <cl-transformation effect="trim">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("trim")).BuildImageTag("business_man_padded.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("trim")).generate("business_man_padded.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("trim")).generate("business_man_padded.jpg")!, cloudinary: cloudinary)
Trimmed

We can customize the color tolerance level to be returned with various results. For example, raising the custom value to 50:

Ruby:
Copy to clipboard
cl_image_tag("business_man_padded.jpg", :effect=>"trim:50")
PHP:
Copy to clipboard
cl_image_tag("business_man_padded.jpg", array("effect"=>"trim:50"))
Python:
Copy to clipboard
CloudinaryImage("business_man_padded.jpg").image(effect="trim:50")
Node.js:
Copy to clipboard
cloudinary.image("business_man_padded.jpg", {effect: "trim:50"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("trim:50")).imageTag("business_man_padded.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('business_man_padded.jpg', {effect: "trim:50"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("business_man_padded.jpg", {effect: "trim:50"})
React:
Copy to clipboard
<Image publicId="business_man_padded.jpg" >
  <Transformation effect="trim:50" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="business_man_padded.jpg" >
  <cld-transformation effect="trim:50" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="business_man_padded.jpg" >
  <cl-transformation effect="trim:50">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("trim:50")).BuildImageTag("business_man_padded.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("trim:50")).generate("business_man_padded.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("trim:50")).generate("business_man_padded.jpg")!, cloudinary: cloudinary)
Custom level

The trim effect works on any color. In addition, you can add parameters to the trim effect to control the tolerance for similar coloring. For example, here's an image in which the default trimming level isn't enough:

Ruby:
Copy to clipboard
cl_image_tag("face_left.jpg", :effect=>"trim")
PHP:
Copy to clipboard
cl_image_tag("face_left.jpg", array("effect"=>"trim"))
Python:
Copy to clipboard
CloudinaryImage("face_left.jpg").image(effect="trim")
Node.js:
Copy to clipboard
cloudinary.image("face_left.jpg", {effect: "trim"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("trim")).imageTag("face_left.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_left.jpg', {effect: "trim"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_left.jpg", {effect: "trim"})
React:
Copy to clipboard
<Image publicId="face_left.jpg" >
  <Transformation effect="trim" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_left.jpg" >
  <cld-transformation effect="trim" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_left.jpg" >
  <cl-transformation effect="trim">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("trim")).BuildImageTag("face_left.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("trim")).generate("face_left.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("trim")).generate("face_left.jpg")!, cloudinary: cloudinary)
Default trim

Since the default level is 10, we probably need to raise the tolerance a bit. If we try this again with a higher value (e.g., 20), this seems to deliver the result we need:

Ruby:
Copy to clipboard
cl_image_tag("face_left.jpg", :effect=>"trim:20")
PHP:
Copy to clipboard
cl_image_tag("face_left.jpg", array("effect"=>"trim:20"))
Python:
Copy to clipboard
CloudinaryImage("face_left.jpg").image(effect="trim:20")
Node.js:
Copy to clipboard
cloudinary.image("face_left.jpg", {effect: "trim:20"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("trim:20")).imageTag("face_left.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('face_left.jpg', {effect: "trim:20"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("face_left.jpg", {effect: "trim:20"})
React:
Copy to clipboard
<Image publicId="face_left.jpg" >
  <Transformation effect="trim:20" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="face_left.jpg" >
  <cld-transformation effect="trim:20" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="face_left.jpg" >
  <cl-transformation effect="trim:20">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("trim:20")).BuildImageTag("face_left.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("trim:20")).generate("face_left.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("trim:20")).generate("face_left.jpg")!, cloudinary: cloudinary)
Custom level

by Itay Taragano