bat-пропагандист
587 / 81 / 35
Регистрация: 07.12.2022
Сообщений: 250
Записей в блоге: 12
1

Прочитать цвет пикселя на canvas

07.12.2022, 23:42. Показов 626. Ответов 1

Author24 — интернет-сервис помощи студентам
Есть canvas, работающий в режиме WebGL.
(Доступа к скрипту, создающему canvas и вызывающему getContext() у меня нет.)

Нужно узнать цвет определенного пикселя на этом canvas`е.

Мой код:
Javascript
1
2
3
4
5
let canvas = document.querySelector('canvas');
let c = canvas.getContext('webgl2');
let arr = new Uint8Array(4);
c.readPixels(300, 300, 1, 1, c.RGBA, c.UNSIGNED_BYTE, arr);
console.log(`R: ${arr[0]}\nG: ${arr[1]}\nB: ${arr[2]}`);
Результат:
Код
R: 0
G: 0
B: 0
Я пробовал использовать getContext('webgl2', {preserveDrawingBuffer: true}), но это ничего не изменило.
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
07.12.2022, 23:42
Ответы с готовыми решениями:

Не получается получить цвет пикселя в canvas используя getImageData
Проблему удалось кратко описать в заголовке, тут я распишу её более подробней, есть вот такой код:...

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

Как получить цвет пикселя в JavaFx Canvas
Собственно вопрос, как получить цвет одного пикселя из GraphicsContext. Такая простая вещь, а не...

Как в обьекте canvas определить цвет пикселя с заданными координатами
как в обьекте canvas определить цвет пикселя с заданными координатами? Или может существует обьект...

Изменить цвет формы в цвет пикселя под курсором по клику мыши
Есть код. Но форма выкрашивается только в серый цвет и такой и остается, несмотря на изменение...

1
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
12.12.2022, 16:56 2
Лучший ответ Сообщение было отмечено 8Observer8 как решение

Решение

Это невозможно. Функция readPixels должна быть вызвана в том же событии, что и рисование объектов. Подробнее можете почитать в этом сообщении: https://stackoverflow.com/a/44534528/4159530 Да, написано, что можно использовать {preserveDrawingBuffer: true}, но я пробовал, не работает.

Google Translate

Вам не нужно saveDrawingBuffer: true для вызова readPixels. Что вам нужно, так это вызвать readPixels перед выходом из текущего события.

Спецификация говорит, что если вы вызываете любую функцию, влияющую на холст (gl.clear, gl.drawXXX), то браузер очистит холст после следующей составной операции. Когда эта составная операция произойдет, зависит от браузера. Это может быть после того, как он обработает несколько событий мыши, событий клавиатуры или событий щелчка. Порядок не определен. Что определено, так это то, что он не будет делать этого, пока текущее событие не выйдет, поэтому

render
read
Кликните здесь для просмотра всего текста
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const gl = document.querySelector("canvas").getContext("webgl");
 
render();
read();  // read in same event
 
function render() {
  gl.clearColor(.25, .5, .75, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
}
 
function read() {
  const pixel = new Uint8Array(4);
  gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
  log(pixel);
}
 
function log(...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join(' ');
  document.body.appendChild(elem);
}


works where as

render
setTimeout(read, 1000); // some other event
не работает

Кликните здесь для просмотра всего текста

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const gl = document.querySelector("canvas").getContext("webgl");
 
render();
setTimeout(read, 1000);  // read in other event
 
function render() {
  gl.clearColor(.25, .5, .75, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
}
 
function read() {
  const pixel = new Uint8Array(4);
  gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
  log(pixel);
}
 
function log(...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join(' ');
  document.body.appendChild(elem);
}


Обратите внимание, что, поскольку это составная операция (браузер фактически рисует холст на странице с остальной частью HTML), который запускает очистку, если холст не находится на странице, он не составляется и не будет очищен.

Другими словами, случай, который не работал выше, работает здесь.

Кликните здесь для просмотра всего текста

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// create an offscreen canvas. Because it's offscreen it won't be composited
// and therefore will not be cleared.
const gl = document.createElement("canvas").getContext("webgl");
 
render();
setTimeout(read, 1000);  // read in other event
 
function render() {
  gl.clearColor(.25, .5, .75, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
}
 
function read() {
  const pixel = new Uint8Array(4);
  gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
  log(pixel);
}
 
function log(...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join(' ');
  document.body.appendChild(elem);
}


Теперь, если вы хотите вызвать readPixels в каком-то другом событии, например, когда пользователь щелкает элемент, у вас есть как минимум 2 варианта.
  1. Установить saveDrawingBuffer: true
  2. Рендеринг снова в вашем событии

Javascript
1
2
3
4
screenshotElement.addEventListener('click', event => {
  render();  
  gl.readPixels(...);
});
0
12.12.2022, 16:56
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
12.12.2022, 16:56
Помогаю со студенческими работами здесь

Написать программу, которая будет определять цвет пикселя под курсором и выводить на экран этот цвет
Хочу написать программу, кот. будет определять цвет пикселя под курсором и выводить на экран этот...

Delphi размер пикселя на Canvas
Добрый день. Вижу большой проблемой существующие методы рисования на канве в Delphi. Почему если...

Как прочитать программно размер пикселя?
Функцией GetSystemMetrics - определяю установленный режим монитора. Но оружность нарисованная на...

Цвет пикселя
Нужен максимально быстрый и эффективный инструмент по поиску динамически передвигающейся картинки...

Цвет пикселя
Как узнать какого цвета пиксель?

Цвет пикселя
Как узнать цвет конкретного пикселя компонента TImage?


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru