Считывание содержимого объекта Canvas

@mgab · Регистрация: 18.01.2024

Студворк — интернет-сервис помощи студентам

Имеется интернет-страница с отображаемой схемой мест и текущим наличием мест на ней. При этом объект имеет тип Canvas.
Подскажите, пожалуйста, как можно программно в Js считать эту схему и считать текущее наличие мест? Не пойму вообще как работать с объектом типа Canvas.

@DrType · 01.12.2024, 01:13

Предлагаю сразу изменить план и выяснить, откуда эта страница берет данные, которые отображает на холсте.

@voraa · 01.12.2024, 10:27

Сообщение от mgab

Не пойму вообще как работать с объектом типа Canvas.

Читать документацию и изучать.

Сообщение от mgab

Подскажите, пожалуйста, как можно программно в Js считать эту схему и считать текущее наличие мест?

Конечно можно, но сложно.
Подозреваю, что информация о местах хранится где то в другом месте в БД, а программа считывает ее и уже по ней рисует картинку в канвас.

@mgab · 01.12.2024, 11:16 **[ТС]**

Спасибо за ответы.
А как можно узнать откуда тянутся данные? Я как-то в инструментах разработчика это могу увидеть? Смотрю в свойствах объекта, там только стандартные свойства типа width, height, style.
Или это нужно уже анализировать закладки Sources, Network?

@voraa · 01.12.2024, 11:24

Сообщение от mgab

Или это нужно уже анализировать закладки Sources, Network?

Ну да. Изучать код, смотреть к чему обращаются, что загружается.

@8Observer8 · 02.12.2024, 23:31

Сообщение от mgab

Не пойму вообще как работать с объектом типа Canvas

Для начала, нужно получить контекст элемента с помощью метода getContext(contextType). Этому методу нужно передать в качестве параметра запрашиваемый тип контекста, например: "2d", "webgl", "webgl2" и т.д.

PHP/HTML
1
2
3
4
5
6
7
8
9
<body>
    <canvas id="renderCanvas" width="300" height="300"></canvas>
 
    <script>
        const canvas = document.getElementById("renderCanvas");
        const ctx = canvas.getContext("2d");
        console.log(ctx);
    </script>
</body>

Сообщение от mgab

как можно программно в Js считать эту схему и считать текущее наличие мест?

Можно попробовать анализировать значение цвета (RGB) считанного пикселя. У объекта контекста рисования "2d" есть метод getImageData(sx, sy, sw, sh). Можно передать координаты интересующего пикселя. Этот пример рисует зелёный зелёный квадрат, считывает значение пикселя и выводит в консоль [0, 128, 0, 255]. Первое значение - это R (red) - красный цвет. Он равен нулю. Второе значение - это G (green) - зелёный, он равен 128. Третье значение - это B (blue) - синий, он равен 0. Последнее значение - это A (alpha) - значение прозрачности, она равна 255, это значит, что квадрат непрозрачный.

Демка в песочнице: https://plnkr.co/edit/HdlBGYPFpH1FFnUr - чтобы увидеть результат надо открыть консоль - Ctrl+Shift+J в Chrome

Код демки:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
 
<html>
<head>
    <title>Read pixel of a green square using ctx.getImageData</title>
</head>
 
<body>
    <canvas id="renderCanvas" width="300" height="300" style="background-color: #d3f1f1;"></canvas>
 
    <script>
        // Получить контекст
        const canvas = document.getElementById("renderCanvas");
        const ctx = canvas.getContext("2d");
        // Нарисовать зелёный квадрат
        ctx.fillStyle = "green";
        ctx.fillRect(5, 5, 50, 50);
        // Считать пиксель с цветом квадрата
        const imageData = ctx.getImageData(10, 10, 1, 1);
        const data = imageData.data;
        console.log(data);
    </script>
</body>
</html>

Вы можете в консоли в хром ввести: allow pasting, чтобы скопировать команду ctx.getImageData(10, 10, 1, 1). Она считает пиксель квадрата, то есть зелёный пиксель и выведет в консоль.

@gogolik · 02.12.2024, 23:53

8Observer8, как это поможет в вопросе ТСа, которому нужно с чужого канваса получить данные?

@8Observer8 · 03.12.2024, 02:16

Сообщение от gogolik

как это поможет в вопросе ТСа, которому нужно с чужого канваса получить данные?

В консоли браузера можно получить доступ к чужому Canvas, а это уже большой шаг. Я так здесь и написал:

Сообщение от 8Observer8

Вы можете в консоли в хром ввести: allow pasting, чтобы скопировать команду ctx.getImageData(10, 10, 1, 1). Она считает пиксель квадрата, то есть зелёный пиксель и выведет в консоль.

А дальше уже можно с этим работать. Например, использовать QWebEngineView из PySide6. Я загрузил код выше из песочницы на хостинг: https://read-pixel.netlify.app/ Там рисуется зелёный квадрат. QWebEngineView загружает страницу и выполняет код:

Python
1
2
3
4
5
6
7
8
9
10
11
    def onLoadFinished(self, ok):
        if ok:
            print("Page loaded successfully!")
 
            javascriptCode = """
                // Считать пиксель с цветом квадрата
                const myImageData = ctx.getImageData(10, 10, 1, 1);
                const rgba = imageData.data;
                console.log(rgba[0], rgba[1], rgba[2], rgba[3]);
            """
            self.webView.page().runJavaScript(javascriptCode);

Обычно контекст все называют "ctx", либо "context" - это можно в исходниках поискать. Потом срабатывает сигнал javaScriptConsoleMessage, в обработчике которого можно получить, что вывелось в консоль. Выводится зелёный цвет:

Уверен, что места обозначены разными цветами. Скорее всего, красным и зелёным. Эти места в определённых позициях. Надо считывать пиксели по этим позициям на JavaScript, а потом с помощью программы анализировать, что вывелось в консоль. Если красный цвет, то место занято, если зелёный, то свободно.

mgab, есть возможность опубликовать ссылку или скинуть её в личку, если не хотите рекламировать заведение. Хочу проверить свой метод.

@8Observer8 · 03.12.2024, 02:29

Если интересен предложенный вариант, то его очень легко начать пробовать. Надо поставить интерпретатор Python. Вбейте: python download

Откройте консоль и введите команду установки PySide6:

pip install PySide6

Программу ниже сохраните в файл с именем "main.py". В неё происходит запрос к сайту: https://read-pixel.netlify.app/ где рисуется один зелёный квадрат. Программа открывает ссылку. По окончанию загрузки контента по ссылке выполняется метод onLoadFinished(), где запускаются JS команды по считыванию пикселей. Эти команды выводятся в консоль браузера WebEngineView, а при выводе в консоль срабатывает метод javaScriptConsoleMessage, где можно проанализировать пиксель. Скорее всего, это рабочий вариант, его можно развивать.

main.py

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import sys
import os
 
from PySide6.QtCore import QUrl
from PySide6.QtWebEngineCore import QWebEngineSettings
from PySide6.QtWebEngineWidgets import QWebEngineView
from PySide6.QtWebEngineCore import QWebEnginePage
from PySide6.QtWidgets import QApplication, QVBoxLayout, QWidget
 
class MyWebEnginePage(QWebEnginePage):
    def javaScriptConsoleMessage(self, level, message, lineNumber, sourceID):
        print(f"JavaScript Console ({level}): {message} at line {lineNumber} in {sourceID}")
 
class Widget(QWidget):
 
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QWebEngineView, PySide6")
        self.resize(500, 300)
 
        layout = QVBoxLayout()
        self.webView = QWebEngineView()
        layout.addWidget(self.webView)
        self.setLayout(layout)
 
        self.page = MyWebEnginePage()
        self.webView.setPage(self.page)
 
        # self.webView.page().javaScriptConsoleMessage.connect(self.handleConsoleMessage)
        # print(dir(self.webView.page()))
 
        self.webView.settings().setAttribute(QWebEngineSettings.WebAttribute.WebGLEnabled, True)
        # self.webView.setUrl(QUrl("https://read-pixel.netlify.app/"))
        self.webView.load(QUrl("https://read-pixel.netlify.app/"))
        self.webView.loadFinished.connect(self.onLoadFinished)
 
    def onLoadFinished(self, ok):
        if ok:
            print("Page loaded successfully!")
 
            javascriptCode = """
                // Считать пиксель с цветом квадрата
                const myImageData = ctx.getImageData(10, 10, 1, 1);
                const rgba = imageData.data;
                console.log(rgba[0], rgba[1], rgba[2], rgba[3]);
            """
            self.webView.page().runJavaScript(javascriptCode);
 
        else:
            print("Page load failed!")
 
