Using Cloudinary AI Background Removal to remove backgrounds from images
- Run
npm init
- Go to Cloudinary register for an account and enable the Cloudinary AI Background Removal
- Create
.env
to hold Cloudinary cloud name, api key and api secret - Create server using
ngrok
and replacenotification_url
inindex.js
- Place test image in
/images
- Run
node server
andnode index.js
When index.js executes it will first upload your image to Cloudinary. However the background image service has a time delay between getting the image on the cloud and removing the backgroud. The object info: { background_removal: { cloudinary_ai: [Object] } },
will return { status: 'pending' }
When the background image removal is complete you will recieve a POST on the notification_url
which will be an JSON object holding notification_type: 'info'
with info_status: 'complete',
and new url
and secure_url
to the image with background removed.
The notification_url
has to be online as the service will not hit localhost. You can use ngrok to create a tunnel to localhost node server.
Submitting an image
{ public_id: 'remove-bg-test',
version: 1552408150,
signature: '9b3f32bcbd2bcd9ce075482555119b6d8f845de1',
width: 968,
height: 661,
format: 'jpg',
resource_type: 'image',
created_at: '2019-03-12T16:29:10Z',
tags: [],
bytes: 26599,
type: 'upload',
etag: '9ed4bb8389fa395288976291575e7867',
placeholder: false,
url: 'http://res.cloudinary.com/cloud-bucket-test/image/upload/v1552408150/remove-bg-test.jpg',
secure_url: 'https://res.cloudinary.com/cloud-bucket-test/image/upload/v1552408150/remove-bg-test.jpg',
info: { background_removal: { cloudinary_ai: [Object] } },
original_filename: 'face' } undefined
{ status: 'pending' }
Getting a result back on notfication_url
{ info_kind: 'cloudinary_ai',
info_status: 'complete',
public_id: 'remove-bg-test',
uploaded_at: '2019-03-12T16:29:10Z',
version: 1552408214,
url: 'http://res.cloudinary.com/cloud-bucket-test/image/upload/v1552408214/remove-bg-test.jpg',
secure_url: 'https://res.cloudinary.com/cloud-bucket-test/image/upload/v1552408214/remove-bg-test.jpg',
etag: '9ed4bb8389fa395288976291575e7867',
notification_type: 'info' }