Create a Thumbnail Image of a Web Page

Here you will find source code for a C++ program that captures a thumbnail image of any web page.  You might use web page thumbnails in a visual directory of your site, or to show as a sort of "preview" placed next to a link.

I needed to develop a web page that shows a small image of the home page of several thousand sites.  We looked at using some existing programs to generate the thumbnails, but it turned out to be a simple programming task, so we did it in-house.

Overview
1) In a Web Browser control, navigate to a certain URL
2) Set the "Optical Zoom Factor" to a small value (near 25%)
3) Bitblt the resulting image to a memory DC
4) Save the image file using the CImage object.

In the EE Article, Browser Bot -- Automate Browsing Sequences with C++, I described how to set up to view a web page in a simple program.  Read that article for a detailed step-by-step.  Here, I'll just summarize:

1) Create a dialog-based MFC application.
2) Add an ActiveX control: Microsoft Web Browser and make a control-type variable for it.
3) Add a button and a button handler that will load and display the web page.
We'll assume that you have all of that in place.  For instance:
We are going to use the browser control's ExecWB function to set the zoom, using the OLECMDID_OPTICAL_ZOOM verb (new with Internet Explorer 7). It lets you choose a value as low as 10%.   You can noodle around with the code, trying various values until you get a "good enough" image for your thumbnail.  But, there are some calculations you can do to zero-in on the perfect values.

We want to generate a specific size of thumbnail image, say 200x200.  We don't want to capture the scrollbars or the borders, so we set the browser control's window size a bit larger than needed:

    int nScrollbarWide= GetSystemMetrics( SM_CXVSCROLL ); 
                          int nEdgeWide= GetSystemMetrics( SM_CXEDGE ); 
                          int nNonClientWide= nScrollbarWide+nEdgeWide; 
                          int nCtlWide= nThumbnailWide+nNonClientWide;
                          int nCtlHigh= nThumbnailWide+nNonClientWide;
                       
                          m_ctlBrowser.MoveWindow( 0,0, nCtlWide,nCtlHigh );

Select all Open in new window

Next, we need to decide on a zoom percentage.  I ended up with a 20% zoom (1/5th normal size), but here's my thinking on the subject:

Most pages these days are designed to look best at a width of about 1000.  Try it out -- go to a page and resize the browser window, making the horizontal scrollbar appear and disappear.   Also watch the top of the page where a navigation bar often appears -- that's usually the key width.   Many pages look fine with a width of 800, often just cutting off part of an advertisement bar on the right side, but I decided on a "base width" of 1000.

I wanted a thumbnail that will show that 1000 pixel-wide image in a width of 200, so I hardly needed to break out my 7th-grade math book to figure the percentage:

   200/1000 = n/100 ... n=20 (20%)
Some other examples:
  page width   800, thumbnail width 150:     150/800 = n/100 ... n=18.5  (19%)
  page width 1024, thumbnail width 180:   180/1024 = n/100 ... n=17.58 (18%)
  page width 1024, thumbnail width 100:   100/1024 = n/100 ... n= 9.976 (10%)

We can't easily control when the browser will display the scrollbars, so I found it best to assume that they are always there.   We are creating a thumbnail, which by its nature is expected to be fuzzy and lossy, so it's no big deal if I cut off a thin strip of the right side of a page, but it would look bad if I show a piece of a scrollbar.
Note that making the zoom too small ends up with those strips of dark gray background on the sides.  We want to avoid capturing that, so it's better to set the zoom value slightly larger rather than slightly smaller.

Snapping the Shot and Saving to a File
Finally, here's the code that takes the image rendered in the browser control and outputs it to a file:

