使用NanoSVG将SVG转HBITMAP时颜色异常问题求助

问题核心是通道顺序不匹配：NanoSVG渲染输出的像素采用RGBA（红-绿-蓝-透明）通道顺序，但Windows 32位DIBSection默认使用BGRA（蓝-绿-红-透明）顺序，直接渲染会导致红、蓝通道颠倒，颜色失真。

下面提供两种可行的修复方案：

方案一：渲染后转换通道顺序 #

在NanoSVG完成渲染后，遍历每个像素，手动交换R和B通道的值：

// 渲染完成后添加这段代码
unsigned char* pixels = static_cast<unsigned char*>(bits);
int pixelCount = static_cast<int>(image->width * image->height);
for (int i = 0; i < pixelCount; ++i) {
    // 交换R和B通道
    std::swap(pixels[i*4], pixels[i*4+2]);
}

方案二：修改BITMAPINFO指定RGBA掩码 #

通过BI_BITFIELDS掩码告诉Windows我们使用RGBA格式，无需转换通道：

修改BITMAPINFO的初始化代码如下：

BITMAPINFO bmpinfo = { 0 };
bmpinfo.bmiHeader.biSize = sizeof(bmpinfo.bmiHeader);
bmpinfo.bmiHeader.biWidth = static_cast<LONG>(image->width);
bmpinfo.bmiHeader.biHeight = -static_cast<LONG>(image->height);
bmpinfo.bmiHeader.biPlanes = 1;
bmpinfo.bmiHeader.biBitCount = 32;
// 替换BI_RGB为BI_BITFIELDS
bmpinfo.bmiHeader.biCompression = BI_BITFIELDS;

// 设置RGBA掩码：R(0xFF000000), G(0x00FF0000), B(0x0000FF00), A(0x000000FF)
bmpinfo.bmiColors[0].rgbRed = 0xFF;
bmpinfo.bmiColors[0].rgbGreen = 0x00;
bmpinfo.bmiColors[0].rgbBlue = 0x00;
bmpinfo.bmiColors[0].rgbReserved = 0x00;

bmpinfo.bmiColors[1].rgbRed = 0x00;
bmpinfo.bmiColors[1].rgbGreen = 0xFF;
bmpinfo.bmiColors[1].rgbBlue = 0x00;
bmpinfo.bmiColors[1].rgbReserved = 0x00;

bmpinfo.bmiColors[2].rgbRed = 0x00;
bmpinfo.bmiColors[2].rgbGreen = 0x00;
bmpinfo.bmiColors[2].rgbBlue = 0xFF;
bmpinfo.bmiColors[2].rgbReserved = 0x00;

void* bits = nullptr;   
HBITMAP hbitmap = CreateDIBSection(NULL, &bmpinfo, DIB_RGB_COLORS, &bits, nullptr, 0);

之后再调用nsvgRasterize渲染即可，颜色会与原SVG一致。

内容的提问来源于stack exchange，提问作者latosvarun