将 rgba 颜色转换为十六进制时接收到不正确的 alpha 通道

Question

In order to convert rgba color with alpha channel to hex I use the code

 let rChannel = 255; let gChannel = 255; let bChannel = 255; let aChannel = 0.7; console.log('#'+(256 + parseFloat(rChannel)).toString(16).substr(1) + ((1 << 24) + (parseFloat(gChannel) << 16) | (parseFloat(bChannel) << 8) | aChannel).toString(16).substr(1)); // #ffffff00, but expect #ffffffb3

It's given from the answer by the link https://stackoverflow.com/a/9766195/3208225

But it returns incorrect alpha channel in hex (00 instead of b3).

How to fix?

Answer 1

Using a bitwise | (or) operator on a floating-point value does not make sense. You'll have to use ~~(achannel * 255) to get an integer value.

Depending on the range of your 0... 1 achannel values, you might want to use 256 instead of 255 if the value can never be 1.

edit — now that I think about it, you don't need the ~~ explicit integer conversion, because the | will do that anyway, so simply (achannel * 256) will work so long as the fractional value will always be less than 1; otherwise 255.