#include <atlimage.h> // needed for CImage object
                      void DelayMs( int nMs );
                      
                      void CThumbnailWebPgDlg::OnBnClickedButton1()
                      {
                          int nThumbnailWide= 200;
                          int nThumbnailHigh= 200;
                          int nZoomPercent=   21;  // see text for calculations
                      
                          //------------------ set the size of the browser control
                          int nScrollbarWide= GetSystemMetrics( SM_CXVSCROLL ); 
                          int nEdgeWide= GetSystemMetrics( SM_CXEDGE ); 
                          int nNonClientWide= nScrollbarWide+nEdgeWide; 
                          int nCtlWide= nThumbnailWide+nNonClientWide;
                          int nCtlHigh= nThumbnailWide+nNonClientWide;
                          m_ctlBrowser.MoveWindow( 0,0, nCtlWide,nCtlHigh );
                      
                          //--------------- trick to avoid timing problems (see text)
                          CString sUrl= L"about:blank";
                          m_ctlBrowser.Navigate( sUrl, 0,0,0,0 ); 
                          while ( m_ctlBrowser.get_ReadyState() != READYSTATE_COMPLETE ) {
                              DelayMs( 100 );
                          }
                          CComVariant vZoom( nZoomPercent ); 
                          m_ctlBrowser.ExecWB( 
                              OLECMDID_OPTICAL_ZOOM, OLECMDEXECOPT_DONTPROMPTUSER, 
                              &vZoom, NULL);
                          // ---------------------------------------- now load the target page	
                          sUrl= L"http://www.experts-exchange.com/Programming/Languages/CPP/";
                          m_ctlBrowser.Navigate( sUrl, 0,0,0,0 ); 
                      
                          while ( m_ctlBrowser.get_ReadyState() != READYSTATE_COMPLETE ) {
                              DelayMs( 100 );
                          }
                          DelayMs( 3000 );  // extra delay to let flash, et al., show its image
                          //------------ Get the part of the image we want into a bitmap
                          //------------ Create a memory DC and bitmap to hold the image
                          CDC* pDC= GetDC();           
                          CDC dcMemory;
                          dcMemory.CreateCompatibleDC(pDC);
                      
                          CBitmap cBmp;
                          cBmp.CreateCompatibleBitmap( pDC, nThumbnailWide,nThumbnailHigh );
                          CBitmap* pOldBitmap = dcMemory.SelectObject( &cBmp );
                      
                          //------ copy image from the browser window to the memory DC
                          CDC* pBrowserDC= m_ctlBrowser.GetDC();
                          dcMemory.BitBlt(
                              0,0,                           // dest x,y
                              nThumbnailWide,nThumbnailHigh, 
                              pBrowserDC,
                              nEdgeWide,nEdgeWide,  // src x,y skips frame
                              SRCCOPY
                          );
                          dcMemory.SelectObject( pOldBitmap ); // standard cleanup
                      	
                          //-------------- output the thumbnail image to a file
                          //-------------- options are .JPG, .BMP and .PNG
                          CImage cImg;
                          cImg.Attach(cBmp);            
                          cImg.Save( L"c:\\temp\\temp.jpg", Gdiplus::ImageFormatJPEG );
                          // cImg.Save( L"c:\\temp\\temp.bmp"  );
                          // cImg.Save( L"c:\\temp\\temp.png", Gdiplus::ImageFormatPNG );
                      }
                      //------------- utility fn for waiting for the browser
                      void DelayMs( int nMs )
                      {
                          DWORD nMaxTick= GetTickCount()+ nMs;
                               while ( GetTickCount() < nMaxTick ) {
                                  MSG msg;
                                  while ( ( GetTickCount() < nMaxTick ) 
                                          && (::PeekMessage(&msg, NULL, 0, 0, PM_NOREMOVE) ) 
                                      ) {
                                      AfxGetApp()->PumpMessage();  // does a ::GetMessage()
                                  }
                              Sleep(1);
                          } 
                      }

Select all Open in new window

There are a few items that need some explanation:
 

In my production code, I included logic to read a series of URL records from a database and store the thumbnail images in that database, for output by the web server.  That's all just straight-forward database programming, so I've left it out of this little sample program.  =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
If you liked this article and want to see more from this author,  please click the Yes button near the:
      Was this article helpful?
label that is just below and to the right of this text.   Thanks!
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=