Transparent overlays with OpenCV

One of my favorite aspects of running the PyImageSearch blog is sharing little bitesize OpenCV tips and tricks that I’ve learned after nearly 7 years of using the OpenCV library.

Today’s tip comes from my bag of experiences: constructing transparent overlays with OpenCV.

In order to construct a transparent overlay, you need two images:

1. Your original image.
2. An image containing what you want to “overlay” on top of the first using some level of alpha transparency.

The results of applying such a transparent overlay can see seen at the top of this blog post.

So, you might be wondering: “When/where will I use a transparent overlay in my computer vision application? And why are you sharing this tip?”

Great question.

For starters, if your OpenCV app requires a Heads-up Display (HUD) of any kind, you should consider using transparent overlays. Instead of displaying runtime critical information in separate window or in the terminal, you can directly overlay the information on your output image. Using transparent overlays alleviates the need to obfuscate the contents of the output image!

A second, more obvious example is alpha transparency where you need to “blend” two images together.

The use cases for transparent overlays are nearly endless — my goal in today’s blog post is simply to show you how you can incorporate them into your own applications.

Looking for the source code to this post?
Jump right to the downloads section.

Transparent overlays with OpenCV

In the remainder of this lesson, I’ll demonstrate how to construct transparent overlays using Python and OpenCV.

We’ll start with the following image:

Figure 1: Our initial image that we are going to construct an overlay for.

Our goal will be to:

• Use the

  cv2.rectangle
  

    function to draw a red bounding box surrounding myself in the bottom-right corner of the image.
• Apply the

  cv2.putText
  

    method to draw the text

  PyImageSearch
  

    (along with the transparency factor) in the top-left corner of the image.

The results of drawing the rectangle and text can be seen below:

Figure 2: Drawing a rectangle and text on the original image. However, both the text and bounding box are entirely opaque — no transparency has been applied.

However, notice that both the rectangle and text are fully opaque!

You cannot see myself through the rectangle, nor does the “PyImageSearch” text contain any level of transparency.

To remedy this, we can leverage the

cv2.addWeighted

  function to “blend” images together and construct the transparent overlay.

Let’s go ahead and dive into some source code to create a transparent overlay with Python and OpenCV. Open up a new file, name it

overlay.py

 , and insert the following code:

# import the necessary packages
from __future__ import print_function
import numpy as np
import cv2

# load the image
image = cv2.imread("mexico.jpg")

Lines 2-4 handle importing our required Python packages.

Line 7 loads our image from disk using the

cv2.imread

  function.

The next step is to loop over various values of alpha transparency between the range [0, 1.0], allowing us to visualize and understand how the

alpha

  value can influence our output image:

# import the necessary packages
from __future__ import print_function
import numpy as np
import cv2

# load the image
image = cv2.imread("mexico.jpg")

