Javascript 彩色转轮图像RGB值的获取_Javascript_Image_Canvas_Colors

Javascript 彩色转轮图像RGB值的获取

javascript image canvas colors

Javascript 彩色转轮图像RGB值的获取,javascript,image,canvas,colors,Javascript,Image,Canvas,Colors,我试图从点击一个彩色轮子图像中获取RGB值现在，我正在尝试从下面的彩色滚轮图像中获取RGB，而不使用canvas getImageData 没有画布我怎么做使用canvas，您可以跑步 $('#picker').click(function(e) { // mouse move handler // get coordinates of current position var canvasOffset = $(canvas).offset

我试图从点击一个彩色轮子图像中获取RGB值

现在，我正在尝试从下面的彩色滚轮图像中获取RGB，而不使用canvas getImageData

没有画布我怎么做

使用canvas，您可以跑步

$('#picker').click(function(e) { // mouse move handler

            // get coordinates of current position
            var canvasOffset = $(canvas).offset();
            var canvasX = Math.floor(e.pageX - canvasOffset.left);
            var canvasY = Math.floor(e.pageY - canvasOffset.top);

            alert("canvasX " + canvasX + " canvasY " + canvasY);

            // get current pixel
            var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
            var pixel = imageData.data;
            alert(JSON.stringify(pixel));

    });

我不能使用画布，只能使用javascript。有人能告诉我从图像中获取图像数据的最佳方法吗？我需要在顶部构建一个带有for循环的rgb网格，从x和y值计算出所选像素，然后匹配它

真的不知道从哪里开始提供帮助吗？

下面是@Pointy的好主意：

仅使用一个色轮楔子进行演示。您可以展开此起点，以包括色轮中的所有楔块

示例代码和演示：


正文{背景色：象牙；}
#轮子{边框：1px实心红色；}
#结果{宽度：50px；高度：25px；背景色：黑色；边框：1px纯绿色；}
$（函数（）{
变量$wheel=$（“#wheel”）；
var wheelposet=$wheel.offset（）；
var offsetX=车轮偏移量。左侧；
var offsetY=wheelOffset.top；
var-PI=Math.PI；
var-cx=0；
var-cy=0；
//在色轮中定义每种颜色的角度和半径
var颜色=[]；
push（{sAngle:0，eAngle:PI/6，sRadius:0，eRadius:15，color:rgb（255255）}）；
push（{sAngle:0，eAngle:PI/6，sRadius:15，eRadius:32，color:'rgb（253237238）}）；
push（{sAngle:0，eAngle:PI/6，sRadius:32，eRadius:53，color:'rgb（251211212）}）；
push（{sAngle:0，eAngle:PI/6，sRadius:53，eRadius:87，color:rgb（246145149）}）；
push（{sAngle:0，eAngle:PI/6，sRadius:87，eRadius:117，color:'rgb（240,73,80）}）；
push（{sAngle:0，eAngle:PI/6，sRadius:117，eRadius:138，color:'rgb（237,27,36）}）；
$（“#wheel”）.mousedown（函数（e）{handleMouseDown（e）；}）；
//根据保存的每种颜色的角度和半径测试当前鼠标位置
//返回鼠标下任何颜色的颜色索引
函数命中（mx，我的）{
var指数=-1；
对于（变量i=0；ia0&&angler0&&radius=0）{
$（'#results'）.css（'background-color'，colors[colordindex].color）；
}
}
}); // end$（函数（）{}）；
单击以选择颜色：

如果不使用画布，就无法获取图像数据。您可以事先处理图像，并为页面提供图像的等效数字。好的，谢谢。我会设法解决这个问题

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #wheel{border:1px solid red;}
    #results{width:50px;height:25px;background-color:black;border:1px solid green;}
</style>

<script>
$(function(){

    var $wheel=$("#wheel");
    var wheelOffset=$wheel.offset();
    var offsetX=wheelOffset.left;
    var offsetY=wheelOffset.top;

    var PI=Math.PI;
    var cx=0;
    var cy=0;

    // define the angle & radius of each color in the color wheel
    var colors=[];
    colors.push({sAngle:0,eAngle:PI/6,sRadius:0,eRadius:15,color:'rgb(255,255,255)'});
    colors.push({sAngle:0,eAngle:PI/6,sRadius:15,eRadius:32,color:'rgb(253,237,238)'});
    colors.push({sAngle:0,eAngle:PI/6,sRadius:32,eRadius:53,color:'rgb(251,211,212)'});
    colors.push({sAngle:0,eAngle:PI/6,sRadius:53,eRadius:87,color:'rgb(246,145,149)'});
    colors.push({sAngle:0,eAngle:PI/6,sRadius:87,eRadius:117,color:'rgb(240,73,80)'});
    colors.push({sAngle:0,eAngle:PI/6,sRadius:117,eRadius:138,color:'rgb(237,27,36)'});

    $("#wheel").mousedown(function(e){handleMouseDown(e);});

    // test the current mouse position against the saved angle & radius of each color
    // return the colors index of any color under the mouse
    function hit(mx,my){
        var hitIndex=-1;
        for(var i=0;i<colors.length;i++){
            var c=colors[i];
            var a0=c.sAngle;
            var a1=c.eAngle;
            var r0=c.sRadius;
            var r1=c.eRadius;
            var dx=mx-cx;
            var dy=my-cy;
            var radius=Math.sqrt(dx*dx+dy*dy);
            var angle=Math.atan2(dy,dx);
            if(angle>a0 && angle<a1 && radius>r0 && radius<r1){
                hitIndex=i;
                break;
            }    
        }
        return(hitIndex);
    }

    function handleMouseDown(e){
        e.preventDefault();
        e.stopPropagation();

        mx=parseInt(e.clientX-offsetX);
        my=parseInt(e.clientY-offsetY);

        var colorIndex=hit(mx,my);
        if(colorIndex>=0){
            $('#results').css('background-color',colors[colorIndex].color);
        }
    }


}); // end $(function(){});
</script>
</head>
<body>
    Click to select color:<div id=results></div>
    <img id=wheel src='https://dl.dropboxusercontent.com/u/139992952/multple/colorwheel1.png'/>
</body>
</html>