title: Scaling bitmap output distorts image
body: <p>I have a 2752x2200 bitmap image.  I can only display 1/3 of it on my MFC dialog box (for obvious size issues), so if I don't scale the image I only get the top-left 917x733 block (the top-left 1/3 block). I want to zoom the image out by a factor of 3 so that the whole image is dislayed in an area the size of 1/3 of the image.  I have set up the grayscale bitmap like so:</p>
  
  <pre><code>    //////////////////////////////////////////////////////////////////////////
      //////////  Setup Bitmap  ////////////////////////////////////////////////
      //////////////////////////////////////////////////////////////////////////
  
      //// FILEHEADER ////
      BITMAPFILEHEADER* bf = new BITMAPFILEHEADER;
      bf-&gt;bfType = 0x4d42;
      bf-&gt;bfSize = 6054400 + 54 + sizeof(BITMAPINFO);
      bf-&gt;bfOffBits = 54;
  
      //// INFOHEADER ////
      BITMAPINFOHEADER* bi = new BITMAPINFOHEADER;
      bi-&gt;biSize = 40;
      bi-&gt;biWidth = 2752;
      bi-&gt;biHeight = -2200;
      bi-&gt;biPlanes = 1;
      bi-&gt;biBitCount = 8;
      bi-&gt;biCompression = 0;
      //bi-&gt;biSizeImage = 6054400; //not required
      bi-&gt;biXPelsPerMeter = 2835;
      bi-&gt;biYPelsPerMeter = 2835;
      bi-&gt;biClrUsed = 0;
      bi-&gt;biClrImportant = 0;
  
      //// INFO ////
      BITMAPINFO* pbmi = (BITMAPINFO*)alloca( sizeof(BITMAPINFOHEADER) +   
          sizeof(RGBQUAD)*256);
      pbmi-&gt;bmiHeader.biSize = sizeof (pbmi-&gt;bmiHeader);
      pbmi-&gt;bmiHeader.biWidth = 2752;
      pbmi-&gt;bmiHeader.biHeight = -2200;
      pbmi-&gt;bmiHeader.biPlanes = 1;
      pbmi-&gt;bmiHeader.biBitCount = 8;
      pbmi-&gt;bmiHeader.biCompression = BI_RGB;
      pbmi-&gt;bmiHeader.biSizeImage = 0;
      pbmi-&gt;bmiHeader.biXPelsPerMeter = 14173;
      pbmi-&gt;bmiHeader.biYPelsPerMeter = 14173;
      pbmi-&gt;bmiHeader.biClrUsed = 0;
      pbmi-&gt;bmiHeader.biClrImportant = 0;
      //create grayscale color palette
      for(int i=0; i&lt;256; i++)
      {
          pbmi-&gt;bmiColors[i].rgbRed = i;
          pbmi-&gt;bmiColors[i].rgbGreen = i;
          pbmi-&gt;bmiColors[i].rgbBlue = i;
          pbmi-&gt;bmiColors[i].rgbReserved = 0;
      }
  
      //// IMAGE DATA ////
      pFrame-&gt;GetImage(m_imageData);
  
      //////////////////////////////////////////////////////////////////////
      ////// Create image that's printed to dialog box /////////////////////
      //////////////////////////////////////////////////////////////////////
      HDC hdc = ::GetDC(NULL);  
      hbit = CreateDIBitmap(hdc, bi, CBM_INIT, m_imageData,
         pbmi, DIB_RGB_COLORS);
  </code></pre>
  
  <p>And then I'm drawing the bitmap onto my dialog box like this:</p>
  
  <pre><code>    BITMAP* bi = new BITMAP;
      CBitmap bmp;
      bmp.Attach(hbit);
      CClientDC dc(pWnd);
      CDC bmDC;
      bmDC.CreateCompatibleDC(&amp;dc);
      CBitmap *pOldbmp = bmDC.SelectObject(&amp;bmp);
      bmp.GetBitmap(bi);
      dc.StretchBlt(384,21,bi-&gt;bmWidth,bi-&gt;bmHeight,&amp;bmDC,0,0,
          bi-&gt;bmWidth,bi-&gt;bmHeight,SRCCOPY);
      bmDC.SelectObject(pOldbmp);
  </code></pre>
  
  <p>The image looks fine with this code, but it's only the top left block of the full image:</p>
  
  <p><img src="https://i.imgur.com/vQxkPrI.png" alt="image1"></p>
  
  <p>In my attempt to scale the image down, I changed the line:</p>
  
  <pre><code>        dc.StretchBlt(384,21,bi-&gt;bmWidth,bi-&gt;bmHeight,&amp;bmDC,0,0,
              bi-&gt;bmWidth,bi-&gt;bmHeight,SRCCOPY);
  </code></pre>
  
  <p>to:</p>
  
  <pre><code>        dc.StretchBlt(384,21,bi-&gt;bmWidth/3,bi-&gt;bmHeight/3,&amp;bmDC,0,0,
              bi-&gt;bmWidth,bi-&gt;bmHeight,SRCCOPY); // 1/3 original size
  </code></pre>
  
  <p>Now my output looks zoomed out and it's showing the whole image(good), but everything looks distorted (bad):</p>
  
  <p><img src="https://i.imgur.com/Kc8r9dI.png" alt="image2"></p>
  
  <p>(Note the circular rings around the border of the image.  Those shouldn't be there and when you actually see the live video of my image stream, they pulsate and basically ruin the image).</p>
  
  <p><strong>My question is:</strong> <em>What is causing this distortion and is there something simple I can do to fix it?</em></p>
  
  <p><strong>EDIT:</strong> After trying StretchDIBits():</p>
  
  <pre><code>    StretchDIBits(dc.m_hDC, 384, 21, bi-&gt;bmWidth/3, bi-&gt;bmHeight/3, 0, 
              0,bi-&gt;bmWidth,bi-&gt;bmHeight, myObv-&gt;GetImageData(), 
              myObv-&gt;GetPBMI(), DIB_RGB_COLORS, SRCCOPY);
  </code></pre>
  
  <p>my output looked like this:</p>
  
  <p>i.imgur.com/DA49P8x.png</p>