Аннотатор изображений — позволяет добавлять аннотации к изображениям в предпросмотре

Всем привет,

Вместе со своим напарником @vliboolean1010 мы рады представить вам новый компонент темы Discourse — «Аннотатор изображений».

При нажатии на изображение в редакторе активируются следующие функции:

  • Добавление прямоугольников, фигур, стрелок и текста
  • Выделение или цензура частей изображения
  • Выбор и изменение цвета аннотаций
  • Аннотированные изображения автоматически обновляются после нажатия кнопки «Сохранить»
  • Поддержка браузеров, включая Safari, Firefox, Chrome и iOS Safari
  • (Функция обрезки изображения находится в разработке)

Экран установки

Репозиторий: GitHub - discourse/discourse-image-annotator: image annotation theme component · GitHub

Демонстрационное видео

46 лайков

Отличная работа! Это тестировалось с изображениями, размещенными на S3? У меня возникает ошибка перекрестного запроса при включенном S3.

9 лайков

Спасибо большое. Это здорово.

7 лайков

Привет, @davidkingham,

Спасибо за подробное описание проблемы. Пока мы пытаемся её решить, одним из альтернативных решений будет загрузка изображения с вашего локального устройства, а не из онлайн-источников. :slight_smile:

4 лайка

Спасибо, Чун, но это не одно и то же. Я загружаю с локального устройства, но изображение отправляется на конечную точку S3, и именно там возникает проблема.

8 лайков

Думаю, это можно использовать для автоматического добавления водяного знака с именем пользователя на фотографии, но не уверен, как это реализовать. Может быть, добавить кнопку, которая выводит [username]@[домен сайта]?

3 лайка

Есть ли функция, позволяющая делать пометки на фото?

4 лайка

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

По сути, это ограничивает его полезность только для изображений меньше настроек «одной коробки»; наши, например, установлены на 400 x 400.

На этом изображении показаны те же два изображения, одно из которых отредактировано с помощью этого компонента. Компонент делает его нечитаемым.

Если бы вы могли настроить его так, чтобы он редактировал оригинальное изображение, а не версию «одной коробки», это было бы абсолютно превосходно.

Отличное начало, и я определенно вижу его полезность!

4 лайка

Возможно ли редактировать аннотации после сохранения поста?

3 лайка

Похоже, что нет. После завершения редактирования изображение сохраняется заново.

4 лайка

В настоящее время функций такого рода нет.

4 лайка

Ошибка загрузки изображений

ftOaYJktEr

2 лайка

Я переместил это в #theme:broken-theme и добавил тег pr-welcome.

Мне кажется, что для того, чтобы этот компонент стал полноценным рекомендуемым темой, ему потребуется довольно много доработок и поддержки.

6 лайков

Я исправил несколько проблем с аннотированием изображений.
Вот ссылка на PR:

6 лайков

Отлично, спасибо, Нам. Ошибок больше нет, и изображение сохраняется, так что это здорово.

Во время создания этого шедевра я заметил несколько довольно раздражающих моментов в работе с этим инструментом. Несколько раз аннотация инициализировалась не в том месте. И панель инструментов, и область редактирования сдвигались примерно на половину высоты страницы. Не думаешь ли ты, что сможешь выяснить, почему это происходит?

6 лайков

Вот ссылка на PR по удалению Jquery:

7 лайков

Интересно, можно ли добавить в компонент элементы управления «кадрирование» и «поворот» — это, кажется, было бы очень полезно.

9 лайков

Я разберусь с этим как можно скорее!

6 лайков

Никакой спешки, очень рад, что этот компонент наконец-то привлёк к себе внимание — у него огромный потенциал.

9 лайков

Работая с @markvanlan, мы поняли, что вышла новая версия markerjs.
Теперь изображения можно редактировать во всплывающем окне. Это решит множество проблем.
Я сейчас работаю над PR.

9 лайков