獲取色輪的圖像的RGB值

我想抓住色輪圖像上的點擊的RGB值。獲取色輪的圖像的RGB值

現在我正試圖從下面的色輪圖像抓取RGB而不使用畫布getImageData。

enter image description here

我怎樣才能做到這一點沒有印刷品嗎？

用帆布可以跑步。

$('#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誰能告訴我最好的辦法getImageData從圖像我需要在上面用建立一個RGB網格循環，並從制定出所選像素x和y值，然後匹配它。

真的難住在哪裏開始任何幫助？

來源

2014-10-05 user1503606

你不能沒有使用帆布獲得的圖像數據。您可以事先處理圖像，並提供與圖像等效的數字。 – Pointy 2014-10-05 13:13:56

好的，謝謝指出生病嘗試數字出來 – user1503606 2014-10-05 16:45:29

這裏的@尖尖的好主意付諸代碼：

只是你的色輪楔1所。您可以擴展此起點以將所有楔形包含在色輪中。

enter image description here

示例代碼和演示：http://jsfiddle.net/m1erickson/9pc4orw8/

<!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>

來源

2014-10-05 17:12:35 markE

獲取色輪的圖像的RGB值

回答

相關問題