Red Eye Removal by Using Filestack with React JS

Have you ever taken a great photo only to be disappointed by red eyes? Red eye removal is essential for keeping your photos looking natural and professional. In this blog, we’ll explore how to tackle this issue using Filestack with React JS.

First, we’ll explain what red eye is and why it occurs. Red eye happens when the camera flash reflects off the retina, causing a red glow in the eyes. It’s a common problem in low-light conditions and can ruin an otherwise perfect photo. Filestack allows you to resolve this issue through its red eye removal feature.  We’ll discuss the importance of removing red eyes from photos and using the red eye removal feature.  

We’ll introduce Filestack, a powerful API that simplifies file handling and transformations. Using Filestack with React JS provides an efficient and seamless solution for this task. Finally, we’ll guide you through integrating Filestack with your React JS application. 

You’ll learn about the prerequisites, how to test the API in Postman, and how to build a sample application that removes red eye from photos. Let’s get started!

What is the red eye?

Red eye is a common problem in photos. It makes people’s eyes look red instead of their normal color. This happens when the camera flash reflects off the back of the eye. The back of the eye has many blood vessels, which causes the red color.

Suppose you are taking a picture of your friend at a party. The room is dark, so you use the camera flash. When you look at the photo, your friend’s eyes are glowing red. This is red eye.

The red eye happens more in low light when the pupils are big. This lets more light into the eye, causing the red reflection. It is a problem in many photos and must be fixed later.

Knowing why red eye occurs can help you avoid it. You can adjust the lighting or use your camera’s red-eye reduction feature.

What are the applications of red-eye removal?

Red-eye removal makes photos look natural and professional. It is useful in many ways.

Personal Photography

Red-eye removal helps keep special memories clear and friendly in personal photos. Family pictures, vacation shots, and images of friends look better without red eyes. This makes them great for sharing on social media or printing for albums.

Professional Photography

For professional photographers, red-eye removal is essential. Clients want high-quality pictures for portraits, weddings, and events. Fixing red eye ensures people look their best, improving the overall quality of the photos.

Social Media

Good photos are key on social media. Red-eye removal helps create appealing posts that get more likes, shares, and followers. This is especially important for influencers, marketers, and anyone wanting a positive online presence.

Marketing and Advertising

Attractive images are important in marketing. Photos without red eyes look more professional and appealing, which helps in creating effective ads, brochures, and other promotional materials.

Digital Albums and Prints

Red-eye removal ensures high-quality images for digital albums or printed photos. This makes photos look polished, whether stored digitally or displayed in frames.

How do you remove your red eye in a photo?

Red-eye in photos happens when a camera flash reflects off the eyes, making them look red. Here are some simple ways to fix red-eye:

1. Photo Editing

Software Programs like Adobe Photoshop, GIMP, and even Microsoft Paint have tools to remove red-eye. You just click on the red part of the eye, and the software fixes it.

2. Mobile Apps 

Apps like Snapseed and Adobe Lightroom offer red-eye removal. These are easy to use on your phone. Just select the red-eye tool and tap on the eyes in the photo.

3. Online Editors 

Websites like Fotor and Pixlr let you edit photos online. Upload your photo, use the red-eye removal tool, and download the fixed image.

4. Filestack 

Filestack is a service that helps handle files, including photos. It has a tool to remove red-eye automatically. Developers can integrate Filestack into their apps, making it easy to fix red-eye in many photos simultaneously.

Filestack red eye removal feature is present in Pro Plans or higher ones. Moreover, it does not require any additional tasks or parameters. In the coming sections, we will build a sample application. We will show you how red eye removal works with Filestack. Keep reading. 

Why should you use Filestack with React JS to remove the red eye?

Here are the reasons why you should use Filestack with React JS to remove red eye:

Advantage	Why Choose Filestack?
Ease of Integration	Filestack provides a straightforward API that integrates easily with React JS applications. To add red-eye removal features, minimal code is required.
Automation	The API allows for automated red-eye removal, saving time and ensuring consistency by eliminating the need for manual editing.
Scalability	Filestack’s cloud-based infrastructure supports handling multiple image processing requests simultaneously, essential for applications with high demand.
User Experience	Enhances user experience by allowing users to upload and edit photos directly within the application.
Security	Provides secure file handling, ensuring user data protection and compliance with data protection regulations.
Support and Documentation	Offers comprehensive documentation and support, facilitating easier implementation and troubleshooting for developers.

 

