JavaScript eyedropper (tell color of pixel under mouse cursor)

by

It’s not possible with JavaScript as it goes against cross-domain security. It would be very bad if you knew what pixels made up the image, http://some-other-host/yourPassword.png. You can only tell the color of the pixel under the mouse if either the mouse is over a canvas or an image element of the same domain (or an image element of another domain which is served with an Access-Control-Allow-Origin: * header). In the case of the canvas, you would do canvasElement.getContext('2d').getImageData(x, y, 1, 1).data. In the case of the images, you would have to draw them to a canvas with:

var canvas = document.createElement("canvas");
canvas.width = yourImageElement.width;
canvas.height = yourImageElement.height;
canvas.getContext('2d').drawImage(yourImageElement, 0, 0);

And then just use the previous method explained for canvases. If you must be able to convert to various representations of color values, try my color.js library.

Also, you’re never going to be able to support IE <9 (that’s assuming that IE9 supports canvas) and using Flash won’t help as it can’t read the pixel data of the document either.

More Related Contents:

  1. convert Hsl to rgb and hex
  2. jQuery animate backgroundColor
  3. How to get hex color value rather than RGB value?
  4. Persisting the changes of range objects after selection in HTML
  5. How can I generate the opposite color according to current color?
  6. How to check if a string is a valid hex color representation?
  7. jQuery – select all text from a textarea
  8. Convert Hex to RGBA
  9. RGB to HSV color in javascript? [closed]
  10. Calculate Position of selected text javascript/JQuery?
  11. Cross Browser Selection Range Library?
  12. jQuery Data vs Attr?
  13. How to use JavaScript variables in jQuery selectors?
  14. How can I check if a background image is loaded?
  15. How to style “input file” with CSS3 / Javascript? [duplicate]
  16. JavaScript or jQuery browser back button click detector
  17. How do I detect “shift+enter” and generate a new line in Textarea?
  18. Sort an array by the “Levenshtein Distance” with best performance in Javascript
  19. Capture keys typed on android virtual keyboard using javascript
  20. JS setInterval executes only once
  21. jquery validate plugin on dynamic form inputs not working
  22. Ways to add javascript files dynamically in a page
  23. CORS not working on Chrome
  24. jQuery UI autocomplete with item and id
  25. Search and Highlight in jQuery
  26. Convert String to XML Document in JavaScript
  27. What is the concept of Array.map?
  28. JSON to string variable dump
  29. XMLHttpRequest; Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource [duplicate]
  30. How is AngularJS different from jQuery

Leave a Comment