Tell me, is it possible to find out the color of the pixel in the picture when clicking the mouse (on which the click was made) using javascript?

    2 answers 2

    You can, using canvas. Here is an example of color inversion:

    // Get the CanvasPixelArray from the given coordinates and dimensions. var imgd = context.getImageData(x, y, width, height); var pix = imgd.data; // Loop over each pixel and invert the color. for (var i = 0, n = pix.length; i < n; i += 4) { pix[i ] = 255 - pix[i ]; // red pix[i+1] = 255 - pix[i+1]; // green pix[i+2] = 255 - pix[i+2]; // blue // i+3 is alpha (the fourth element) } // Draw the ImageData at the given (x,y) coordinates. context.putImageData(imgd, x, y);
    • Well, tell me, is not inverse javascript supported? (do not think, do not reproach, just wondering how it happens in JavaScript). The inversion operation in this case would be more logical from the point of view of the procedure itself, and even subtraction is essentially two operations, when in this case one is enough. The only thing I don’t know is that JavaScript correctly understands it for variables without explicitly specifying the type. - Dex
    • The code has nothing to do with it, as well as its loyalty in terms of the algorithm. The bottom line is that the context.getImageData (x, y, 1, 1) .data function returns the required pixel color, the actual answer to the question :) - Alex Silaev

    Using standard JS tools is impossible. Although there is such an interesting plugin for jQuery called JСrop, which cuts off pictures on the fly, it is possible that with a click you can cut the katrinka by one pixel with a click and learn its color. You can see the usage example and demo here .

    • Using JavaScript, you can find out the color of a pixel only if you have a ready-made image map, where a color is registered for each pixel. 2 Loki - JСrop does not "crop images on the fly." He only manipulates styles. The image remains as it was. - istem