Let's Create Custom Image Background Remover Tool in PHP and Python | Rembg Package Integration PHP

About Custom Remove Background Tool Build With PHP and Python
In this blog post, We will discuss how we can develop our custom remove background tool in PHP and Python. Remove Background Removes The Image background using the Deep Learning Model We Integrate With The Help Of Python. So let's start discussing the whole logic With Proper Understanding. Let's Start By First Writing the HTML part.

We Use An Input[type=” file”] to upload the file absolutely in our case we just want the image file of formats (png, jpeg, jpg). And Add a button to remove the background. After this, we design the beautiful Layout using CSS.

Know lets come on to the JavaScript part where we do a lot of programming stuff like validating file format. Compressing the image using HTML Canvas. We compress the image to 800 x 600 (size) to compress the file size before sending it to PHP. When I developed this complete tool I started testing it and I feel that some of you don't know about PHP configuration. Default PHP Upload Size is not properly setup on every server so I decided to first compress the image to eliminate this issue. Let's focus on the next block which is about Validating and compressing images in JavaScript.

JavaScript Image Extension Validation With Image Compression
Let's discuss the javascript part in detail. When someone uploads an image We validate the image extension by using the includes() function and use an array of ext = [“image/jpeg”, “image/jpg”, “image/png”]. and validates the size also that image greater than 3mb cannot be uploaded. you can modify the code according to you. if validates then we upload the image file otherwise we empty the file value. After this, our next logic is to compress the image using JavaScript.

Let's Discuss About Image Compression in JavaScript. For Compressing the image size. Whenever the user uploads the file and at the time of clicking on the button we compress the image. We also maintain the aspected ratio of the image so compressing the image in Canvas lets you people understand how to resize any image. So first we use a new Promise with reject and resolve because this process takes some time and returns the promise after this we read the file by using FileReader API in JavaScript that reads the file content. After getting the content we create a new image element and use an onload event listener to load the image onto the canvas. first, we create an element by using a javascript-like document.createElement(“canvas”) and make a ctx variable. know we set the canvas height and width according to the image height and width.

After this, we divide the height and width to get the aspect ratio we then check if the height or width is greater than 256 then we divide the height by the aspect ratio, and in else conditions we multiply the width with the aspect ratio. After this, we draw the image on the canvas with ctx.drawImage. after this we create the image blob and return another promise in the try and catch condition try statement will return the blob and in the catch condition we send the reject. In that case, know our image blob is ready to send it to PHP. Now let's focus on the next block
which is about PHP integration

PHP integration For Sending File to Python
Know where our backend logic starts where we will use the shell_exec function to send the file to the Python and get the base64encoded version of the removed image. So you can see the complete video clip of the PHP integration. Let's quickly discuss how Python works.

Python Integration For Removing the Background from The Images
We start Python integration by first setting up the virtual env because we have to learn advanced fundamentals then we start importing some modules like sys, base64, rembg, and from rembg import remove. Rembg is the Python library that uses the unet onnx model to remove images from the background. after this, we read the file content using the statement in Python and sent back the removed version into PHP and PHP then sent the base64 data of the PNG image to javascript in that case our custom remove background is fully ready.

Steps to Follow
1. Writing HTML part
2. Designing beautiful Layout using CSS
3. Integrating JavaScript
4. Validating type, size, and compressing image
5, PHP integration where we use shell_exec to send files to the python
6. Python integration where we set virtual env, import modules, and send back the removed version
7. That’s it

Final Conclusion
I try to explain every concept very easily. Just get a basic understanding by reading the complete Blog Post that will help you to then see my YouTube video which is inside the last block of this post. Build your custom remove background tool in PHP and Python

Useful Links
Download Model || https://github.com/danielgatis/rembg/releases/download/v0.0.0/u2net.onnx
Get Tool || https://malikcodex.blogspot.com/2024/03/image-background-remover-in-php-python.html

Видео Let's Create Custom Image Background Remover Tool in PHP and Python | Rembg Package Integration PHP канала Coding Malik