考虑到背景将RGBA转换为RGB [重复]答案

【问题标题】：Convert RGBA to RGB taking background into consideration [duplicate]考虑到背景将RGBA转换为RGB [重复]
【发布时间】：2012-07-21 19:56:42
【问题描述】：

可能重复：
Convert RGBA color to RGB

我正在尝试将 alpha

使用this question 提供的算法，我设法正确转换为纯 RGB 颜色 - 但仅当 alpha = 0.5 时。

这是我的测试代码：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <script type="text/javascript">
    // Basic RGB(A) to CSS property value
    function _toString(obj) {
        var type = 'rgb', out = obj.red + ', ' + obj.green + ', ' + obj.blue;

        if (obj.alpha !== undefined) {
            type += 'a';
            out += ', ' + obj.alpha;
        }

        return type + '(' + out + ')';
    }

    // Background color, assume this is always RGB
    var bg = {red: 255, green: 51, blue: 0};
    // RGBA color
    var RGBA = {red: 0, green: 102, blue: 204, alpha: 0};
    // Output RGB
    var RGB = {red: null, green: null, blue: null};
    // Just a cache...
    var alpha;

    while (RGBA.alpha < 1) {
        alpha = 1 - RGBA.alpha;
        RGB.red = Math.round((alpha * (RGBA.red / 255) + ((1 - RGBA.alpha) * (bg.red / 255))) * 255);
        RGB.green = Math.round((alpha * (RGBA.green / 255) + ((1 - RGBA.alpha) * (bg.green / 255))) * 255);
        RGB.blue = Math.round((alpha * (RGBA.blue / 255) + ((1 - RGBA.alpha) * (bg.blue / 255))) * 255);

        document.write('<div style="display: block; width: 150px; height: 100px; background-color: ' + _toString(bg) + '">\
            <div style="color: #fff; width: 50px; height: 50px; background-color: ' + _toString(RGBA) + '"><small>RGBA<br>' + RGBA.alpha + '</small></div>\
            <div style="color: #fff; width: 50px; height: 50px; background-color: ' + _toString(RGB) + '"><small>RGB<br>' + RGBA.alpha + '</small></div>\
        </div>');

        // Increment alpha
        RGBA.alpha += 0.25;
    }
    </script>
</body>
</html>

在 alpha 为 0.5 时，在 Chrome 和 Firefox 中运行上述结果会导致 RGBA->RGB 成功，任何偏离 0.5 的结果都会导致不匹配，如果偏差非常小，则非常微妙（即，当alpha 为 0.55)。

我已经多次重写逻辑，将逻辑完全扩展为最基本的部分，但我未能成功。

【问题讨论】：

标签： javascript rgb rgba

【解决方案1】：

看起来您正在尝试使用通用方法进行混合，但增量循环让我失望。摘自 OpenGL 常见问题解答：

“上述[用于混合] 的典型用法通过其关联的 alpha 值修改传入颜色，并将目标颜色修改为 1 减去传入的 alpha 值。然后将这两种颜色的总和写回帧缓冲区。”

所以不要使用while循环，而是使用：

alpha = 1 - RGBA.alpha;
RGB.red = Math.round((RGBA.alpha * (RGBA.red / 255) + (alpha * (bg.red / 255))) * 255);
RGB.green = Math.round((RGBA.alpha * (RGBA.green / 255) + (alpha * (bg.green / 255))) * 255);
RGB.blue = Math.round((RGBA.alpha * (RGBA.blue / 255) + (alpha * (bg.blue / 255))) * 255);

【讨论】：

完美！将逻辑更改为您自己的逻辑（在背景而不是前景上使用计算的 alpha），我得到了循环确定的不同 alpha 的正确值！太棒了！