How to Display Images in Python Using VS Code

Introduction

Visual representation is a crucial aspect of programming, especially in data science, machine learning, and web development. In this tutorial, we will explore how to display images using Python in Visual Studio Code (VS Code). This skill is fundamental for developers and data scientists who want to analyze data visually, create applications involving image processing, or build web applications that require image display.

Throughout this article, we will guide you through the processes of displaying images using popular Python libraries such as Matplotlib, Pillow, and OpenCV. Each library has its unique features and use cases, making Python an incredibly versatile tool for handling images. By the end of the tutorial, you will be equipped with practical knowledge to effectively work with images in your Python projects.

Let’s dive into the different methods of displaying images in Python and learn how to implement them in VS Code.

Setting Up Your Environment in VS Code

Before we begin displaying images, it’s important to have your development environment set up correctly. Open Visual Studio Code and ensure you have Python installed. You can verify this by typing python --version in the integrated terminal. If Python is not installed, download and install the latest version of Python from the official Python website.

Next, you will need to install a few essential libraries. We’ll be using Matplotlib, Pillow, and OpenCV. You can install these libraries using pip, the package installer for Python. In your VS Code terminal, execute the following commands:

pip install matplotlib
pip install pillow
pip install opencv-python

Once the libraries are installed, you are ready to start coding. Make sure to create a new Python file in VS Code where you will write your image display scripts.

Displaying Images with Matplotlib

Matplotlib is a widely used library in Python for data visualization, and it can also be used to display images. To display an image with Matplotlib, you can follow these steps:

First, you need to import the matplotlib.pyplot module and the image module from matplotlib. You can read an image from a file and then display it as follows:

import matplotlib.pyplot as plt
import matplotlib.image as mpimg

# Read an image
image = mpimg.imread('path/to/your/image.jpg')

# Display the image
plt.imshow(image)
plt.axis('off')  # Turn off axis numbers and ticks
plt.show()

In this code snippet, replace 'path/to/your/image.jpg' with the actual path to your image file. The imshow function is used to display the image, and axis('off') removes the axes for a cleaner view.

Understanding Matplotlib Functions

Matplotlib offers a variety of functions to manipulate the display of images. For instance, you can adjust the color map by adding the cmap parameter in the imshow function:

plt.imshow(image, cmap='gray')

This adjustment can be especially useful when you are dealing with grayscale images or when you wish to highlight specific features of an image.

Additionally, if you want to save the displayed image, you can use:

plt.imsave('output_image.png', image)

This line of code will save the displayed image in the current working directory as output_image.png.

Displaying Images with Pillow

The Pillow library is an essential tool for image processing tasks in Python. It provides simple methods for opening, manipulating, and saving various image file formats. Here’s how you can display an image using Pillow:

from PIL import Image

# Open an image file
image = Image.open('path/to/your/image.jpg')

# Display the image
image.show()

In the example above, the Image.open() method is used to load the image, and the show() method opens the default image viewer to display the image.

Advanced Image Manipulation with Pillow

Pillow also allows for more advanced image manipulations. You can resize, rotate, or apply filters to images before displaying them. For example, to resize the image, you could do:

image_resized = image.resize((200, 200))
image_resized.show()

This will resize the image to 200×200 pixels. Similarly, you can rotate the image:

image_rotated = image.rotate(45)
image_rotated.show()

Rotate the image by a specified angle (in degrees) using the rotate() method. These manipulations can be useful in preprocessing images for data analysis or machine learning tasks.

Displaying Images with OpenCV

OpenCV is a powerful library focused on computer vision tasks but is also highly effective for displaying images. Here’s how to utilize OpenCV to show an image:

import cv2

# Read an image
image = cv2.imread('path/to/your/image.jpg')

# Display the image
cv2.imshow('Image Window', image)
cv2.waitKey(0)  # Wait for a key press to close the window
cv2.destroyAllWindows()

In this example, the cv2.imread() function reads the image, and cv2.imshow() is used to create a window to display it. The waitKey(0) function is crucial because it keeps the window open until a key is pressed.

Handling Image Formats and Colors in OpenCV

When using OpenCV, be mindful that images are read in BGR format instead of RGB. If you need to convert the color scheme to RGB for display, you can do so with the following code:

image_rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)

Now, when you display the image using Matplotlib or Pillow, it will appear correctly in color. OpenCV also offers numerous capabilities to manipulate images, such as applying filters, detecting edges, and more.

Working with Image Paths

In your scripts, make sure to provide correct paths to the images. You can use relative paths if the images are stored in the same directory as your Python script. Otherwise, absolute paths will be required. For example:

image_path = 'C:/Users/YourName/Pictures/image.jpg'

This specifies the image’s exact location on your file system. Using os.path can help make your path handling more dynamic and adaptable across different operating systems.

Integrating Image Display in GUI Applications

Often, you may want to integrate image display functionality within a GUI application. Libraries such as Tkinter and PyQt can be used alongside Matplotlib, Pillow, or OpenCV to create applications that display images in a window. Here’s a simple example using Tkinter and Pillow:

from tkinter import Tk, Label
from PIL import Image, ImageTk

# Create a window
window = Tk()

# Load the image
ii = Image.open('path/to/your/image.jpg')
image = ImageTk.PhotoImage(ii)

# Create a label to display the image
label = Label(window, image=image)
label.pack()

# Start the GUI loop
window.mainloop()

This code snippet creates a simple GUI application that displays an image using the Tkinter library. The image is loaded using Pillow and displayed on a label widget.

Conclusion

In this tutorial, we have explored various methods for displaying images in Python using Visual Studio Code. We covered how to use three powerful libraries: Matplotlib, Pillow, and OpenCV. Each library has its strengths and specific use cases, allowing you to choose the one that best fits your project requirements.

Having the ability to display and manipulate images is essential for various applications, including data visualization, image processing, and computer vision tasks. By familiarizing yourself with these libraries and their functionalities, you will enhance your coding skills and be better prepared to tackle complex projects.

Now that you know how to display images in Python, try experimenting with different images and manipulations to deepen your understanding. Share your creations and ask questions in the Python community to continue learning and growing as a developer!