We’re all obsessed with filters, photo effects, and color correction tools that make our photos look professional, but we rarely stop and think about where they come from or why they work.
Everything on the computer contains lines of code. As operating systems become advanced, we can start to improve our code quality. With a faster CPU, larger RAM, and ample hard disk space, among other things, computers are able to run complex software at lightning speeds.
While we’ve had facial recognition software since the 90s and filter effects well before that, it’s only recently that we’ve been able to manipulate photographs using design programs. Now, we can completely change the look and feel of a photo with a single click, all thanks to coding.
In this article, we’ll look at how code is used to change photographs into stunning works of art.
How to Apply Filters to Regular Images Using Code
When an image is uploaded to the computer, it’s converted into pixels. These pixels have their own RGB or Hex color, which are represented by a series of numbered values. HSL colors are also relevant because they correspond to the hue, saturation, and lightness of each pixel.
To manipulate these values, we need to use Python because it can enhance the appearance of images using techniques like color saturation and sharpening. To make this process easier, we’ll use OpenCV to import an image and NumPy module and matplotlib for data visualization.
The following code belongs to the creators at AskPython:
Step 1: Import Modules
To start, you need to import your modules. To help with visualization, use ‘seaborn.’
-
import cv2
-
import matplotlib.pyplot as plt
-
import numpy as np
-
plt.style.use('seaborn')
Step 2: Load the Image
Next, you’ll read and store your image with “imread.” Use the ‘cvtColor’ function to change colors into the RGB format (it’s easier). Finally, you can plot images with the ‘imshow’ function. When you’re done, your code should look something like this:
-
loaded_img = cv2.imread("image.jpg")
-
loaded_img = cv2.cvtColor(loaded_img,cv2.COLOR_BGR2RGB)
-
plt.figure(figsize=(8,8))
-
plt.imshow(loaded_img,cmap="gray")
-
plt.axis("off")
-
plt.show()
Step 3: Create Your Filters
Once your code is set up, you can start playing with it. To create a filter, you’ll need Kernel and 2D Filters. Kernels help define values for blurring, sharpening, and embossing, while 2D Filters allow you to load the image into the conventional network.
Here’s what a Sepia Filter looks like:
-
Sepia_Kernel = np.array([[0.272, 0.534, 0.131],[0.349, 0.686, 0.168],[0.393, 0.769, 0.189]])
-
Sepia_Effect_Img = cv2.filter2D(src=loaded_img, kernel=Sepia_Kernel, ddepth=-1)
-
plt.figure(figsize=(8,8))
-
plt.imshow(Sepia_Effect_Img,cmap="gray")
-
plt.axis("off")
-
plt.show()
Here’s what a Blur Filter looks like:
-
Blur_Effect_Img = cv2.GaussianBlur(loaded_img, (35, 35), 0)
-
plt.figure(figsize=(8,8))
-
plt.imshow(Blur_Effect_Img,cmap="gray")
-
plt.axis("off")
-
plt.show()
Step 4: Adding Sliders
As you can see, adjusting these values isn’t too complicated. App and design programs will use a similar-looking code but will use sliders to adjust how much of the filter you want to apply.
The following code belongs to the creators at Webdevtrick:
<div class="sliders"> <div class="singleSlider"> <div class="val" id="bright">100%</div> <input class="slider" id="slider1" type="range" min="0" max="500" value="100"> <label for="slider1">brightness</label> </div>
Instead of Python, HTML is used (CSS would be used for images and positioning) because the code would appear on a webpage. Photo image apps like BeFunky will use something similar when you add filters to an image. Even programs like Photoshop do the same with their filters.
Step 5: Turning Manual Into Automatic
Instead of sliders, coders can place their code into a button. However, you can’t use the code in the Python section, as it won’t work. A basic “blur button” would look something like this:
<input type="file" accept="image/*" id="file-input" />
<button onClick=”test()”>Blur Image</button>
<button onClick=”undo()”>Unblur Image</button>
<script>
function test() {
document.getElementById(“file-input”).style.filter=”blur (10Px)”;
}
function undo() {
document.getElementById(“file-input”).style.filter=”blur (10Px)”;
}
</script>
Your code would become more complicated from there, but it’s the simplest way to create filters on a web browser. This trick is also used on Instagram and various other image websites.
But there are some things simple code can’t accomplish. If you want to automatically edit a photo using AI technology, you’ll need to use facial recognition technology. For this purpose, you can use SparkAR or OpenCV, as both programs are trained to recognize human faces.
How Most Facial Recognition Programs Work
A typical facial recognition setup uses sophisticated software to identify and analyze faces. On social media, facial recognition is used to apply filters correctly on multiple face shapes.
Detection
Facial recognition technology will scan and look for a face. Once it detects a face, the system will estimate the head’s position, size, and orientation. For the system to work, your head has to be turned at least 35 degrees towards the camera. It may not detect you if you’re looking down.
Normalization
The image of your face is captured, scaled, and mapped into an appropriate size in a process called normalization. After this step, the program will read the geometry of your face by multiple key factors, like the distance between your eyes. Some programs can run hundreds of factors.
Representation
While normalization creates a facial signature, representation converts facial signatures into unique code. With this code, an applied filter will be able to move with your face. Filters are basically placed on a 3D mesh with multiple points that indicate key positions of your face.
How Facial Recognition Technology Helped Create AI Effects
If you wanted to create an AR filter or an AI effect that removes backgrounds from images, you’d need to utilize facial recognition technology. Here’s how AI improves photography.
Facial Recognition and AR Filters
Augmented reality (AR) filters are computer-generated effects that superimpose on real-life images. The classic “Dog Filter” is an example of an AR filter. You can easily create your own AR filter on software like Spark AR, thanks to its codeless drag-and-drop functionality.
Spark AR isn’t limited to unmoving faces. It can create filters that activate when you make a face or when you make certain gestures, like a thumbs up, head-tilt, or hand movements.
Without facial recognition software, AR filters wouldn’t be possible. AR relies on knowing the person's relative position to the camera, as well as the size and shape of the person's face.
Facial Recognition and Background Removers
To remove a background from an image, the photo editor you’re using has to recognize the person's face and body. Keep in mind that facial recognition software is sometimes used as an umbrella term to describe any technology that can detect a person or animal in a photo.
Once the people in the image are detected, AI will make the background completely disappear. From there, you can keep the background blank or replace it with another photo automatically.
Facial Recognition and Portrait Correction
Portrait correction filters fall into two categories: color correction and touch-ups. A photo that’s color corrected uses simplistic code to change the hues in a photograph. Popular filters like Clarendon, Gingham, and Juno adjust the RGB scale on images but don’t touch it up.
An AI portrait enhancer, on the other hand, can even skin tone, remove blemishes, whiten teeth, and brighten eyes without looking fake. These filters are perfect for selfies or group photos.
Advanced portrait correction filters won’t remove freckles, fine lines, or anything that gives your face personality. Since it looks more natural, it’s hard for people to tell that you applied a filter.
Facial Recognition and Image Enhancement
Facial recognition software didn’t just improve images that include faces. This technology plays a vital role in how we edit photographs as a whole. Image enhancers can use artificial intelligence and advanced coding concepts to create photos that look flawless.
AI-backed photo editing programs can locate and enhance colors, balance image exposure, and adjust highlights and shadows. They can also adjust ISO and sharpness to improve details.
Facial Recognition and Artistic Effects
Taking all of what we’ve learned so far, it’s easy to see how AI photo editors use code to completely manipulate photographs. By adjusting the colors, white balance, sharpness, exposure, and saturation within an image, you can literally transform anything into fine art.
However, you need facial recognition if you want an image editor to see every detail. Only then will you be able to turn your photo into a watercolor painting or a pencil and ink sketch.
The most sophisticated photo editors will complete these complicated steps seamlessly. It’s incredible that we no longer need to learn how to code or edit to create stunning works of art.
Conclusion
Any image on the computer is turned into code, which is lucky for us. As coders, you can manipulate any photograph in any way you choose. Thanks to facial recognition software and AI technology, you don’t have to be a computer whizz or designer to turn your photos into art.