# loop over the alpha transparency values
for alpha in np.arange(0, 1.1, 0.1)[::-1]:
        # create two copies of the original image -- one for
        # the overlay and one for the final output image
        overlay = image.copy()
        output = image.copy()

        # draw a red rectangle surrounding Adrian in the image
        # along with the text "PyImageSearch" at the top-left
        # corner
        cv2.rectangle(overlay, (420, 205), (595, 385),
                (0, 0, 255), -1)
        cv2.putText(overlay, "PyImageSearch: alpha={}".format(alpha),
                (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1.0, (0, 0, 255), 3)

In order to apply the transparent overlay, we need to make two copies of the input image:

1. One for the final

   output
   

     image.
2. And another for the

   overlay
   

     we are about to construct.

Using the

cv2.rectangle

  function, we draw a rectangle surrounding myself in the bottom-right corner of the image. We then apply

cv2.putText

  to draw the text

PyImageSearch

  in the top-left corner.

We are now ready to apply the transparent overlay using the

cv2.addWeighted

  function:

# import the necessary packages
from __future__ import print_function
import numpy as np
import cv2

# load the image
image = cv2.imread("mexico.jpg")

# loop over the alpha transparency values
for alpha in np.arange(0, 1.1, 0.1)[::-1]:
        # create two copies of the original image -- one for
        # the overlay and one for the final output image
        overlay = image.copy()
        output = image.copy()

        # draw a red rectangle surrounding Adrian in the image
        # along with the text "PyImageSearch" at the top-left
        # corner
        cv2.rectangle(overlay, (420, 205), (595, 385),
                (0, 0, 255), -1)
        cv2.putText(overlay, "PyImageSearch: alpha={}".format(alpha),
                (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1.0, (0, 0, 255), 3)

        # apply the overlay
        cv2.addWeighted(overlay, alpha, output, 1 - alpha,
                0, output)

The

cv2.addWeighted

  method requires six arguments.

The first is our

overlay

 , the image that we want to “overlay” on top of the original image using a supplied level of alpha transparency.

The second parameter is the actual alpha transparency of the overlay. The closer

alpha

  is to 1.0, the more opaque the overlay will be. Similarly, the closer

alpha

  is to 0.0, the more transparent the overlay will appear.

The third argument to

cv2.addWeighted

  is the source image — in this case, the original image loaded from disk.

We supply the beta value as the fourth argument. Beta is defined as

1 - alpha

 . We need to define both alpha and beta such that

alpha + beta = 1.0

 .

The fifth parameter is the gamma value — a scalar added to the weighted sum. You can think of gamma as a constant added to the output image after applying the weighted addition. In this case, we set it to zero since we do not need to apply an addition of a constant value.

Finally, we have the last argument,

output

 , which is the output destination after applying the weighted sum operation — this value is our final output image.

Our last code block handles displaying the final output image to our screen, as well as displaying the relevant alpha and beta values:

# import the necessary packages
from __future__ import print_function
import numpy as np
import cv2

# load the image
image = cv2.imread("mexico.jpg")

# loop over the alpha transparency values
for alpha in np.arange(0, 1.1, 0.1)[::-1]:
        # create two copies of the original image -- one for
        # the overlay and one for the final output image
        overlay = image.copy()
        output = image.copy()

        # draw a red rectangle surrounding Adrian in the image
        # along with the text "PyImageSearch" at the top-left
        # corner
        cv2.rectangle(overlay, (420, 205), (595, 385),
                (0, 0, 255), -1)
        cv2.putText(overlay, "PyImageSearch: alpha={}".format(alpha),
                (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1.0, (0, 0, 255), 3)

        # apply the overlay
        cv2.addWeighted(overlay, alpha, output, 1 - alpha,
                0, output)

        # show the output image
        print("alpha={}, beta={}".format(alpha, 1 - alpha))
        cv2.imshow("Output", output)
        cv2.waitKey(0)

To execute our Python script, download the source code + example image to this post (using the “Downloads” form found at the bottom of this lesson) and execute the following command:

$ python overlay.py

You should see the following image displayed to your screen:

Figure 3: Notice how for alpha=1.0, the text and rectangle are entirely opaque (i.e., not transparent).

However, once we reach

alpha=0.5

 , both the “PyImageSearch” text and rectangle are substantially more transparent:

Figure 4: Constructing transparent overlays with Python and OpenCV.

At

alpha=0.1

 , the text and rectangle are barely visible:

Figure 5: The smaller alpha gets, the more transparent the overlay will be.

Below you can see a GIF animation that visualizes each of the transparency levels:

Summary

In this blog post, we learned how to construct transparent overlays using Python, OpenCV, and the

cv2.addWeighted

  function.

Future blog posts will use this transparent overlay functionality to draw Heads-up Displays (HUDs) on output images, and to make outputs more aesthetically appealing.

Downloads:

If you would like to download the code and images used in this post, please enter your email address in the form below. Not only will you get a .zip of the code, I’ll also send you a FREE 11-page Resource Guide on Computer Vision and Image Search Engines, including exclusive techniques that I don’t post on this blog! Sound good? If so, enter your email address and I’ll send you the code immediately!

Email address:

The post Transparent overlays with OpenCV appeared first on PyImageSearch.

from PyImageSearch http://ift.tt/1TEmC75
via IFTTT