C1. Просмотрщик изображений

Задача

По умолчанию, например, открывается пустое окно с возможностью клика в середину — по клику должно открываться окно с выбором изображения для просмотра. После открытия изображения должна быть возможность листать изображения в текущей папке. Должны поддерживаться как минимум следующие форматы изображений: bmp, png, gif, tiff, jpeg. Основные требования:

1. При просмотре изображения должна быть доступна панель для выполнения основных действий над изображением:

   • увеличение выбранной части изображения и увеличение части изображения по клику в точке
   • кнопка сброса увеличения
   • перемещение по увеличенному изображению с помощью перетаскивания мышью и с помощью клавиатуры
   • просмотр метаданных изображения (размер, цветовое пространство, глубина, dpi/ppi, Exif и TIFF-данные и т.п.)

2. При просмотре изображения внизу должна быть горизонтальная панель со списком следующих и предыдущих изображений в виде их маленьких превью. Панель должна содержать простые элементы управления: стрелка влево и вправо, по нажатию на которые должны пролистываться изображения.

3. По умолчанию изображение должно масштабироваться при изменении размеров окна, соотношение сторон изображения при этом не должно изменяться.

Запуск

В корне проекта выполнить установку зависимостей:

$ npm install

Далее запустим React приложение и сервер Node.

$ npm run start
$ npm run server

В случае, если npm run start выдало ошибку, попробовать заменить в package.json команду

 "start": "set BROWSER=none && react-scripts start",

на

"start": "export BROWSER=none && react-scripts start",

Ждем, пока запустится React приложение. Затем запускаем Electron командой

$ npm run electron

Интерфейс

С помощью слайдера можно просмотреть изображения из определенной папки.

---

---