How to read color specific pixels from a site?

Question

There is a site on which the rectangles are located.

You need to find out their color and output it to the console as RGB.

Site example:

It is important that the pixels are read by coordinates. This means that I entered the coordinates of the first rectangle, the second one and so on, and then the colors were read from these coordinates.

An example of what should turn out in the console (design does not matter):

Ok, where is this site? What package/library are you using? Please show your code. — Mark Setchell, Feb 19 '20 at 11:25
You may be interested to know there are 119 unique colours in your image. Does the website you allude to really serve the image as JPEG, or have you converted it from PNG to JPEG? — Mark Setchell, Feb 19 '20 at 15:43

Ben · Accepted Answer · 2020-03-19T11:23:37.127

If you could grab a the photo of the website and save to your computer you can just do this. To save Image.

import urllib.request
url = 'https://ichef.bbci.co.uk/news/1024/cpsprodpb/15236/production/_109228568_mediaitem109228567.jpg'
urllib.request.urlretrieve(url, ('case5.jpg'))

Then to load the image

from PIL import Image
im = Image.open('saved photo')
pix = im.load()

Then to get the pixel you just put your coordinates into this

pix[x,y]

so your full code to get the pixel in the top right corner it just.

from PIL import Image
import urllib.request
url = 'https://ichef.bbci.co.uk/news/1024/cpsprodpb/15236/production/_109228568_mediaitem109228567.jpg'
urllib.request.urlretrieve(url, ('case5.jpg'))
im = Image.open('case 5.jpg')
pix = im.load()
print(pix[0,0])

The best answer which I have ever got. – Merry_Train Feb 25 '20 at 19:27 — Merry_Train, Feb 25 '20 at 19:27

score 0 · Answer 2 · answered Feb 19 '20 at 11:19

Basically in pure Python it can't be done. But you can use javascript to achieve it.
Python:

# pip install pywebview

import webview

webview.create_window('your_url')
rgb = webview.evaluate_js('find_color_by_coords('+x+', '+y+');')
print(rgb)

JavaScript (function hexToRgb was taken from here):

function find_color_by_coords(x, y) {
    const hexToRgb = hex =>
        hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
             ,(m, r, g, b) => '#' + r + r + g + g + b + b)
          .substring(1).match(/.{2}/g)
          .map(x => parseInt(x, 16))

    elem = document.elementFromPoint(x, y);
    return hexToRgb(elem.style.background);
}

Please notice that I couldn't check this code, so there could be mistakes.

How to read color specific pixels from a site?

2 Answers2