Best IT Recipes

JavaScript eyedropper (specify the color of the pixel under the mouse cursor)

I am looking for an eyedropper tool that gives me the hex value of the pixel on which the mouse cursor is located, in JavaScript for CMS.

There is a great ColorZilla extension for Firefox that does just that. However, this is only FF, and I really would like to deliver the tool along with the CMS.

The Dutch developer had a very clever idea using a combination of Ajax and PHP imagecolorat() to find out the color of the pixel in the image. But this limits the range of images that I can get on the server side , and I really dream of a universal tool.

I will work with one of these approaches, but would prefer to use a cross-browser, Javascript or Flash method, which does not require server-side downloads and without installing extensions.

I am also interested in any IE-specific solutions that do what ColorZilla can do - I could only live with IE and FF support, although a cross-browser solution would certainly be ideal.

+58
javascript jquery colors selection color-picker
Dec 20 '09 at 14:42
source share
9 answers

This is not possible with JavaScript, as this is against cross-domain security. It would be very bad if you knew which pixels made up the image, http://some-other-host/yourPassword.png . You can specify the color of the pixel under the mouse if the mouse is over a canvas or image element of the same domain (or image element of another domain, which is served with the heading Access-Control-Allow-Origin: * ). In the case of canvas, you do canvasElement.getContext('2d').getImageData(x, y, 1, 1).data . In the case of images, you would have to draw them on the 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 should be able to convert to different representations of color values, try my color.js library.

Also, you can never support IE <9 (assuming that IE9 supports canvas), and using Flash will not help, because it cannot read the pixel data of a document.

+60
Dec 20 '09 at 15:06
source share

Combining the various links found here on StackOverflow and other sites, I did this using javascript and jQuery:

 <html> <body> <canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script src="jquery.js"></script> <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var img = new Image(); img.src = 'photo_apple.jpg'; context.drawImage(img, 0, 0); }; function findPos(obj){ var current_left = 0, current_top = 0; if (obj.offsetParent){ do{ current_left += obj.offsetLeft; current_top += obj.offsetTop; }while(obj = obj.offsetParent); return {x: current_left, y: current_top}; } return undefined; } function rgbToHex(r, g, b){ if (r > 255 || g > 255 || b > 255) throw "Invalid color component"; return ((r << 16) | (g << 8) | b).toString(16); } $('#myCanvas').click(function(e){ var position = findPos(this); var x = e.pageX - position.x; var y = e.pageY - position.y; var coordinate = "x=" + x + ", y=" + y; var canvas = this.getContext('2d'); var p = canvas.getImageData(x, y, 1, 1).data; var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); alert("HEX: " + hex); }); </script> <img src="photo_apple.jpg"/> </body> </html>

This is my complete decision. Here I used only canvas and one image, but if you need to use <map> for the image, this is also possible. Hope I helped.

+11
Jan 10 2018-12-12T00:
source share

Using a technique called Timer Attack Attack, you can (sort) determine the color of any pixel, even iframes.

In principle, this method measures the rendering time of an SVG filter on an element, not the color itself ( requestAnimationFrame() allows you to measure time with much better accuracy than setTimeout() ). Depending on the current pixel color, the filter takes more or less time to apply. This allows you to determine if a pixel is the same color as a known color — for example, black or white.

More details in this white paper (pdf): http://www.contextis.com/documents/2/Browser_Timing_Attacks.pdf

By the way: yes, this is a hole in the browser, but I don’t see how browser manufacturers can fix it.

+10
Jan 30 '14 at 1:07
source share

I agree with the very detailed answer provided by Elijah. In addition, I would say that you do not need canvas when it comes to images. As you stated yourself, you have these images available from php and you can perform a color request on the server.

