Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  body {
    width: 300px;
    height: 286px;
    overflow:hidden;
    margin: 0;
  }
  #cog {
      background: url("http://www.afriquinfos.com/fotografias/fotosnoticias/2012/2/10/int-26146.jpg");
      width: 300px;
      height: 286px;
  }
</style>
</head>
<body>
    <div id="cog"></div>
</body>
</html>
 
​
 
var $cog = $('#cog'),
    $body = $(document.body);
​
$cog.click(function(e) {
    var x = e.pageX, y = e.pageY;    
    console.log(x, y);
    
    var color = context.getImageData(x, y, 1, 1).data;
    // context.fillRect(x-5, y-5, 1+10, 1+10); <== See cursor position
    console.log(color);
    if (color[0] == 255 && color[1] == 255 && color[2] == 0) {
        alert("yellow");
    } else if (color[0] == 0 && color[1] == 255 && color[2] == 0) {
        alert("green");
    } else if (color[0] == 0 && color[1] == 0 && color[2] == 0) {
        alert("black");
    } else if (color[0] == 255 && color[1] == 0 && color[2] == 0) {
        alert("red");
    } else if (color[0] == 0 && color[1] == 0 && color[2] == 255) {
        alert("blue");
    }
});
          //   \/    true = prod & false = dev
var canvas = document.createElement('canvas'),
    context = canvas.getContext('2d'),
    image = new Image();
image.onload = function(){
    canvas.width = image.width;
    canvas.height = image.height;
    context.drawImage(image, 0, 0, image.width, image.height);
};
​
// http://i.imgur.com/6hBp9ja.png I use base64 for get image because else console return security error with "getImageData".
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEeCAMAAAAHEdjhAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQAAAAAA/wD/AP8AAP//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALfVa6oAAAEAdFJOU////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wBT9wclAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGnRFWHRTb2Z0d2FyZQBQYWludC5ORVQgdjMuNS4xMUfzQjcAAAuOSURBVHhe7dnhcts2GobRttn7v+WsBBxZss0PBEBQIiGdH9I2eUETzySdzuw/fz+qfWI1+MRq8PJY/xX8/c/oIF4VS446zrzc82MJ0MEDXufpsVy8m8e8xOliXXnU050y1pXHPdVpY1144vOcOdaFhz7J02MNrvXUXueP9cRcM8S68OydTRLrObmmiXXhB+zn+bH+52q78DN28oJYN+43mJ+yiyfH0ilzvcH8pD08M5ZGd643mh833tNi6fONy43nZ472lFja/OJqe/CTx3pCLGWWuNku/PSRdo4lSsS9duIdxtk1liQxt9qL1xhmx1iClLjUfrzKILvFkqPMlfbkdYbYJ5YW69xoT15phD1iCVHDhfbltbYbH0uGOq6zM2+22fBYKlRym715t60Gx9KgntvszvttMzSWAC3cZX9ecZORsdy/ias8g7fcYFwst2/m+BK3HMVT+42K5ebNHC9y1+08r9uYWG7ewQNWue5GHtZrSCwX7+IRVVx5Aw/qNCKWa/fxjFou3c9zumyP5dK9PKWFa3fykB6bY7lzN49p5OJdPKLD1liu3M9zmrl5D09otzGWG2/gQT3cvZ3zzTbFct9NPKqPyzdzvNWGWG67kYf1cvtWTjfqj+Wym3jUNu7fxtk23bFcdwMP2s792zjbpDeWC3fzmEEEaOJoi85YrtzHM4ZSoIWTDfpiuXUPTxhPggYO1uuK5d4dPGAfGtRzrlpPLBdv5/xuNKjnXK2OWG7ezPFdiVDNsUrNsdy8ldP7U6GWU3WeE8vZp1ChllNVWmO5fRNHn0WFSg5VaYzl+i2cfCYd6jhToy2W+7dw8rl0qONM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";
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers