Ask Your Question

How to display multiple images in one window?

asked 2017-10-08 09:04:28 -0500

poljakov13 gravatar image

updated 2017-10-08 09:05:39 -0500

berak gravatar image

I load 1 image and display them in 2 separate windows , one is normal and other one is grayscale filtered. But i need to display them in 1 window , side by side. I made example image :


My Code itself is atmoment simple , but is there any simple way how display them in 1 window ?

C O D E :

**import numpy as np import cv2

image = cv2.imread("kuju.jpg") #Load image

aa = cv2.imread("kuju.jpg",0) #Apply filter bb = cv2.imread("kuju.jpg",1)

cv2.imshow("frame1",aa) #display in windows cv2.imshow("frame2",bb)

cv2.waitKey(0) cv2.destroyAllWindows()**

edit retag flag offensive close merge delete


*STILL * looking answer for this task ?

nobody cant help ???

poljakov13 gravatar imagepoljakov13 ( 2017-11-16 08:29:31 -0500 )edit

I'm confused as to why this is still an issue!

eshirima gravatar imageeshirima ( 2017-11-16 08:33:29 -0500 )edit

3 answers

Sort by ยป oldest newest most voted

answered 2017-10-08 19:02:16 -0500

Since images are numpy arrays in OpenCV, we could use concatenate, vstack or hstack to help us achieve the task.

The comments in the code should be self explanatory but one thing to be aware of is:

1. Image Channels

A coloured and grey scale image have 3 and 1 channels respectively. You cannot just combine their respective matrices together so you need to convert one to the other. With this code, I converted the grey scale to a coloured one to facilitate the combination

2. Image Sizes

It goes without saying that this method fails when you have images of different sizes. Why? Because you are trying to perform operations on matrices of different dimensions.

PS: OpenCV also has hconcat and vconcat. I got the C++ version of it working just fine but never tested it on Python.

import cv2
import numpy as np

image = cv2.imread('pinocchio.png')
# I just resized the image to a quarter of its original size
image = cv2.resize(image, (0, 0), None, .25, .25)

grey = cv2.cvtColor(image, cv2.COLOR_RGB2GRAY)
# Make the grey scale image have three channels
grey_3_channel = cv2.cvtColor(grey, cv2.COLOR_GRAY2BGR)

numpy_vertical = np.vstack((image, grey_3_channel))
numpy_horizontal = np.hstack((image, grey_3_channel))

numpy_vertical_concat = np.concatenate((image, grey_3_channel), axis=0)
numpy_horizontal_concat = np.concatenate((image, grey_3_channel), axis=1)

cv2.imshow('Main', image)
cv2.imshow('Numpy Vertical', numpy_vertical)
cv2.imshow('Numpy Horizontal', numpy_horizontal)
cv2.imshow('Numpy Vertical Concat', numpy_vertical_concat)
cv2.imshow('Numpy Horizontal Concat', numpy_horizontal_concat)


Horizontal Stack Horizontal Stack Results

Vertical Stack

image description

edit flag offensive delete link more


This is not right way.So I use this grey = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)

supra56 gravatar imagesupra56 ( 2017-11-16 21:42:44 -0500 )edit

@supra56 Why is it not right? I've never had any problem with whether to use cv2.COLOR_RGB2GRAY or cv2.COLOR_BGR2GRAY when it comes to converting a coloured image to grey scale. The image already has 3 channels so it's a matter of whether you want to read the blue or red channel first. If you are going for platform convention, then yes OpenCV uses BGR but I go for readability hence RGB. Plus, RGB is the widely adapted convention no wonder even OpenCV added it even though at the beginning BGR was the standard.

eshirima gravatar imageeshirima ( 2017-11-16 22:23:15 -0500 )edit

Sorry, I did not realize that you are using on windows and I'm using on raspberry pi using linux. But I haven't attempted both cv2.COLOR_RGB2GRAY and cv2.COLOR_GRAY2BGR. I don't have time to attempt this. Because I'm working on robot.

supra56 gravatar imagesupra56 ( 2017-11-17 07:41:37 -0500 )edit

Hi, will this works in visual studio? unable to write import commands in visual studio.

sandeep5146 gravatar imagesandeep5146 ( 2018-08-17 01:25:45 -0500 )edit

answered 2017-11-16 10:12:32 -0500

supra56 gravatar image

updated 2017-11-16 10:19:43 -0500

I corrected for u from eshirima 's code as above. Here is code:

import cv2
import numpy as np

image = cv2.imread('kuju.jpg')
# I just resized the image to a quarter of its original size
#image = cv2.resize(image, (0, 0), None, .25, .25)    #rem it out if u want smaller size

grey = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
# Make the grey scale image have three channels
grey_3_channel = cv2.cvtColor(grey, cv2.COLOR_GRAY2BGR)

numpy_horizontal = np.hstack((image, grey_3_channel))

numpy_horizontal_concat = np.concatenate((image, grey_3_channel), axis=1)

cv2.imshow('Numpy Horizontal Concat', numpy_horizontal_concat)
edit flag offensive delete link more



thank you , this was helpful

poljakov13 gravatar imagepoljakov13 ( 2017-11-27 15:25:57 -0500 )edit

Can we run the same program in visual studio?

sandeep5146 gravatar imagesandeep5146 ( 2018-08-17 01:29:06 -0500 )edit

answered 2017-10-08 09:46:25 -0500

image description the key of the problem is "set the roi"

 Mat matSrc = imread("e:/template/lena.jpg");  
    Mat matGray ; 

Mat matDst(Size(matSrc.cols*2,matSrc.rows),matSrc.type(),Scalar::all(0));
Mat matRoi = matDst(Rect(0,0,matSrc.cols,matSrc.rows));
matRoi = matDst(Rect(matSrc.cols,0,matSrc.cols,matSrc.rows));

edit flag offensive delete link more


c++ answer to a python problem ;(

berak gravatar imageberak ( 2017-10-08 10:05:56 -0500 )edit

looks like im not only on who needs this in python

poljakov13 gravatar imagepoljakov13 ( 2017-10-08 12:43:10 -0500 )edit


poljakov13 gravatar imagepoljakov13 ( 2017-11-16 08:31:11 -0500 )edit

@poljakov13, please do not post answers here, if you have a question or comment, thank you.

berak gravatar imageberak ( 2017-11-16 08:36:50 -0500 )edit

just wanted to correct this answer(atleast as I did it in Java):

imshow("result",matSrc); -> imshow("result",matDst);

JojoF gravatar imageJojoF ( 2020-09-23 07:25:28 -0500 )edit
Login/Signup to Answer

Question Tools



Asked: 2017-10-08 09:03:01 -0500

Seen: 103,623 times

Last updated: Nov 16 '17