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

Скрипты и советы | 19 августа 2020

Уроки CSS на Хабрахабре, habrahabr.ru, Разработка веб-сайтов, react, js, html, css, greenlet,



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

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

Зачем?


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

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

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

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

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

Typescript

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

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

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

classnames

File API

Data URLs

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

В третьей части серии вы узнаете, как работает feComponentTransfer и как можно постеризовать изображения при помощи...

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

Эта четвертая статья серии об SVG-фильтрах, в которой Sara Soueidan покажет вам, как использовать feComponentTransfer...

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

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

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

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

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

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

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

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

Подробнее

Написать комментарий

  • Смайлы и люди
    Животные и природа
    Еда и напитки
    Активность
    Путешествия и места
    Предметы
    Символы
    Флаги