A Quick and Simple Way to Display a Bitmap in C++

Perhaps the hardest part of working with bitmap image data is that while doing the programming, it looks like random bytes rather than people or houses.  

Here at Experts-Exchange, I've worked on a number of questions along the lines of "I have binary image data from source X, and I need to do Y with it."  Finding a solution often requires intermediate steps:  Tweak the data and look at the result as an image to see if the tweaks went the right way.

This talks about that problem, but it also describes a simple way to display any bitmap in your MFC programs.

Example:
I am getting a stream of binary data from a barcode reader, and I want to display it.  I'm told that it is monochrome image data -- 1 bit per pixel (bpp) -- but I don't know how to turn it into a usable HBITMAP.  Can you help?

The asker posted a binary file containing the raw data.  I was told that the image was 364 wide by 212 high.

As a starting point, I did what I always do:  Create a dialog-based Win32 Application with MFC support.  I added a button and an OnClick handler, and pounded out some code to read the data into memory:

void CBitmapTesterDlg::OnBnClickedButton1() 
{
	int nWide= 364;
	int nHigh= 212;
	int nDataLen= (nWide/8) * nHigh;  // amount of data to read
 	//--------------------------------- read the data into memory
	BYTE* pabBits=    new BYTE[nDataLen];
	CFile cFile( L"c:\\temp\\bits.bin", CFile::modeRead );
	int n= cFile.Read(	pabBits, nDataLen );
	cFile.Close();
 	//--------------------------------- create a monochrome bitmap
	HBITMAP hBmp= ::CreateBitmap( nWide, nHigh, 1, 1, pabBits );
	//  NOW what?!??!?!?
	delete pabBits;           // cleanup allocation
}
                                  

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:

I can breakpoint on line 12 and use the Visual Studio memory-viewing window to see:

Fig1-MemoryView.JPG

• 38 KB
• Fig 1.  Rawdata in the Memory viewer

...which actually looks promising:  It looks like it could be monochrome bitmap data.  I know that the ff values are each a set of eight black (foreground color) pixels.  A 00 value is a set of eight white (background color) pixels and other values will be a sequence of eight pixels, some black and some white.

But where do I go from here?  I need to see the image before I can make any progress.   Here's how I proceed:

Fig3-FirstResult.JPG

• 22 KB
• Fig 3.  First pass result

Now I can see the problem that needs to be solved:

        The diagonal characteristic is symptomatic of horizontal misalignment.  
        The width must be wrong.  

So I use my "programming by debugger" technique -- tweak the code and run it -- trying different widths.  (Note: There was a time when a rebuild used to take minutes or even hours, but these days. a program like this is running by the time you lift your finger from the mouse button :-).

I could see that I was getting closer as I increased the width, but I had to go way wide -- to 384 -- before the scanlines would resolve into a clean image.  Eventually, I remembered that bitmap scanlines are always a multiple of four bytes (DWORD) in length.  I had been told that the width was 364 pixels, and 364 looks like a nice multiple of four, but it is not! (at least when counting by 8s -:)  That would make each line 45.5 bytes wide.  The next multiple of four above 45.5 is 48, so I know that each scanline will contain 48 bytes of data.  I add-in some generic code to calculate the needed values  (in multiple steps rather than all in one confusing formula, just because that's the way I roll at EE).  Modify the code like so:

void CBitmapTesterDlg::OnBnClickedButton1()
{
	int nWide= 364;
	int nHigh= 212;
 
	//-------------------- account for line length needing to be 32-bit chunks
 	int nDwordsPerLine= (nWide + 31)/32;   // rounds up
	int nBytesPerLine=  nDwordsPerLine * 4;
	int nPixelsPerLine= nBytesPerLine  * 8;
 
	int nDataLen= nBytesPerLine * nHigh;  // how much of the file to read
 
	BYTE* pabBits=    new BYTE[nDataLen];
	CFile cFile(L"c:\\temp\\bits.bin", CFile::modeRead );
	int n= cFile.Read(	pabBits, nDataLen );
	cFile.Close();

	HBITMAP hBmp= ::CreateBitmap( nPixelsPerLine, nHigh, 1, 1, pabBits );

 	m_ctlBmp.SetBitmap( hBmp ); // display the result

	delete pabBits;           // cleanup allocations
}
                                  

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:

Fig4-AfterFixingWidth.JPG

• 13 KB
• FIg 4.  After fixing the width

And the problem is clearly solved!
(Well, almost!  That image turned out to be upside down, but changing that was a minor issue. See the EE question for the fix or if you want to download the binary image data file).

Review: