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




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

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

Зачем?


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

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

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

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

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

Typescript

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

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

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

classnames

File API

Data URLs

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


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.



Похожие публикации

[Перевод] Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer

В третьей части серии вы узнаете, как работает feComponentTransfer и как можно постеризовать изображения при помощи этого мощного примитива SVG-фильтра. Читать дальше →... читать далее

[Перевод] Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer

Эта четвертая статья серии об SVG-фильтрах, в которой Sara Soueidan покажет вам, как использовать feComponentTransfer для создания эффекта двухтонового фильтра. Предлагаемая серия статей "Эффекты... читать далее

Яндекс не индексирует изображения с сайтов под https

Я бы хотел просто оставить тут небезызвестную картинку с .jpg на конце. Я не мог этого предполагать, когда принимал решение запустить сайт под Extended Validation SSL. Я не мог предполагать, что... читать далее

[Перевод] Создание адаптивных изображений

В Интернете найдется немало статей, посвященных адаптивным логотипам. Наиболее популярным примером является сайт Responsive Logos, который показывает различные варианты известных логотипов для разных... читать далее

[Из песочницы] Что поправить в верстке перед выпуском в продакшн?

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

Web-разработка / Верстка для мобильных устройств

Общая информация Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности HTML/CSS, а другая наоборот — либо не поддерживать, либо... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте