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.
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.
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 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.
var uploadParams = new ImageUploadParams(){
File = new FileDescription(@"wood_chair.jpg"),
PublicId = "wood_chair",
BackgroundRemoval = "pixelz"};
var uploadResult = cloudinary.Upload(uploadParams);
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 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.
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:
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.new CloudinaryImage("wood_chair_orig.jpg").resize(scale().width(300));
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.new CloudinaryImage("wood_chair_orig.jpg").resize(scale().width(300));
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.new CloudinaryImage("wood_chair_orig.jpg").resize(scale().width(300));
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.new CloudinaryImage("wood_chair_orig.jpg").resize(scale().width(300));
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.
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.
The JSON content is signed using your product environment API secret. 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.
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.
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.new CloudinaryImage("wood_chair.jpg")
.resize(pad().width(200).height(200))
.adjust(saturation().level(50))
.effect(shadow())
.border(solid(1, "#666"));
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.new CloudinaryImage("wood_chair.jpg")
.resize(pad().width(200).height(200))
.adjust(saturation().level(50))
.effect(shadow())
.border(solid(1, "#666"));
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.new CloudinaryImage("wood_chair.jpg")
.resize(pad().width(200).height(200))
.adjust(saturation().level(50))
.effect(shadow())
.border(solid(1, "#666"));
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.new CloudinaryImage("wood_chair.jpg")
.resize(pad().width(200).height(200))
.adjust(saturation().level(50))
.effect(shadow())
.border(solid(1, "#666"));
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.
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.new CloudinaryImage("wood_chair.jpg")
.rotate(mode(horizontalFlip()))
.resize(fit().width(200).height(200))
.overlay(
source(
image("cloudinary_icon_white").transformation(
new Transformation()
.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)
)
);
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.new CloudinaryImage("wood_chair.jpg")
.rotate(mode(horizontalFlip()))
.resize(fit().width(200).height(200))
.overlay(
source(
image("cloudinary_icon_white").transformation(
new Transformation()
.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)
)
);
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.new CloudinaryImage("wood_chair.jpg")
.rotate(mode(horizontalFlip()))
.resize(fit().width(200).height(200))
.overlay(
source(
image("cloudinary_icon_white").transformation(
new Transformation()
.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)
)
);
// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.new CloudinaryImage("wood_chair.jpg")
.rotate(mode(horizontalFlip()))
.resize(fit().width(200).height(200))
.overlay(
source(
image("cloudinary_icon_white").transformation(
new Transformation()
.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)
)
);
