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:
cl_image_tag("business_man_padded.jpg")
PHP:
cl_image_tag("business_man_padded.jpg")
Python:
CloudinaryImage("business_man_padded.jpg").image()
Node.js:
cloudinary.image("business_man_padded.jpg")
Java:
cloudinary.url().imageTag("business_man_padded.jpg")
JS:
cl.imageTag('business_man_padded.jpg').toHtml();
jQuery:
$.cloudinary.image("business_man_padded.jpg")
React:
<Image publicId="business_man_padded.jpg" >

</Image>
Angular:
<cl-image public-id="business_man_padded.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("business_man_padded.jpg")
Original

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

Ruby:
cl_image_tag("business_man_padded.jpg", :effect=>"trim")
PHP:
cl_image_tag("business_man_padded.jpg", array("effect"=>"trim"))
Python:
CloudinaryImage("business_man_padded.jpg").image(effect="trim")
Node.js:
cloudinary.image("business_man_padded.jpg", {effect: "trim"})
Java:
cloudinary.url().transformation(new Transformation().effect("trim")).imageTag("business_man_padded.jpg")
JS:
cl.imageTag('business_man_padded.jpg', {effect: "trim"}).toHtml();
jQuery:
$.cloudinary.image("business_man_padded.jpg", {effect: "trim"})
React:
<Image publicId="business_man_padded.jpg" effect="trim">
        <Transformation effect="trim" />
</Image>
Angular:
<cl-image public-id="business_man_padded.jpg" effect="trim">
        <cl-transformation effect="trim" />
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("trim")).BuildImageTag("business_man_padded.jpg")
Trimmed

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

Ruby:
cl_image_tag("business_man_padded.jpg", :effect=>"trim:50")
PHP:
cl_image_tag("business_man_padded.jpg", array("effect"=>"trim:50"))
Python:
CloudinaryImage("business_man_padded.jpg").image(effect="trim:50")
Node.js:
cloudinary.image("business_man_padded.jpg", {effect: "trim:50"})
Java:
cloudinary.url().transformation(new Transformation().effect("trim:50")).imageTag("business_man_padded.jpg")
JS:
cl.imageTag('business_man_padded.jpg', {effect: "trim:50"}).toHtml();
jQuery:
$.cloudinary.image("business_man_padded.jpg", {effect: "trim:50"})
React:
<Image publicId="business_man_padded.jpg" effect="trim:50">
        <Transformation effect="trim:50" />
</Image>
Angular:
<cl-image public-id="business_man_padded.jpg" effect="trim:50">
        <cl-transformation effect="trim:50" />
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("trim:50")).BuildImageTag("business_man_padded.jpg")
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:
cl_image_tag("face_left.jpg", :effect=>"trim")
PHP:
cl_image_tag("face_left.jpg", array("effect"=>"trim"))
Python:
CloudinaryImage("face_left.jpg").image(effect="trim")
Node.js:
cloudinary.image("face_left.jpg", {effect: "trim"})
Java:
cloudinary.url().transformation(new Transformation().effect("trim")).imageTag("face_left.jpg")
JS:
cl.imageTag('face_left.jpg', {effect: "trim"}).toHtml();
jQuery:
$.cloudinary.image("face_left.jpg", {effect: "trim"})
React:
<Image publicId="face_left.jpg" effect="trim">
        <Transformation effect="trim" />
</Image>
Angular:
<cl-image public-id="face_left.jpg" effect="trim">
        <cl-transformation effect="trim" />
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("trim")).BuildImageTag("face_left.jpg")
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:
cl_image_tag("face_left.jpg", :effect=>"trim:20")
PHP:
cl_image_tag("face_left.jpg", array("effect"=>"trim:20"))
Python:
CloudinaryImage("face_left.jpg").image(effect="trim:20")
Node.js:
cloudinary.image("face_left.jpg", {effect: "trim:20"})
Java:
cloudinary.url().transformation(new Transformation().effect("trim:20")).imageTag("face_left.jpg")
JS:
cl.imageTag('face_left.jpg', {effect: "trim:20"}).toHtml();
jQuery:
$.cloudinary.image("face_left.jpg", {effect: "trim:20"})
React:
<Image publicId="face_left.jpg" effect="trim:20">
        <Transformation effect="trim:20" />
</Image>
Angular:
<cl-image public-id="face_left.jpg" effect="trim:20">
        <cl-transformation effect="trim:20" />
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("trim:20")).BuildImageTag("face_left.jpg")
Custom level

by Itay Taragano