【JavaScript】 RGBAを下地を考慮してRGBに変換する

RGBAで表される色を、下地を考慮してRGBに変換してみます。

RGBAは、赤(R)緑(G)青(B)透明度(A)を意味しています。

赤青緑は、0から255の整数値をとります。

透明度は0から1の小数で、100倍するとパーセントと考えることができます。
ただし、0から255の整数値で表されていることがあります。
この場合は255で割り、小数化します。

透明度0は、完全に透明な状態です。
1は、完全に不透明な状態です。

透明度1は100%という意味なのに、完全に不透明なのは違和感がありますね。
意味合い的には不透明度の方が合っているかもしれませんが、あまり気にしない方がよさそうです。

下地と透明度を考慮して、赤青緑の色値を変換するときは、次の式を使用します。

変換後色値 = 変換前色値 × 透明度 
                     + ( 1 - 透明度 ) × 下地色値

透明度が1なら、下地に0が掛け算され、変換前の色値がそのまま残ります。
0なら、下地がそのまま残ります。

0より大きくて1より小さいときは、その割合に応じて下地と変換前色が合成されます。

次の条件で、RGBAをRGBに変換する関数を作成してみます。

1. 引数はRGBA各値を、配列にしたもの
2. A値は、0から255で表現されている
3. 下地は、白（R255,G255,B255)

const  RGBAtoRGB = ( RGBA_Array ) =>{
    const [r,g,b,a] = RGBA_Array;
    if( a === 0 ) return [255,255,255];
    const opacity = a / 255;
    const cb = Math.round(b * opacity + 255 * ( 1 - opacity));
    const cg = Math.round(g * opacity + 255 * ( 1 - opacity));
    const cr = Math.round(r * opacity + 255 * ( 1 - opacity));
    return  [cr,cg,cb];
};