前端JS 实现将24位RGB颜色转换16位RGB颜色

Posted Love丶伊卡洛斯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端JS 实现将24位RGB颜色转换16位RGB颜色相关的知识,希望对你有一定的参考价值。

前言

因为在做LCD设置颜色的时候,我的TFTLCD屏只支持16位RGB,但是web获取的颜色是24位RGB甚至还有透明度,先忽略透明度,那么就需要一个转换工具,没找到,就自己写了个。
原理参考:如何将24位RGB颜色转换16位RGB颜色
0xFF0000 转为 0xF800
核心就是 11111111 00000000 00000000
8位R值右移3位,变为了5位:11111
8位G值右移2位,变成了6位:000000
8位B值右移3位,变成了5位:00000
最后拼接回去 1111 1000 0000 0000
OK,那么直接上效果和代码

在线测试

码云pages

效果图

源码

index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>24RGB16RGB</title>
<style>
	body 
		text-align: center;
		padding: 10%;
		font-size: 28px;
	

	input 
		width: 30%;
		height: 28px;
		margin: 10px;
		font-size: 28px;
	

	button 
		font-size: 28px;
		width: 50%;
		margin: 20px;
	
</style>
<script>
	function rgb_24_to_16() 
		var in24 = document.getElementById("in").value;
		var str = "";

		// 正则校验
		var pattern = /#?[a-zA-Z0-9]6/;
		if(!pattern.test(in24) || in24.length > 7) 
			alert("输入长度不为6或7,请输入如:'#000000' 或 'FFFFFF'");
			return;
		

		if(in24.length == 7) 
			// 裁掉#
			in24 = in24.substr(1, 6);
			str = "#";
		

		// 裁剪RGB
		var r = in24.substr(0, 2);
		var g = in24.substr(2, 2);
		var b = in24.substr(4, 2);
		console.log("裁剪后16进制 r:" + r + " g:" + g + " b:" + b);

		// 16进制转10进制
		r = parseInt(r, 16);
		g = parseInt(g, 16);
		b = parseInt(b, 16);
		console.log("转10进制 r:" + r + " g:" + g + " b:" + b);

		// 移位
		r = r >> 3;
		g = g >> 2;
		b = b >> 3;
		console.log("第一次移位后 r:" + r + " g:" + g + " b:" + b);

		// 恢复高位 相加
		r = r << 11;
		g = g << 5;
		console.log("第二次移位后 r:" + r + " g:" + g + " b:" + b);
		var rgb = r + g + b;
		console.log("十进制rgb:" + rgb);

		// 十进制转十六进制
		rgb = rgb.toString(16);
		console.log("十六进制rgb:" + rgb);

		// 结果回显 rgb前补0
		document.getElementById("out").value = str + rgb.padStart(4, '0');
	
</script>
</head>

<body>
	<div>
		<span>原理参考:https://blog.csdn.net/baidu_26678247/article/details/65629447</span>
	</div>
	<div>
		<span>24RGB:</span>
		<input type="text" id="in" placeholder="请输入如:'#000000' 或 'FFFFFF'"/>
	</div>
	<div>
		<span>16RGB:</span>
		<input type="text" id="out" placeholder="结果输出" />
	</div>
	<div>
		<button type="button" onclick="rgb_24_to_16()">转换</button>
	</div>
</body>
</html>

以上是关于前端JS 实现将24位RGB颜色转换16位RGB颜色的主要内容,如果未能解决你的问题,请参考以下文章

前端JS 实现将24位RGB颜色转换16位RGB颜色

如何将24位RGB颜色转换16位RGB颜色

颜色模式中8位,16位,24位,32位色彩是啥意思

计算机RGB颜色系统是否有16M种颜色,每种颜色占用24个字节?

图像位深度 8位 16位 24位 32位区别对比 RGB 真彩色 基本概念:(大小,深度,通道)位深度数据类型转换原理 Mat数据读取(opencv里的imread)

bmp文件格式中rgb555与rgb888之间的转换,24位与16位位图的转换