I would suggest that you deal with this problem with an external tool - this makes it even browser independent (but it depends on the OS): write a small tool (for example, in C #) that performs a color request for you, is called using shortcut and passes color to your server. Make the tool available for download on the CMS.

Another approach I used for CMS was to “steal” colors by analyzing CSS: a use case was to make the colors of an existing website available as a color palette for my application:

  • I asked the user to specify the URL from the target system - basically the company’s home page
  • I analyzed the page to find all color definitions in all inline styles and related styles.
  • (you can easily extend this to all image links)
  • the result was a nice color palette with all the colors of the cathedral to choose from

Maybe this is also a solution for your CMS?

+6
Jan 03 '09 at 19:55
source share

I don’t know if this is possible, but if your pages are static, you can save a screenshot of each of them (or maybe one for each browser / screen resolution?), And then use AJAX to send the cursor, coordinate the server and return the pixel color using PHP imagecolorat() .

To take screenshots, you can use the Selenium IDE as described.

Hope this helps.

+4
Jan 04
source share

To add to previous answers -

One way to think about this problem is that you want to be able to capture the screen area of ​​1px by 1px. A fairly common method of capturing areas of the screen (for example, from error reporting systems on the Internet) is to use a signed Java applet and java.awt.Robot to capture an image. If you sign the applet, your users will receive the “Do you trust this application” dialog (with the checkbox “Always trust applications from this publisher”), and then you can use this tool.

You can then transfer the result to JavaScript using LiveConnect (the documents are old, but Java applets still support this), or you can send them to your server. Similarly, you can invoke the Java applet from JavaScript.

+3
Jan 07 '10 at 2:10
source share

See the new HTML5 [type = color] input element: http://www.w3.org/TR/html-markup/input.color.html , http://demo.hongkiat.com/html5-form-input- type / index2.html .

Now it works, at least in Chrome (tested in Ubuntu, should work for Windows as well). It launches the color picker dialog provided by the operating system . If there is an eyedropper in this dialog box (this is for Gnome), then you can select a color from anywhere on the screen . Not a cross browser, but clean and standards-based.

+3
03 Mar. '13 at 4:11
source share

As a precaution, you cannot capture screen pixels using Javascript (so that developers cannot take pictures of your personal data), but you CAN do this in Flash - you can get pixel data in a Flash container using flash.display.BitmapData.

Check out http://www.sephiroth.it/tutorials/flashPHP/print_screen/ - I used it in WYSYWIG Flash projects to save images to a LAMP server (PHP).

The problem with using Flash is that it is not supported on iOS devices that are extremely popular now and are worth developing. The flash goes through the pipes.

A canvas based method would certainly be nice if all of your visitors had modern web browsers that supported canvas and JavaScript tags.

+1
Mar 19 '12 at 21:29
source share

There is no built-in DOM method to get the color of the DOM element (except for images or <canvas> ) at a specific pixel location.

Thus, to do this, we must use something like HTML2Canvas or DOM Panda to take a “screenshot” of our website, get the user's click location, and get the pixel color of the “screenshot” at that particular location.

Using HTML2Canvas (version 0.5.0-beta3), you can do something like this:

 // Take "screenshot" using HTML2Canvas var screenshotCanvas, screenshotCtx, timeBetweenRuns = 10, lastTime = Date.now(); function getScreenshot() { // Limit how soon this can be ran again var currTime = Date.now(); if(currTime - lastTime > timeBetweenRuns) { html2canvas(document.body).then(function(canvas) { screenshotCanvas = canvas; screenshotCtx = screenshotCanvas.getContext('2d'); }); lastTime = currTime; } } setTimeout(function() { // Assure the initial capture is done getScreenshot(); }, 100); // Get the user click location document.onclick = function(event) { var x = event.pageX, y = event.pageY; // Look what color the pixel at the screenshot is console.log(screenshotCtx.getImageData(x, y, 1, 1).data); } // Update the screenshot when the window changes size window.onresize = getScreenshot;

Demo

+1
Mar 13 '17 at 21:16
source share


More articles:


All Articles