English 中文(简体)
Convert RGBA color to RGB
原标题:

How to convert a RGBA color tuple, example (96, 96, 96, 202), to corresponding RGB color tuple?

Edit:

What I want is to get a RGB value which is most similar to the RGBA tuple visually on white background.

最佳回答

I ve upvoted Johannes answer because he s right about that.

* A few comments have been raised that my original answer was not correct. It worked if alpha values were inverted from the normal. By definition, however, this won t work in most cases. I ve therefore updated the formula below to be correct for the normal case. This ends up being equal to @hkurabko s answer below *

A more specific answer, however, incorporates the alpha value into the actual colour result based on an opaque background colour (or matte as it s referred to).

There is an algorithm for this (from this wikipedia link):

  • Normalise the RGBA values so that they re all between 0 and 1 - just divide each value by 255 to do this. We ll call the result Source.
  • Normalise also the matte colour (black, white whatever). We ll call the result BGColor Note - if the background colour is also transparent, then you ll have to recurse the process for that first (again, choosing a matte) to get the source RGB for this operation.
  • Now, the conversion is defined as (in complete psuedo code here!):

    Source => Target = (BGColor + Source) =
    Target.R = ((1 - Source.A) * BGColor.R) + (Source.A * Source.R)
    Target.G = ((1 - Source.A) * BGColor.G) + (Source.A * Source.G)
    Target.B = ((1 - Source.A) * BGColor.B) + (Source.A * Source.B)
    

To get the final 0-255 values for Target you simply multiply all the normalised values back up by 255, making sure you cap at 255 if any of the combined values exceed 1.0 (this is over-exposure and there are more complex algorithms dealing with this that involve whole-image processing etc.).

EDIT: In your question you said you want a white background - in that case just fix BGColor to 255,255,255.

问题回答

hm... regarding to

http://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending

solution provided by Andras Zoltan should be slightly changed to:

Source => Target = (BGColor + Source) =
Target.R = ((1 - Source.A) * BGColor.R) + (Source.A * Source.R)
Target.G = ((1 - Source.A) * BGColor.G) + (Source.A * Source.G)
Target.B = ((1 - Source.A) * BGColor.B) + (Source.A * Source.B)

This changed version works fine for me, because in prev. version rgba(0,0,0,0) with matte rgb(ff,ff,ff) will be changed to rgb(0,0,0).

In my case, I wanted to convert an RGBA image to RGB and the following worked just as expected:

rgbImage = cv2.cvtColor(npimage, cv2.COLOR_RGBA2RGB)

This depends on the color space you use. If the RGBA is in pre-multiplied color-space and is semi-transparent, you need to divide out alpha to get the correct RGB color. If the color is in non pre-multiplied color-space, then you can just discard the alpha channel.

Here is some java code (works on Android API 24):

        //int rgb_background = Color.parseColor("#ffffff"); //white background
        //int rgba_color = Color.parseColor("#8a000000"); //textViewColor 

        int defaultTextViewColor = textView.getTextColors().getDefaultColor();

        int argb = defaultTextViewColor;
        int alpha = 0xFF & (argb >> 24);
        int red = 0xFF & (argb >> 16);
        int green = 0xFF & (argb >> 8);
        int blue = 0xFF & (argb >> 0);
        float alphaFloat = (float)alpha / 255;

        String colorStr = rgbaToRGB(255, 255, 255, red, green, blue, alphaFloat);

function:

protected String rgbaToRGB(int rgb_background_red, int rgb_background_green, int rgb_background_blue,
                        int rgba_color_red, int rgba_color_green, int rgba_color_blue, float alpha) {

    float red = (1 - alpha) * rgb_background_red + alpha * rgba_color_red;
    float green = (1 - alpha) * rgb_background_green + alpha * rgba_color_green;
    float blue = (1 - alpha) * rgb_background_blue + alpha * rgba_color_blue;

    String redStr = Integer.toHexString((int) red);
    String greenStr = Integer.toHexString((int) green);
    String blueStr = Integer.toHexString((int) blue);

    String colorHex = "#" + redStr + greenStr + blueStr;

    //return Color.parseColor(colorHex);
    return colorHex;
}

Python function in accordance with hkurabko s answer.

