I'm trying to create an algorithm to overlay an image with transparencies on top of fully opaque image. On the next sample I have a back fully opaque image, and front image which is a blue frame with diffuse edges. The problem I'm having is that my implementation overlays incorrectly the semi-transparent areas producing darkish pixels.
Here is my implementation:
#define OPAQUE 0xFF
#define TRANSPARENT 0
#define ALPHA(argb) (uint8_t)(argb >> 24)
#define RED(argb) (uint8_t)(argb >> 16)
#define GREEN(argb) (uint8_t)(argb >> 8)
#define BLUE(argb) (uint8_t)(argb)
#define ARGB(a, r, g, b) (a << 24) | ((r & 0xff) << 16) | ((g & 0xff) << 8) | (b & 0xff)
#define BLEND(a, b, alpha) ((a * alpha) + (b * (255 - alpha))) / 255
void ImageUtil::overlay(const uint32_t* front, uint32_t* back, const unsigned int width, const unsigned int height)
{
const size_t totalPixels = width * height;
for (unsigned long index = 0; index < totalPixels; index++)
{
const uint32_t alpha = ALPHA(*front);
const uint32_t R = BLEND(RED(*front), RED(*back), alpha);
const uint32_t G = BLEND(GREEN(*front), GREEN(*back), alpha);
const uint32_t B = BLEND(BLUE(*front), BLUE(*back), alpha);
*backPixels++ = ARGB(OPAQUE, R , G, B);
*frontPixels++;
}
}
UPDATE:
Test Images files
Following the tips from the comments by gman and interjay, I've investigated further and yes the data is being loaded with pre-multiplied alpha. This produces the darkening when blending. The solution has been to un-multiply the front pixels, and finally I've got the expected result.
Unmultiply formula:
Final code: