[Frontend Практика #1] Drag and Drop, Превью изображения, Средний цвет изображения и Отдельный поток

Всем привет, сегодня разработаем приложение которое определяет средний цвет изображения в отдельном потоке и покажем превью изображения (полезно при создании форм загрузки изображения).

Это новая серия статьей, которая по большей части предназначена для новичков. Я не уверен, что такой материал может быть интересен, но решил попробовать. Если ок пойдет, поснимаю видосиков, для тех кому лучше поглащать информацию визуально.

Зачем?

Какой-то острой необходимости в этом нет, но определение цветов изображение зачастую используется для:

Поиска по цвету

Определение заднего фона изображения (если оно не занимает весь экран, что бы хоть как-то сочеталось с остатком экрана)

Цветные миниатюры для оптимизации загрузки страницы (показывать цветную палитру вместо обжатого изображения)

Мы будем использовать:

Typescript

React наряду с Create React App — почему бы и нет? Мы быстро создадим рабочее окружения и сможем билдить наш проект

HTML Drag and Drop API — для перетаскивания изображения с рабочего стола в браузер

Web workers и Greenlet — для вынесения сложных вычислений в отдельный поток

classnames

File API

Data URLs

Читать дальше →

Источник: Уроки CSS на Хабрахабре