TGViewer
Точка входа в программирование Точка входа в программирование @prog_point · 18K subscribers
Post #5059 2.35K
Достаньте точный цвет пикселя из картинки прямо в браузере

Задача звучит просто: есть скриншот или логотип, нужен точный HEX конкретного пикселя. Обычно за этим идут в графический редактор, хотя браузер умеет сам, и загружать картинку никуда не надо.

Работает это через Canvas — элемент HTML, на котором можно рисовать и, что важнее, читать нарисованное по пикселям. Порядок такой: загрузить изображение, нарисовать его на canvas, забрать массив пикселей и достать нужный. В массиве каждый пиксель занимает четыре числа: красный, зелёный, синий и прозрачность.

Упражнение хорошо тем, что за один маленький проект вы трогаете объект Image, события загрузки и типизированные массивы. Возьмите код примера и соберите пипетку, которая показывает цвет под курсором.

#javascript
DEV Community How to Extract Colors From an Image Using JavaScript and Canvas? How to Extract Colors From an Image Using JavaScript and Canvas Have you ever looked at an...
  • ❤ 2
More from @prog_point
  1. Sep 20, 2026Как читать ввод с геймпада в JavaScript и не принять поломку за норму В Gamepad API нет со…
  2. Sep 20, 2026Как выбрать пагинацию для API Пагинация делит ответ API на части. Offset пропускает N стро…
  3. Sep 20, 2026Какие исключения ловить в Python и какие оставить видимыми Один except для ValueError, Typ…
  4. Sep 19, 2026Превращаем статичную HTML-страницу в редактор на JavaScript Резюме или меню можно отдать а…
  5. Sep 19, 2026Инструкция по применению: открыть анкету, ответить на вопросы из школьной тетрадки, по дор…
  6. Sep 19, 2026freeCodeCamp.org выпустил бесплатный курс по Python с тремя проектами Это четырёхчасовой в…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →