将颜色通道字节打包为有符号整数，并正确显示为十六进制

问题描述

我正在尝试将颜色通道字节打包为一个带符号的整数，但是由于该整数是带符号的，因此将无法正确显示为十六进制。有没有一种简单的方法可以在JavaScript中执行此操作。不幸的是，我不能声明一个无符号整数。

#-FFFF01或-16776961

应导致：

#FF0000FF或4278190335

[
  [ 'rgba(255,1.0)' ],[ 'rgb(34,12,64)' ],64,0.6)' ],[ 'rgba(34,[ 'rgb(34 12 64 / 0.6)' ],[ 'rgba(34 12 64 / 0.3)' ],[ 'rgb(34.0 12 64 / 60%)' ],[ 'rgba(34.6 12 64 / 30%)' ],[  34,0.3 ]
].forEach(analyze);

/*
 * @param {int|String} r [0,255] or rgba?()
 * @param {int} g [0,255]
 * @param {int} b [0,255]
 * @param {Number} a [0,1]
 */
function rgba2int(r,g,b,a) {
  if (typeof r === 'string' && arguments.length === 1) {
    const [r1,g1,b1,a1] = r
      .match(/^rgba?\((\d+\.?\d*)[,\s]*(\d+\.?\d*)[,\s\/]*(.+)?\)$/)
      .slice(1);    
    [r,b] = [r1,b1].map(v => parseFloat(v));
    a = a1
      ? a1.endsWith('%')
        ? parseInt(a1.substring(0,a1.length - 1),10) / 100
        : parseFloat(a1)
      : null;
  }
  return a
    ? ((r & 0xFF) << 24) + ((g & 0xFF) << 16) + ((b & 0xFF) << 8) + (Math.floor(a * 0xFF) & 0xFF)
    : ((r & 0xFF) << 16) + ((g & 0xFF) << 8) + (b & 0xFF);
}

function analyze(input) {
  const res = rgba2int(...input);
  console.log([
    input.join(' ').padEnd(24,' '),res.toString(10).padStart(10,('#' + res.toString(16)).padStart(11,' ')
  ].join(''));
}

.example { display: inline-block; width: 32px; height: 32px; }
.example-1 { background: rgba(255,1.0); }
.example-2 { background: rgb(34,64); }
.example-3 { background: rgb(34,0.6); }
.example-4 { background: rgba(34,0.6); }
.example-5 { background: rgb(34 12 64 / 0.6); }
.example-6 { background: rgba(34 12 64 / 0.3); }
.example-7 { background: rgb(34.0 12 64 / 60%); }
.example-8 { background: rgba(34.6 12 64 / 30%); }

<!-- https://developer.mozilla.org/en-US/docs/Web/CSS/color#Syntax -->
<div class="example example-1"></div>
<div class="example example-2"></div>
<div class="example example-3"></div>
<div class="example example-4"></div>
<div class="example example-5"></div>
<div class="example example-6"></div>
<div class="example example-7"></div>
<div class="example example-8"></div>

解决方法

  return a
    ? (((r & 0xFF) << 24) + ((g & 0xFF) << 16) + ((b & 0xFF) << 8) + (Math.floor(a * 0xFF) & 0xFF)) >>> 0
    : (((r & 0xFF) << 16) + ((g & 0xFF) << 8) + (b & 0xFF)) >>> 0;