Remove background from images using php and python

In this blog post we will discuss how we can develop our custom remove background tool in php and python

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. Download the onnx model externally from this URL Download the Unet Model. 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. First we write the HTML code for the web page.

2. Then we use CSS to design a visually appealing layout for the page.

3. Next we integrate JavaScript to add interactive elements to the page.

4. We validate the type size and compressed images to ensure fast loading times.

5. PHP is integrated and we use shell_exec to send files to Python.

6. In Python we set up a virtual environment imported necessary modules and sent back the removed version.

7. That's all!

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