Форум программистов, компьютерный форум, киберфорум
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
0 / 0 / 0
Регистрация: 18.01.2024
Сообщений: 6

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

01.12.2024, 00:25. Показов 1576. Ответов 10
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Имеется интернет-страница с отображаемой схемой мест и текущим наличием мест на ней. При этом объект имеет тип Canvas.
Подскажите, пожалуйста, как можно программно в Js считать эту схему и считать текущее наличие мест? Не пойму вообще как работать с объектом типа Canvas.
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
01.12.2024, 00:25
Ответы с готовыми решениями:

Отправка содержимого <canvas> на сервер
Как отправить содержимое &lt;canvas&gt; (HTML 5) на сервер?

Появление объекта через заданное время canvas
Здравствуйте, подскажите, как сделать, чтобы красный квадрат появлялся через 5 секунд. https://jsfiddle.net/3xbc2L9q/ &lt;canvas...

Отправка содержимого CANVAS на E-Mail
Добрый вечер! Срочно нужно решить проблему: есть рисовалка на CANVAS и кнопка отправки. Нужно изображение из CANVAS отправить на...

10
Эксперт JS
 Аватар для DrType
6553 / 3624 / 1075
Регистрация: 07.09.2019
Сообщений: 5,877
Записей в блоге: 1
01.12.2024, 01:13
Предлагаю сразу изменить план и выяснить, откуда эта страница берет данные, которые отображает на холсте.
1
 Аватар для voraa
1235 / 1130 / 176
Регистрация: 21.01.2024
Сообщений: 5,144
01.12.2024, 10:27
Цитата Сообщение от mgab Посмотреть сообщение
Не пойму вообще как работать с объектом типа Canvas.
Читать документацию и изучать.
Цитата Сообщение от mgab Посмотреть сообщение
Подскажите, пожалуйста, как можно программно в Js считать эту схему и считать текущее наличие мест?
Конечно можно, но сложно.
Подозреваю, что информация о местах хранится где то в другом месте в БД, а программа считывает ее и уже по ней рисует картинку в канвас.
1
0 / 0 / 0
Регистрация: 18.01.2024
Сообщений: 6
01.12.2024, 11:16  [ТС]
Спасибо за ответы.
А как можно узнать откуда тянутся данные? Я как-то в инструментах разработчика это могу увидеть? Смотрю в свойствах объекта, там только стандартные свойства типа width, height, style.
Или это нужно уже анализировать закладки Sources, Network?
0
 Аватар для voraa
1235 / 1130 / 176
Регистрация: 21.01.2024
Сообщений: 5,144
01.12.2024, 11:24
Цитата Сообщение от mgab Посмотреть сообщение
Или это нужно уже анализировать закладки Sources, Network?
Ну да. Изучать код, смотреть к чему обращаются, что загружается.
0
9037 / 2937 / 494
Регистрация: 05.10.2013
Сообщений: 7,962
Записей в блоге: 216
02.12.2024, 23:31
Лучший ответ Сообщение было отмечено gogolik как решение

Решение

Цитата Сообщение от 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). Она считает пиксель квадрата, то есть зелёный пиксель и выведет в консоль.
1
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
3942 / 2046 / 829
Регистрация: 13.03.2010
Сообщений: 6,741
02.12.2024, 23:53
8Observer8, как это поможет в вопросе ТСа, которому нужно с чужого канваса получить данные?
0
9037 / 2937 / 494
Регистрация: 05.10.2013
Сообщений: 7,962
Записей в блоге: 216
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, есть возможность опубликовать ссылку или скинуть её в личку, если не хотите рекламировать заведение. Хочу проверить свой метод.
4
9037 / 2937 / 494
Регистрация: 05.10.2013
Сообщений: 7,962
Записей в блоге: 216
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())
1
 Аватар для diadiavova
7258 / 2605 / 744
Регистрация: 11.04.2015
Сообщений: 4,148
Записей в блоге: 43
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 секунды
И да, чтобы изображения грузились, надо чтобы оригинальная страница была открыта.
1
9037 / 2937 / 494
Регистрация: 05.10.2013
Сообщений: 7,962
Записей в блоге: 216
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]. Я скопировал этот цвет в онлайн калькулятор цвета - это бордово-красный, то есть занятое место.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
03.12.2024, 15:26
Помогаю со студенческими работами здесь

Сохранение содержимого Canvas в PNG
Здравствуйте!Пишу редактор графов,хочу добавить возможность сохранения созданного графа в качестве картинки. Граф находится в...

Преобразование содержимого Canvas в Image
Доброго времени суток! Я занимаюсь разработкой программы, отображающей различные графики, на языке C# с помощью WPF. Столкнулся с...

Экспорт содержимого canvas в svg файл
Строю фракталы методом бильярда внутри поля canvas. Понадобилось сохранить полученный результат в векторном формате в диалоговом окне по...

Прокрутка в canvas при выходе содержимого за пределы
Доброго временни суток. Возникло несколько проблем: Есть Canvas на форме. Предполагается динамически добавлять на него другие...

Считывание из файла и отображение в Canvas
Столкнулся с проблемой, когда вывожу данные из файла, то вместо 0 считывает 4 и к любому символу будь то 5 или любой другой добавляется 4. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru