在javascript中将rgba颜色值转换为0xFFFFFFFF形式答案

【问题标题】：convert rgba color value to 0xFFFFFFFF form in javascript在javascript中将rgba颜色值转换为0xFFFFFFFF形式
【发布时间】：2019-05-22 04:23:27
【问题描述】：

例如，将rgba(0,0,0,1) 转换为4278190080（0xFF000000 的结果）。

【问题讨论】：

000000 == FF000000 怎么样？
你具体从什么开始？图像数据？字符串rgba(0,0,0,1)?
@MarkMeyer 我每个 r g b 都有一个数值。例如红色为 80，绿色为 130，蓝色为 211，不透明度值将始终为 255

标签： javascript

【解决方案1】：

然后简单地移位或。如果需要，您也可以使用乘法然后相加。

var r = 80;
var g = 130;
var b = 211;
var hex = 0xff000000 | ( r << 16) | ( g << 8) | b;
console.log((hex >>> 0).toString(16));

【讨论】：

您能否进一步详细说明按位运算符如 >> |在这种情况下做什么？我认为这对那些想要实现我想要实现的人有很大帮助
<< 用于将字节移动到所需位置。 | 用于将字节添加到结果中。 >>> 0 只是用于将数字转换为无符号，以便可以以“ff5082d3”而不是“-af7d2d”的形式打印。
一个问题，不应该把每个rgb值转换成16位的形式吗？
@ChanwooPark 告诉我你为什么这么认为，我可以为你澄清为什么你的想法不是这样。简短的回答：没有。
最后一部分（透明度）需要特别注意，看我的回答

【解决方案2】：

我问这个问题是因为例如给定颜色，将颜色 #4286F4 转换为 0xFF4286F4 不会呈现相同的颜色。

对我来说很傻，我认为 0xFFFFFFFF 是按照 Alpha（不透明度）、红色、绿色、蓝色的顺序形成的。但我发现它的顺序代表Alpha，Blue，Green，Red。因此将#4286F4 转换为给定格式将为0xFFF48642。

【讨论】：

【解决方案3】：

    function rgba(red,green,blue,trans){
        let hex='#';
        red=Number(red).toString(16);
        if(red.length<2){ // if one digit need to append 0 infront 
            hex+='0'+red; 
        }
        else{
            hex+=red;
        }

        green=Number(green).toString(16);
        if(green.length<2){
            hex+='0'+green;
        }
        else{
            hex+=green;
        }

        blue=Number(blue).toString(16);
        if(blue.length<2){
            hex+='0'+blue;
        }
        else{
            hex+=blue;
        }

        trans=Number(trans*255).toString(16);
        trans=trans.replace(/\..*/,'');
        if(red.length<2){
            hex+='0'+trans;
        }
        else{
            hex+=trans;
        }
        return hex;
    }

console.log(rgba(0,0,0,1));//#0000000ff
console.log(rgba(255,255,255,.5))//#ffffff7f
console.log(rgba(151,12,55,.89))//#970c37e2

RBGA取红绿蓝透明

所有 RGB 的范围从 0 到 255 但是 transparencey 是 0 到 1 check here in mdn 因为我们需要特别注意，只需 1 转换为 255

我在 chrome 上测试了它的预期效果

【讨论】：