JavaScript位移问题（RGB和RGBA转换为十六进制）

Question

我找到了一个RGB转十六进制的转换器，现在我正在尝试制作一个RGBA转十六进制的转换器。原始的rgb2hex函数可以正常工作，但是新的rgba2hex函数却不能正常工作。我做错了什么？rgba函数返回的是gba，没有r。

// convert RGB color data to hex
function rgb2hex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}

// convert RGBA color data to hex
function rgba2hex(r, g, b, a) {
    if (r > 255 || g > 255 || b > 255 || a > 255)
        throw "Invalid color component";
    return ((r << 32) | (g << 16) | (b << 8) | a).toString(16);
}

例子：

alert(rgb2hex(255, 155, 055));
alert(rgba2hex(255, 155, 055, 255));

当前输出：ff9b2d 和 9b2dff

期望输出：ff9b2d 和 ff9b2dff

- Justin808

Answer 1

您的问题在于JavaScript中的位运算在31位时达到上限，所以您不能完全按照原样执行此操作。 您需要使用普通的数学运算符，而不是位运算符：

// convert RGBA color data to hex
function rgba2hex(r, g, b, a) {
    if (r > 255 || g > 255 || b > 255 || a > 255)
        throw "Invalid color component";
    return (256 + r).toString(16).substr(1) +((1 << 24) + (g << 16) | (b << 8) | a).toString(16).substr(1);
}

原本算法存在的问题已经修复，修复后即使第一个组件小于10，输出的数字也能够正确显示。

不过话说回来，这个颜色代码 #ff9b2dff 并不是有效的颜色代码，但是你可能并不在意呢？

- user578895

Answer 2

RGB转HEX

 rgb(0 255 94)
 rgb(0, 255, 94)

RGBA 转 HEX

 rgba(255,25,2,0.5)
 rgba(255 25 2 / 0.5)
 rgba(50%,30%,10%,0.5)
 rgba(50%,30%,10%,50%)
 rgba(50% 30% 10% / 0.5)
 rgba(50% 30% 10% / 50%)

演示 - CODEPEN.IO

- Pedro404