如何解决将颜色通道字节打包为有符号整数,并正确显示为十六进制
我正在尝试将颜色通道字节打包为一个带符号的整数,但是由于该整数是带符号的,因此将无法正确显示为十六进制。有没有一种简单的方法可以在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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。