How to get color value from Image

Discussion in 'JavaScript' started by makhan, May 21, 2007.

0
  1. #1
    I am trying to get the color and coordinates of the point where I click my mouse in a jpg image. Can someone guide me how I can do that.

    Thanks
     
    makhan, May 21, 2007 IP
  2. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #2
    IMO is not possible to get the color of the pixel where the mouse is located, but you can get position coordinates using:
    - event.pageX and event.pageY (for Firefox)
    - event.clientX and event.clientY (for IE)

    Then you need to apply offsets for your image. Example:

    
<html>
<head>
<script language="javascript">
var divObj;

document.onmousemove = getMouseCoordinates;

function getMouseCoordinates(event)
{
  var px; 
  var py;
  ev = event || window.event;
  if(typeof ev.pageX != 'undefined')
  {
    px = ev.pageX; 
    py = ev.pageY;
  }
  else
  {
    px = ev.clientX - document.body.scrollLeft; // + window.screenLeft; 
    py = ev.clientY - document.body.scrollTop;  // + window.screenTop;	  
  }
  
  divObj.innerHTML = "Mouse X=" + px + ", Mouse Y=" + py;
}


function loadDiv()
{
  divObj = document.getElementById("mouseCoord");
}
</script>
</head>

<body onLoad="loadDiv()">
<div id="mouseCoord">Mouse Coordinates position will be displayed here</div>
</body>
</html>
    Code (markup):
     
    ajsa52, May 21, 2007 IP
  3. makhan

    makhan Peon

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for the reply. What do you mean by the offset to the image.
     
    makhan, May 21, 2007 IP
  4. bibel

    bibel Active Member

    Messages:
    289
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #4
    To tell you where you clicked on the image.
    There's no way you can get the color of the pixel with javascript.
    You need some scripting language, and maybe some imagemagick ...
     
    bibel, May 22, 2007 IP
  5. Prookle

    Prookle Guest

    Messages:
    144
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I would do it using javascript to get the X and Y of the click, then would use AJAX to send that data to a PHP script, that uses GD.

    The script would get in input, from javascript, using AJAX, the X, Y and the image file.

    The PHP script would load the image file in an image resource, then would execute the imagecolorat function, in GD, using PHP.

    That way, youll get the pixel color of your click ;)

    Steve
     
    Prookle, May 25, 2007 IP
  6. EverestTech

    EverestTech Well-Known Member

    Messages:
    554
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    140
    #6
    the simple way is to use Color Selector which you can download from sourceforge.net go ther and give a search for Color Selector as i can't post links now i can't give u the links sorry for that go there and give a search it's a nice tool
     
    EverestTech, May 25, 2007 IP
  7. wing

    wing Active Member

    Messages:
    210
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    58
    #7
    There is no need for javascript to get X & Y coordinates from a picture.
    You can use a form, and instead of a submit button use <input type='image' src='blabla.jpg'>

    Check this: colorpick example

    Very simple, no fluff :)
     
    wing, May 25, 2007 IP
    ajsa52 likes this.