def rgba2rgb(rgba: tuple[int, int, int, float], background: tuple[int, int, int] = (255, 255, 255)):
    return (
        round(((1 - rgba[3]) * background[0]) + (rgba[3] * rgba[0])),
        round(((1 - rgba[3]) * background[1]) + (rgba[3] * rgba[1])),
        round(((1 - rgba[3]) * background[2]) + (rgba[3] * rgba[2])),
    )

Here is a convenient SASS function in accordance with Andras and hkurabko s answers.

@function rgba_blend($fore, $back) {
  $ored: ((1 - alpha($fore)) * red($back) ) + (alpha($fore) * red($fore));
  $ogreen: ((1 - alpha($fore)) * green($back) ) + (alpha($fore) * green($fore));
  $oblue: ((1 - alpha($fore)) * blue($back) ) + (alpha($fore) * blue($fore));
  @return rgb($ored, $ogreen, $oblue);
}

Usage:

$my_color: rgba(red, 0.5); // build a color with alpha for below

#a_div {
  background-color: rgba_blend($my_color, white);
}

Typescript function in accordance with hkurabko s answer.

type RgbType = { red: number; green: number; blue: number; };
type RgbaType = { alpha: number; } & RgbType;

export const blendAlphaToBackground = (
  rgba: RgbaType,
  background: RgbaType = {red: 255, green: 255, blue: 255, alpha: 1},
): RgbaType => {
  const red = Math.round((1 - rgba.alpha) * background.red + rgba.alpha * rgba.red);
  const green = Math.round((1 - rgba.alpha) * background.green + rgba.alpha * rgba.green);
  const blue = Math.round((1 - rgba.alpha) * background.blue + rgba.alpha * rgba.blue);

  return {red, green, blue, alpha: 1};
};

In my case I wanted to make the RGB image look as if it was an RGBA image on a white background. As typical converting methods just remove the A channel, this can result in pixels in the RGB channels to become visible that were previously made transparent by the alpha channel.

The following worked for me:

import numpy as np

def convert_RGBA_to_RGB(input_image): 
    # Takes an RGBA image as input
    
    # Based on the following chat with user Andras Deak
    ## https://chat.stackoverflow.com/transcript/message/55060299#55060299
   
    input_image_normed = input_image / 255  # shape (nx, ny, 4), dtype float
    alpha = input_image_normed[..., -1:]  # shape (nx, ny, 1) for broadcasting
    input_image_normed_rgb = input_image_normed[..., :-1]  # shape (nx, ny, 3)
    #bg_normed = np.zeros_like(red_normed_rgb)  # shape (nx, ny, 3) <-- black background
    bg_normed = np.ones_like(input_image_normed_rgb)  # shape (nx, ny, 3) <-- white background
    composite_normed = (1 - alpha) * bg_normed + alpha * input_image_normed_rgb
    composite = (composite_normed * 255).round().astype(np.uint8)
    return composite




相关问题
Using QCView and iSight to capture image

I have a QCView that loads a Quartz file which gives you iSights feedback (basically like a QTCaptureView) Everything displays fine The button simply takes a snapshot using the following simple ...

Taking picture with QTCaptureView

Is it possible to simply take a picture and save it somewhere using a QTCaptureView and Apple s built-in iSight? I ve seen lots of tutorials on recording video but none on simply taking a picture. Any ...

Transform rectangular image into trapezoid

In .NET how can I transform an image into a trapezoid. The Matrix class supports rotation, shear, etc, but I can t see a trapezoidal transformation. I m using the usual System.Drawing.* API, but I m ...

Rotate image through Y-axis on web page

What are my options for rotating an image on a web page through the Y-axis? I m not sure if I even have the terminology right. Is this called a rotate or a transform. Most of the searches that I ve ...

Text as watermarking in PHP

I want to create text as a watermark for an image. the water mark should have the following properties front: Impact color: white opacity: 31% Font style: regular, bold Bevel and Emboss size: 30 ...

Editing a xaml icons or images

Is it possible to edit a xaml icons or images in the expression design or using other tools? Is it possible to import a xaml images (that e.g you have exported) in the expression designer for editing?...

Convert from 32-BPP to 8-BPP Indexed (C#)

I need to take a full color JPG Image and remap it s colors to a Indexed palette. The palette will consist of specific colors populated from a database. I need to map each color of the image to it s "...

热门标签