给定RGB值计算色谱上相应的坐标

原创 2017年03月17日 08:53:00
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Color Picker</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

var configColorArea = {
    minX: 1,
    maxX: 209,
    minY: 1,
    maxY: 119
};


function changeRGB(R,G,B){
	var k = parseInt(R),
	j = parseInt(G),
	h = parseInt(B),
	i;
	if (isNaN(k) || k > 255 || k < 0) {
		R = 255
	} 
	if (isNaN(j) || j > 255 || j < 0) {
		G = 255
	} 
	if (isNaN(h) || h > 255 || h < 0) {
		B = 255
	} 
	i = rgb2hsl(R / 255, G / 255, B / 255);
	var hue = Math.round(i.h);
	var sat = Math.round(i.s * 100);
	var lum = Math.round(i.l * 100);
	refreshCoordinatesByHSL(hue, sat, lum);
}


function rgb2hsl(j, i, d){
	var h, f, c;
	var a = Math.max(j, i, d),
	e = Math.min(j, i, d);
	c = 0.5 * (a + e);
	if (a == e) {
		h = 0
	} else {
		if (a == j) {
			h = 60 * (i - d) / (a - e);
			if (i < d) {
				h += 360
			}
		} else {
			if (a == i) {
				h = 60 * (d - j) / (a - e) + 120
			} else {
				h = 60 * (j - i) / (a - e) + 240
			}
		}
	}
	if (c == 0 || a == e) {
		f = 0
	} else {
		if (c <= 0.5) {
			f = 0.5 * (a - e) / c
		} else {
			f = 0.5 * (a - e) / (1 - c)
		}
	}
	return {
		h: h,
		s: f,
		l: c
	}
}


function refreshCoordinatesByHSL(f, e, b){
    a = Math.round((configColorArea.maxX - configColorArea.minX) * f / 359) + configColorArea.minX;
    d = Math.round((configColorArea.maxY - configColorArea.minY) * (100 - b) / 100) + configColorArea.minY;
    c = Math.round((configColorArea.maxY - configColorArea.minY) * (100 - e) / 100) + configColorArea.minY;
    setColorAreaXY(a, d);
}


function setColorAreaXY(a, c){

    var b = configColorArea;
    a = parseInt(a);
    var x=0;
    var y=0;
    if (b.minX > a) {
        x = b.minX
    } else {
        if (a > b.maxX) {
            x = b.maxX
        } else {
            if (!isNaN(a)) {
                x = a
            }
        }
    }
    c = parseInt(c);
    if (b.minY > c) {
        y = b.minY
    } else {
        if (c > b.maxY) {
            y = b.maxY
        } else {
            if (!isNaN(c)) {
                y = c
            }
        }
    }
    refreshPosition(x,y)
}


function refreshPosition(x,y){

//定义一个点的css样式
var innerHTML="<div style='position: absolute; top: "+y+"px; left: "+x+"px; height: 20px; width: 20px;'><div style='position: absolute; width: 4px; height: 20px; left: 8px; top: 0px; background: rgb(255, 255, 255);'></div><div style='position: absolute; height: 4px; width: 20px; top: 8px; left: 0px; background: rgb(255, 255, 255);'></div><div style='position: absolute; height: 18px; width: 2px; left: 9px; top: 1px; background: rgb(76, 76, 76);'></div><div style='position: absolute; width: 18px; height: 2px; top: 9px; left: 1px; background: rgb(76, 76, 76);'></div></div>";

$("#positions").append(innerHTML);

}

$(function(){
/*changeRGB(0, 0, 0);
changeRGB(255, 255, 255);
changeRGB(228, 185, 170);
changeRGB(228, 170, 187);*/
})

</script>
</head>
<body>
	<div id="positions" style="top: 118px;left: 200px;position: absolute;width: 210px;height: 120px;">
		<div style="position: absolute;width: 210px;height: 120px;background-image: url('shiseqi.png');background-repeat: no-repeat;cursor: pointer;float: left;">
		</din>
	</div>
</body>
</html>




版权声明:本文为博主原创文章,未经博主允许不得转载。

OpenCV中取ROI区域RGB的均值,求方差,ROI区域颜色是否明显区分

#include #include #include #include #include #define REC_W_H 30 using namespace std; i...
  • teleger
  • teleger
  • 2016年07月19日 20:07
  • 2779

kinect 2.0 SDK学习笔记(四)--深度图与彩色图对齐

深度图与彩色图对齐如果用kinect SDK的话只需要一个函数就好了:MapDepthFrameToColorSpace(512 * 424, depthData, 512 * 424, m_pCol...
  • jiaojialulu
  • jiaojialulu
  • 2016年11月14日 00:28
  • 8011

RGB HSV 颜色空间 颜色距离 颜色相似度

RGB与HSV的转换 颜色相近颜色距离的概念 具体计算公式以及示例代码RGB与HSV的转换具体转换实现参考百度HSV基本概念。 各种语言的颜色API应该都提供有相关函数,直接把color转换成HSV...
  • hai29785
  • hai29785
  • 2017年02月17日 23:11
  • 2068

读取图片上任意点rgb值需输入xy坐标

  • 2014年05月07日 19:50
  • 1KB
  • 下载

色谱大全-RGB-CMYK-HEX

  • 2009年10月08日 07:57
  • 649KB
  • 下载

RGB颜色对照表,相应代码

  • 2010年07月21日 18:21
  • 67KB
  • 下载

利用最小堆编程实现给定权值集合下构造相应霍夫曼树的算法

  • 2016年12月18日 13:20
  • 38KB
  • 下载

JS方式获取数据库坐标数据并动态显示到页面上,外加安卓端GPS数据上传相应的后台代码

  • 2014年12月12日 09:26
  • 13.43MB
  • 下载

VB.net返回坐标上的RGB

  • 2013年08月01日 19:14
  • 619B
  • 下载

电子色谱 颜色选责 色彩值

  • 2013年03月31日 14:26
  • 274KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:给定RGB值计算色谱上相应的坐标
举报原因:
原因补充:

(最多只允许输入30个字)