There is such a code.

#photo{ position: absolute; width: 100px; height: 100px; } #wrapper{ position: relative; overflow: hidden; width: 1px; height: 1px; } <div id=wrapper> <img src="image.jpg" alt="" id="photo"> </div>

How to find out the color of the pixel that is visible?

  • what pixel color? - Grundy
  • Cool question is visible where? Under the mouse cursor or you meant define the average color img. Based on the wrapper code, it is clamped at 1px and you want to determine what color of a pixel hit this point? - Ruslan Semenov
  • four
    Um ...... no way =) - PROPHESSOR
  • 2
    If the pictures are within the same server, then why not canvas without displaying even. If this is certainly not the homework of the type “Do not use the canvas with any wooden methods” - Herrgott
  • one
    You can use AJAX. We send the picture to the server, and the server finds the pixel, and returns its color. - Egor Randomize

1 answer 1

If canvas cannot be used, then the only possible solution would be to use AJAX to query the server. On the server there is exactly the same picture as on the client, or the picture is sent to it along with the request. The server finds the color of the pixel in X and Y coordinates from the request, and returns its color in JSON format.

PHP server code:

 <?php header("Content-Type: application/json; charset=UTF-8"); $x = $_GET["x"]; $y = $_GET["y"]; //Загрузка JPG-изображения из файла "image.jpg" $image = imagecreatefromjpeg("image.jpg"); //Возвращаем цвет пикселя с координатами ($x, $y) на изображении $image $color = imagecolorat($image, $x, $y); //Получаем составляющие цвета (red, green, blue) $col = new stdClass(); $col->r = ($color >> 16) & 0xFF; $col->g = ($color >> 8) & 0xFF; $col->b = $color & 0xFF; //Выводим JSON для AJAX-запрса: echo json_encode($col); //Освобождаем память сервера imageDestroy($image); ?>

Client code:

 <html><body style="margin:0;padding:0"> <img src="image.jpg"><!-- картинка на сервере и клиенте одна --> <br> <div id="mouse-position"></div> <div id="color"></div> <script type="text/javascript"> var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if(this.readyState == 4 && this.status == 200) { var color = JSON.parse(this.responseText); document.getElementById('color').innerHTML = color.r + ', ' + color.g + ', ' + color.b; } }; function sendAJAX(x, y) { xmlhttp.open('GET', 'getColorRGB.php?x='+x+'&y='+y, true); xmlhttp.send(); } document.querySelector('img').onclick = function(e) { document.getElementById('mouse-position').innerHTML = 'x = ' + e.pageX + ', y = ' + e.pageY; sendAJAX(e.pageX, e.pageY) }; </script> </body></html>

Notice that <body style="margin:0;padding:0"> is specified here so that the image is displayed in the upper left corner without an indent. This is done so that the picture is combined with the coordinates of the document, because e.pageX and e.pageY display the coordinates of the document. In general, here it is still necessary to correctly transfer the coordinates, if the picture is shifted. But for this example it is unnecessary.

  • For the answer to this question, 6 months ago, they promised 100 reputation points . No one got them. Today I wrote the correct answer, but no one needs an answer? - Bharata