How do you integrate Filestack with React JS to remove red eye?

Follow the steps given below to integrate Filestack with React JS:

Pre-requisites

You should have a Filestack API key before starting integration with React JS. 

• Create an account at Filestack by clicking on the Sign Up button.
• Once the account is created, you should navigate to the Filestack dashboard. It will give you access to the API key. 
• Next, you should test the API key to ensure it works fine. 

API testing in Postman

Open the Postman API testing tool.

Next, create a new GET request. 

Enter the URL given below into the request bar:

https://cdn.filestackcontent.com/ADD-YOUR-API-KEY/redeye/ADD-IMAGE-URL 

Don’t forget to add your API key and image URL to the Postman. 

Let’s suppose we add the URL of below image:

Here is the output we get:

 

If we are getting this output, it means that our API key is working fine. 

We have successfully tested our API key. Let’s move towards building a sample application by using React JS and Filestack. 

Building a sample application

Follow the steps given below to set up your React project:

Step 1: Set Up Your React Application

Make sure you have Node.js installed on your computer. You can download it from https://nodejs.org/ 

Open your terminal/command prompt and run the following command to create a new React application using Create React App:

   npx create-react-app red-eye-removal

This will create a new directory named `red-eye-removal` with a basic React setup.

The next step is to navigate to the directory:

   cd red-eye-removal

Step 2: Add Filestack Dependency

Run the following command to add the Filestack library:

   npm install filestack-js

Step 3: Add the JavaScript Code to the App.js File

1. Import Statements

import React, { useState } from 'react';

import filestack from 'filestack-js';

import './App.css';

• `import React, { useState } from ‘react’;` imports React and the `useState` hook, which is used for managing state in the component.
• `import filestack from ‘filestack-js’;` imports the Filestack library, which provides tools for file uploading and processing.
• `import ‘./App.css’;` imports a CSS file for styling the component.

2. Component Definition

