Can I run the Cloudinary-AI-Background Removal from a React function

Amara
Amara Member Posts: 2 ✭
edited November 2022 in Developer APIs

I am trying to call the Cloudinary-AI-Background removal from a function in my Nextjs project. My plan is to upload the image using the upload widget and remove the background with a button, i also want to get the URL of this new optimized image so I can store it on my database and display it in my application.



Can this be done?

Tagged:

Answers

  • Ranson
    Ranson Cloudinary Staff Posts: 25

    Hi Amara,

    To clarify the use case, would the background removal be implemented on all uploads? If this is the case, you would be able to utilize an upload preset that would run the background removal add-on for assets uploaded through the upload widget instead of creating a button that would run this after the upload process completes. The upload widget returns a URL value that you can save to your DB.

    If you are looking to accomplish this using a button for another reason, then you would need to add one that will make a request to the add-on that will run the background removal. In the response you will receive a URL with the resulting transformed image that you will be able to use to save to a DB.

  • Amara
    Amara Member Posts: 2 ✭

    Thank you so much! Is it available for the free plan though?

    Screenshot (781).png


  • mgaaron
    mgaaron Member Posts: 1 ✭

    I optimize images as a part of my Magento speed optimization service. eCommerce sites powered by Magento are the complex catalogs with thousands of images. It is impossible to manually optimize every JPEGs or PNGs so I utilize a couple of automatic size reducing techniques.

    I use gifsicle for GIFs, jpegtran for JPEGs and optipng for PNGs – these are command line utilities used as prebuilt packages for your OS. I use the following bash script to find every image and optimize it on the fly:

    #!/bin/bash

find ./media -iname '*.gif' -exec sh -c 'gifsicle -b -O3 -o "{}.out" "{}"; mv "{}.out" "{}"' \;

find ./media -iname '*.png' -exec optipng -o5 -keep -preserve '{}' \;

find ./media -type f -iname '*jpg' -exec sh -c 'jpegtran -outfile "{}.out" -optimize "{}"; mv "{}.out" "{}"' \;

    This script could be added to cron daemon to optimize the new images as they come in.

    The second technique I use is called the Google PageSpeed Module, a server extension which you can install either for Nginx or Apache. This tool optimizes images and caches them on the server. The configuration is simple:

    ModPagespeedRewriteLevel CoreFilters

    The CoreFiters filter includes image optimization as well as many other useful speed optimization tools (see https://modpagespeed.com/doc/configuration).

    The third method I sometimes use to polish images that are already optimized by the first two techniques is to run the page through Google PageSpeed Insights, and then download the optimized image pack (you can find the download link at the bottom of your pagespeed report, see https://developers.google.com/speed/docs/insights/OptimizeImages). But even with the PageSpeed module installed, Google Insights can still squeeze a few kilobytes here and there. The third method requires a lot of manual work and patience, but it will pay off.

    Contributed by coinsclone

Categories