if __name__ == "__main__":
    os.environ['QTWEBENGINE_CHROMIUM_FLAGS'] = '--use-gl=angle --gpu --gpu-launcher --in-process-gpu --ignore-gpu-blacklist --ignore-gpu-blocklist --enable-logging --log-level=3'
    app = QApplication(sys.argv)
    w = Widget()
    w.show()
    sys.exit(app.exec())

@diadiavova · 03.12.2024, 03:59

mgab, в принципе можно сохранить содержимое канваса в виде изображения и потом уже анализировать с помощью чего угодно.
Простой пример как это можно сделать:
Открываешь консоль браузера и вводишь туда следующий код на исполнение

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
   (function ()
    {
      let canv = document.querySelectorAll("canvas");
      let parser = new DOMParser();
      let hls = [];
      for (let c of canv)
      {
        c.toBlob(function (blob)
        {
          hls.push(URL.createObjectURL(blob));
        });
      }
      setTimeout(() =>
      {
        let page = parser.parseFromString(`<div>hello</div>`, "text/html");
        let anchors = hls.map((h, i) => `<div style="border:2px blue solid;"><a href="${h}" download="canvas_${i}.png"><img src="${h}"></a></div>`).join("<br />");
        page.body.insertAdjacentHTML("beforeend", anchors);
        console.log(page.documentElement.outerHTML);
        let pageblob = new Blob(["<!DOCTYPE html>\n" + page.documentElement.outerHTML]);
        let pageurl = URL.createObjectURL(pageblob);
        open(pageurl);
      }, 2000);
 
    })();

Запускаешь. У тебя сверху появляется сообщение о том, что заблокировано открытие вкладки. Разрешаешь открыться и у тебя появляется страничка на которой будут отображены все изображения. При клике по нужному оно будет загружаться на комп. Вот здесь можно попробовать HTML Canvas Images. Заодно почитаешь как работать с канвасом.

Добавлено через 53 секунды
И да, чтобы изображения грузились, надо чтобы оригинальная страница была открыта.

@8Observer8 · 03.12.2024, 15:26

Сообщение от 8Observer8

Обычно контекст все называют "ctx", либо "context" - это можно в исходниках поискать.

Canvas в консоли браузера можно найти по родительскому div. Например:

JavaScript
1
const canvas = document.getElementsByClassName("chart-layer")[0].firstChild;

Но, почему-то это срабатывает только если перед этим кликнуть по canvas правой кнопкой мыши, а потом выбрать "Inspect" и сразу вернуться в консоль и выполнить получение canvas снова. Далее, вводите команды в консоли браузера:

JavaScript
1
2
3
const ctx = canvas.getContext("2d");
const imageData = ctx.getImageData(20, 300, 1, 1);
const data = imageData.data;

Вводите data в консоль - выводится массив значений RGBA, например [35, 35, 35, 255] - это значит серый цвет фона, значит, не попал.

А если нажму на клавишу вверх несколько раз, чтобы добраться до предыдущей команы (ctx.getImageData) и введу другие координаты пикселя, то уже попал:

JavaScript
1
const imageData = ctx.getImageData(20, 400, 1, 1);

Выводит [125, 34, 54, 255]. Я скопировал этот цвет в онлайн калькулятор цвета - это бордово-красный, то есть занятое место.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@mgab 0 / 0 / 0 Регистрация: 18.01.2024 Сообщений: 6

	Считывание содержимого объекта Canvas 01.12.2024, 00:25. Показов 1673. Ответов 10 Метки нет (Все метки) Имеется интернет-страница с отображаемой схемой мест и текущим наличием мест на ней. При этом объект имеет тип Canvas. Подскажите, пожалуйста, как можно программно в Js считать эту схему и считать текущее наличие мест? Не пойму вообще как работать с объектом типа Canvas. 0

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	01.12.2024, 01:13
	Предлагаю сразу изменить план и выяснить, откуда эта страница берет данные, которые отображает на холсте. 1

@mgab 0 / 0 / 0 Регистрация: 18.01.2024 Сообщений: 6
	01.12.2024, 11:16 [ТС]
	Спасибо за ответы. А как можно узнать откуда тянутся данные? Я как-то в инструментах разработчика это могу увидеть? Смотрю в свойствах объекта, там только стандартные свойства типа width, height, style. Или это нужно уже анализировать закладки Sources, Network? 0

@gogolik Супер-модератор 3963 / 2081 / 832 Регистрация: 13.03.2010 Сообщений: 6,860
	02.12.2024, 23:53
	8Observer8, как это поможет в вопросе ТСа, которому нужно с чужого канваса получить данные? 0

Считывание содержимого объекта Canvas

Решение