前言

因为在做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>24位RGB转16位RGB</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 = "#";}// 裁剪RGBvar 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前补0document.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>24位RGB:</span><input type="text" id="in" placeholder="请输入如：'#000000' 或 'FFFFFF'"/></div><div><span>16位RGB:</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颜色相关推荐

【图片】Python对RGB颜色与16进制颜色进行互转
RGB颜色被称为"真彩色",是Photoshop中默认使用的颜色,也是最常用的一种颜色模式.RGB模式的图像由3个颜色通道组成,分别为红色通道(Red).绿色通道(Green)和蓝 ...
GX3001Q ui 8位色升级为16位色相关说明
GX3001Q ui 8位色升级为16位色相关说明3001Q ui主要目前主要有2种类别,一种是16位色方案,一种是8位色方案,均使用bmp格式图片.8位色指的是UI系统使用的bmp是8位色的.16 ...
8位字节数转16位字节数_位与字节比较
8位字节数转16位字节数 Bit is the most basic storage unit of the computer systems where Byte is a basic storag ...
C#中Guid.ToString (String)五种格式,以及将32位的GUID转为16位及其他格式
注意:本内容来自:C#中Guid.ToString Method (String)五种格式,以及将将32位的GUID转为16位及其他格式一.生成各种格式的32位GUID System.Guid.N ...
创世贴|怎么在64或32位系统中运行16位程序《大富翁》
创世贴|怎么在64或32位系统中运行16位程序<大富翁> 绪言大家好!纵观游戏行业的发展,可谓是进步迅猛.百花齐放.游戏是每个人在学习.工作之余休闲娱乐的良药.玩游戏的人从皇宫贵族到社会 ...
24位真彩色图像转换为16位高彩色图像的实现方法及效果改进
本篇博文来自博主Imageshop,打赏或想要查阅更多内容可以移步至Imageshop. 转载自:https://www.cnblogs.com/Imageshop/p/3453569.html ...
node 16位转24位_C代码实现16位和32位数据字节序转换
点击上方公众号名称关注,获得更多内容 ✎ 编者悟语每天给自己一个存在的意识,这样才会有一颗认真的心. 文章导读今天给大家用C代码实现下大小端字节序的转换代码,感谢的小伙伴可以拿下来撸一 ...
RGB颜色转换为16进制颜色
RGB颜色值转换为16进制颜色值,主要是将 R.G.B 值分别转换为对应的十六进制值例子: 输入:rgb(238, 208, 157) 输出:#eed09d 代码如下: function color ...
java读取16位深png_读取16位灰度TIFF
我正在尝试使用小型C程序读取16位灰度TIFF文件(BitsPerSample = 16),以转换为浮点数数组以供进一步分析 . 根据 Headers 信息,像素数据在2048×2048像素的单个条带 ...
将32位浮点音频转换为16位
(注:只改变量化位数,并不改变采样率和声道数等信息) 弄了一个下午加一个早上,终于算是弄完了,效果非常不错,音质无损失,之前一直用ffmpeg做重采样处理,但是一直是各种艰辛,各种奔溃,很无语,最后 ...

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

前言

在线测试

效果图

源码

前端JS 实现将24位RGB颜色转换16位RGB颜色相关推荐

最新文章

热门文章