Have you ever wondered why some apps have stunning images that grab your attention? The secret is image enhancement. This tutorial will show you how to add these features to your apps using Filestack, a tool for managing and improving images.
First, we’ll explain what image enhancement is and give some examples. Then, we’ll discuss why having these features in your app is important. We’ll also look at popular methods for adding image enhancement, focusing on Filestack.
Lastly, we’ll guide you through integrating Filestack into your app and show you the results you can achieve. We’ll wrap up with some common questions. Let’s get started!
What do you mean by image enhancement?
Image enhancement means improving the quality of an image to make it look better. This process involves several techniques to make images clearer, brighter, and more appealing.
For example,
👉If a photo is too dark, you can increase the brightness to make it more visible.
👉Adjusting the contrast can make the details in the image stand out.
👉Sharpening is another method that makes the edges and details in the photo more defined.
👉Noise reduction helps remove any grainy spots in a picture, making it look smoother.
👉Filters can change the color of an image. For instance, a sepia filter can give a photo an old-fashioned look, while a black-and-white filter can create a classic style.
Image enhancement is important in many applications. In online shopping, better images can help sell more products. On social media, enhanced photos can get more likes and shares. Photo editing apps use these techniques to let users create beautiful pictures.
Using image enhancement, developers can ensure that their apps show images in the best possible way, creating a better user experience.
Applications
Image enhancement improves the quality of pictures in many areas. One major use is on social media, where people enhance their photos to get more likes and shares. They use filters, adjust brightness, and change colors to make their images look better.
Good product photos are very important in online shopping. Enhanced images show details, colors, and textures more clearly, helping customers make better buying decisions and increasing sales. Clear and attractive product photos can also reduce the number of returns.
Photo editing apps also use image enhancement. These apps let users improve their photos by making them sharper, brighter, and more colorful. Both amateur and professional photographers use these tools to create beautiful pictures.
Image enhancement is crucial in healthcare. Doctors use it to make medical images like MRIs and X-rays clearer, which helps them diagnose and treat patients more accurately.
Image enhancement also benefits security and surveillance. Enhanced images from cameras help identify people and objects more easily, which is important for investigations and monitoring.
What are the popular methods to integrate image enhancement features within your apps?
Filestack
Filestack Image Enhancement automatically analyzes an image and applies color corrections to improve its quality. You can also make other adjustments to enhance the image further. To achieve the best results, you can choose from various presets.
Note that images must be under 10MB to use enhancement features. Filestack Image Enhancement is a premium feature. Contact our support team to add it to your plan.
Before implementation, it’s essential to know the enhancement options Filestack offers:
- Upscale
- Auto
- Vivid
- Beautify
- Beautify Plus
- Fix Dark
- Fix Noise
- Outdoor
- Fix Tint
- Fireworks
These options highlight the versatility of Filestack’s image enhancement capabilities. Let’s take a look at some success stories of Filestack.
What are the Filestack success stories?
Here are some most popular case studies where Filestack was implemented:
1. OpenWater
OpenWater, a platform for managing awards and competitions, used Filestack to handle their file uploads. Before using Filestack, they faced many issues with uploads.
After integrating Filestack, problems dropped from 7% to 0.1%. This change helped them manage thousands of video uploads smoothly, especially during busy periods. This integration was key to their growth, tripling their client base and doubling their staff in one year.
2. ScribblePost
ScribblePost, a tool for managing tasks and notes, integrated Filestack to improve file handling. Filestack made it easy for users to upload and manage files. This allowed ScribblePost to add more features without making the app complex, helping it grow efficiently.
3. Hutch
Hutch, an app for virtual home decoration, used Filestack for image processing. Filestack’s tools helped Hutch deliver high-quality images quickly. This was important for providing a good user experience in their augmented reality app.
You can learn about more success stories by Filestack at https://www.filestack.com/customers/
Integration with Filestack
The first step towards a successful integration is to get your API key. For this purpose, you create an account at Filestack and get the API key shown on the dashboard.
The next step is to open the Filestack documentation for image enhancement endpoints. You must test these endpoints with your API key using an API testing tool. Postman is one of the most popular API testing tools. Let’s test our API via Postman.
Here are the image enhancement URLs by Filestack:
https://cdn.filestackcontent.com/enhance/HANDLE
This task automatically enhances images using the handle of the uploaded file. Here are the presets available at Filestack for image enhancement with their purpose:
| Preset | Description |
| auto | Automatically selects the best enhancement settings for a photo. |
| vivid | Enhances depth and brightness in a photo. |
| beautify | Ideal for portraits, this preset scans each face in the photo and adjusts corrections individually for optimal results. |
| beautify_plus | Similar to Beautify, it applies stronger corrections with a broader range of modifications. |
| fix_dark | It is perfect for underexposed photos or dark subjects against bright backgrounds. Turning off contrast maximizes detail in shadow areas without blowing out highlights. |
| fix_noise | Detects and removes noise from photos while preserving details. Adjusts based on the ISO level and camera model. |
| fix_tint | Removes abnormal tints (yellow, blue, green, etc.) caused by various lighting conditions, such as fluorescent, infrared, ultraviolet, and tungsten lights. |
| outdoor | Enhances landscape photos by increasing colour vibrancy and adjusting the contrast to reveal more detail in shadow areas. |
| fireworks | Corrects for night skies and highlights excess colours from fireworks. |
Here is an example of how you can use these presets:
https://cdn.filestackcontent.com/enhance=preset:fix_dark/HANDLE
Here is another example that chains other tasks with the preset:
https://cdn.filestackcontent.com/resize=w:500/enhance=preset:beautify/HANDLE
Open the Postman and create a new GET request as under:
Next, add the URL to the GET request bar:
https://cdn.filestackcontent.com/apikey/enhance=preset:fix_dark/HANDLE
Add your API key and replace HANDLE with the URL to your desired image.
Here is our actual image:
Here is the response image by Postman:
Let’s create our application and integrate the Filestack image enhancement features.
Building the sample application
Create an index.html file in your project directory on the command prompt.
Open that file inside the Visual Studio Code.
Add the below code to that file:
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filestack Upload and Enhance</title>
<script src="https://static.filestackapi.com/filestack-js/3.x.x/filestack.min.js"></script>
<style>
/* Styles will be explained later */
</style>
</head>
<body>
<div class="container">
<!-👉Content will be explained later -->
</div>
<script>
/* JavaScript will be explained later */
</script>
</body>
</html>👉The `<!DOCTYPE html>` declaration defines the document as HTML5.
👉The `<html lang=”en”>` tag sets the language of the document to English.
👉The `<head>` section contains meta information, including character encoding, viewport settings for responsive design, the page title, and the Filestack JavaScript library.
👉The `<body>` contains the main content of the page.
CSS for Styling
You can access the CSS styles through the GitHub repository: https://github.com/devayesha23/PhotoEnhancementApp
👉The `body` styles center the content, set a background image, and apply a general style.
👉`.container` styles create a centered, white box with padding, rounded corners, and a shadow.
👉`h1` styles set the heading’s font size and color.
👉`button`, `select`, `input` styles define the look and feel of interactive elements.
👉`.enhance-buttons`, `.options-container` styles initially hide certain elements.
HTML Content
<div class="container">
<h1>Enhance Your Images with Filestack</h1>
<button id="uploadBtn">Upload File</button>
<div class="enhance-buttons">
<button id="autoEnhanceBtn">Enhance with AI</button>
<button id="manualEnhanceBtn">Set Your Own Enhancements</button>
</div>
<div class="options-container">
<select id="presetSelect">
<option value="auto">Auto</option>
<option value="vivid">Vivid</option>
<option value="beautify">Beautify</option>
<option value="beautify_plus">Beautify Plus</option>
<option value="fix_dark">Fix Dark</option>
<option value="fix_noise">Fix Noise</option>
<option value="fix_tint">Fix Tint</option>
<option value="outdoor">Outdoor</option>
<option value="fireworks">Fireworks</option>
</select>
<input type="number" id="resizeWidth" placeholder="Width (px)">
<input type="number" id="resizeHeight" placeholder="Height (px)">
<button id="applyEnhancementsBtn">Apply Enhancements</button>
</div>
</div>👉`h1` displays the main heading.
👉`button id=”uploadBtn”` is for uploading files.
👉`div class=”enhance-buttons”` contains buttons for automatic and manual enhancements.
👉`div class=”options-container”` contains options for manual enhancements.
JavaScript Functionality
<script>
// Initialize Filestack client
const filestackClient = filestack.init('YOUR_API_KEY');
const uploadBtn = document.getElementById('uploadBtn');
const enhanceButtons = document.querySelector('.enhance-buttons');
const optionsContainer = document.querySelector('.options-container');
const presetSelect = document.getElementById('presetSelect');
const resizeWidth = document.getElementById('resizeWidth');
const resizeHeight = document.getElementById('resizeHeight');
const applyEnhancementsBtn = document.getElementById('applyEnhancementsBtn');
let uploadedFileHandle = '';
// Upload file button click event
uploadBtn.addEventListener('click', () => {
filestackClient.picker({
onUploadDone: (result) => {
if (result.filesUploaded.length > 0) {
uploadedFileHandle = result.filesUploaded[0].handle;
enhanceButtons.style.display = 'block';
console.log('File uploaded:', uploadedFileHandle);
} else {
console.error('No files uploaded');
}
}
}).open();
});
// Auto Enhance button click event
document.getElementById('autoEnhanceBtn').addEventListener('click', () => {
const enhanceUrl = `https://cdn.filestackcontent.com/YOUR_API_KEY/enhance/${uploadedFileHandle}`;
window.open(enhanceUrl, '_blank');
});
// Manual Enhance button click event
document.getElementById('manualEnhanceBtn').addEventListener('click', () => {
optionsContainer.style.display = 'block';
});
// Apply Enhancements button click event
applyEnhancementsBtn.addEventListener('click', () => {
const selectedPreset = presetSelect.value;
let taskString = '';
if (resizeWidth.value) {
taskString += `resize=width:${resizeWidth.value},`;
}
if (resizeHeight.value) {
taskString += `height:${resizeHeight.value},`;
}
taskString = taskString ? `${taskString.slice(0, -1)}/` : '';
const enhanceUrl = `https://cdn.filestackcontent.com/${taskString}enhance=preset:${selectedPreset}/${uploadedFileHandle}`;
window.open(enhanceUrl, '_blank');
});
</script>
👉`filestackClient` is initialized with your Filestack API key.
👉`uploadBtn` triggers the file upload dialog.
👉`onUploadDone` callback handles the upload result and displays enhancement buttons if successful.
👉`autoEnhanceBtn` creates a URL for automatic enhancement and opens it in a new tab.
👉`manualEnhanceBtn` displays options for manual enhancements.
👉`applyEnhancementsBtn` constructs a URL based on selected enhancements and opens it in a new tab.
Get the complete code at: https://github.com/devayesha23/PhotoEnhancementApp
Output
When you open the web app in the chrome, you will see a page given below:
Click on the Upload File button. You will get the below interface:
Choose the preferred file from the desired location. Let’s suppose we add the below image:
When you click on the Upload button, you will get the below interface. Enhance with AI allows automatic enhancement of the image without manual intervention. While the “Set Your Own Enhancements” button allows you to choose your own preset and apply enhancements. You can also choose the desired width and height to resize the final output image.
Enhance with AI:
Set Your Own Enhancements:
Conclusion
Using Filestack for image enhancement in your app is a great way to make your images look better and improve user experience. This tutorial showed you how easy it is to add these features with Filestack.
We started by explaining what image enhancement is and why it’s important. We saw that better images can boost online sales, get more likes on social media, and help in fields like healthcare and security. Filestack offers many options to enhance images, such as brightening, sharpening, and reducing noise.
We looked at real-life examples where Filestack helped companies like OpenWater, ScribblePost, and Hutch solve their image problems and grow their business. These success stories show how effective Filestack can be.
The tutorial walked you through getting an API key, using Postman to test it, and writing simple code to add image enhancements to your app. By following these steps, you can easily improve the images in your app.
FAQs
1. How does Filestack improve images?
Filestack is a file management tool that helps you upload, change, and deliver images. You can easily improve images by resizing, cropping, adjusting brightness, and applying filters.
2. How do I add filters and adjust my images with Filestack?
You can use Filestack’s tools to add filters and adjustments. For example, to make an image brighter or add a sepia filter, you use a simple link like this:
https://cdn.filestackcontent.com/resize=width:500/brightness=value:10/filter=sepia/source_image
3. Can I enhance many images at once with Filestack?
Yes, you can. You can process multiple images by making several API calls or using Filestack’s Workflows. Workflows let you set up automatic processes to enhance batches of images.
4. Can I see changes before saving them?
Yes, you can preview the changes. Filestack allows you to see the effects of enhancements in real-time. This way, you can make sure the images look right before saving them.
Sign Up for free at Filestack to enhance images effectively using AI and manual enhancements.
Ayesha Zahra is a Geo Informatics Engineer with hands-on experience in web development (both frontend & backend). Also, she is a technical writer, a passionate programmer, and a video editor. She is always looking for opportunities to excel in her skills & build a strong career.