const App = () => {

`const App = () => {` defines a functional component named `App`.

3. API Key and Client Initialization

const apikey = 'Add-Your-API-Key-Here';

const client = filestack.init(apikey);

• `const apikey = ‘A18L3T2eWRemxYIGwGlZsz’;’ stores the Filestack API key.
• `const client = filestack.init(apikey);` initializes the Filestack client using the API key.

4. State Variables

const [uploadedFileHandle, setUploadedFileHandle] = useState(null);

const [enhancedFileHandle, setEnhancedFileHandle] = useState(null);

const [redEyeRemovalUrl, setRedEyeRemovalUrl] = useState('');

These lines define state variables using the `useState` hook:

•  `uploadedFileHandle` Stores the handle of the uploaded file.
•   `enhancedFileHandle` Stores the handle of the enhanced file.
•   `redEyeRemovalUrl` Stores the URL of the red-eye removed image.

5. Function to Open Filestack Picker

const openFilestackEnhancePicker = () => {

  const options = {

    onUploadDone: (res) => {

      setUploadedFileHandle(res.filesUploaded[0].handle);

      alert('File uploaded successfully. Now click "Red Eye Removal" to apply the enhancement.');

    },

  };

  const picker = client.picker(options);

  picker.open();

};

• `const openFilestackEnhancePicker = () => {` defines a function to open the Filestack picker.
• `const options = { … }` defines options for the picker, including a callback function `onUploadDone` that is called when the upload is done. This function sets the `uploadedFileHandle` state with the handle of the uploaded file and displays an alert.
• `const picker = client.picker(options);` creates a picker instance with the specified options.
• `picker.open();` opens the picker.

6. Function to Apply Red-Eye Removal

const applyRedEyeRemoval = () => {

  alert('Applying red-eye removal...');

  const fileHandle = uploadedFileHandle;

  const url = `https://process.filestackapi.com/redeye/${fileHandle}`;

  setRedEyeRemovalUrl(url);

  setEnhancedFileHandle(fileHandle);

  alert('Red-eye removal applied successfully.');

};

• `const applyRedEyeRemoval = () => {` defines a function to apply red-eye removal.
• `const fileHandle = uploadedFileHandle;` retrieves the uploaded file handle.
• `const url = `https://process.filestackapi.com/redeye/${fileHandle}`;`: This constructs the URL for the red-eye removal API.
• `setRedEyeRemovalUrl(url);` sets the `redEyeRemovalUrl` state with the URL of the red-eye removed image.
• `setEnhancedFileHandle(fileHandle);` sets the `enhancedFileHandle` state with the handle of the enhanced file.
• Alerts inform the user about the process.

7. Function to Redirect to Enhanced Image

const redirectToEnhancedImage = () => {

  window.location.href = redEyeRemovalUrl;

};

• `const redirectToEnhancedImage = () => {` defines a function to redirect the user to the enhanced image URL.
• `window.location.href = redEyeRemovalUrl;` sets the browser’s location to the `redEyeRemovalUrl`.

8. Render Method

return (

  <div className="container">

    <div className="buttonContainer">

      {!uploadedFileHandle && (

        <button onClick={openFilestackEnhancePicker}>Remove Red Eye with Filestack</button>

      )}

      {uploadedFileHandle && !enhancedFileHandle && (

        <button onClick={applyRedEyeRemoval}>Red Eye Removal</button>

      )}

      {enhancedFileHandle && (

        <button onClick={redirectToEnhancedImage}>Access Image</button>

      )}

    </div>

  </div>

);

The component returns a JSX structure.

 

• `!uploadedFileHandle && …`: If no file has been uploaded, display the button to upload a file.
• `uploadedFileHandle && !enhancedFileHandle && …`: If a file has been uploaded but not enhanced, display the button to apply red-eye removal.
• `enhancedFileHandle && …`: If a file has been enhanced, display the button to access the enhanced image.

9. Exporting the Component

export default App;

This exports the `App` component as the default export.

This React component allows users to upload a photo, apply red eye removal using Filestack, and access the enhanced photo. The component uses Filestack’s API for file handling and transformations, and React’s state management to handle the different stages of the process. The application provides a simple and effective way to automate red eye removal in photos.

Step 4: Run Your React Application

Run the below code inside the terminal to start your application

   npm start

This will start the development server and open your new React application in your default web browser. You should see the interface where you can upload an image, apply red eye removal, and access the enhanced image.

It is important to note that you should also add the CSS styles to your React app. Replace the styles given at App.css with the styles given at the GitHub repository. It will give your application a completely new look. Let’s explore the output of our React App. 

Output

This is the main web page of our React application.

Click on the Remove Red Eye button, and you will get the Filestack file picker under:

Here is the output image:

Conclusion

Red eye removal is essential for keeping your photos looking natural and professional. In this blog, we explored how to tackle this issue using Filestack with React JS. Red eye occurs when the camera flash reflects off the retina. This causes a red glow in the eyes. It’s common in low-light conditions. Red eye can ruin an otherwise perfect photo.

Removing red eyes enhances image quality. This is important for personal memories. It is also crucial for professional photography and social media. Filestack is a powerful API. It simplifies file handling and transformations. This includes red eye removal. Using Filestack with React JS provides an efficient solution. 

Integrating Filestack into your React application automates red-eye removal. This saves time and ensures consistency. Manual editing is not needed. We guided you through integrating Filestack with your React JS application. We explained the prerequisites. We showed how to test the API in Postman. We also demonstrated building a sample application for red eye removal.

FAQs

1. What causes a red-eye effect in photographs, and how can it be removed?

Camera flash reflecting off the retina causes red-eye. It is removable by using red-eye reduction tools.

2. Can red-eye be removed from photos using Filestack in a React JS application?

Yes. You can remove red-eye from photos using Filestack in a React JS application. We have explained all the steps in detail in the above sections. 

3. What are the steps to integrate Filestack for red-eye removal in a React JS project?

1. Get your API key.
2. Test it via Postman.
3. Set up React JS project.
4. Integrate the Filestack library and then write code for red eye removal.

4. Are there any limitations or common issues when using Filestack for red-eye removal?

Filestack’s red-eye removal may struggle with very small, dark, or poorly lit red-eye areas.

5. How much does Filestack’s red-eye removal transformation cost?

Filestack pricing starts at $69 per month. However, the red eye removal feature is present in pro plans or higher plans.

Sign Up for free at Filestack to remove red eyes and enhance your photos. 

Read More →