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

Я обновил его до markerjs2 и очистил код.
Вот ссылка на PR:

7 лайков

Улучшения редактора просто замечательные, и они позволили избавиться от огромного количества кода :clap:

К сожалению, после сохранения правки пост перестал отображаться, так как разметка Markdown не совсем корректна. Похоже, что разбор строки выполнен неверно.

На верхнем изображении показана разметка Markdown для файла до редактирования. После редактирования видно, что компонент запутался из-за (1) в имени файла и включил это в путь загрузки — обратите внимание на (1upload. Теперь, когда темы могут включать JS-тесты, давайте добавим тест для проверки разбора имени файла.

Я временно отключу компонент темы здесь на Meta, пока это не будет исправлено. Он уже помечен как #theme:broken-theme, так что ничего нового :slight_smile:

7 лайков

Я исправил ошибку, при которой неправильно определялись скобки при поиске URL изображения.
Вот ссылка на PR:

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

6 лайков

Привет, Нам,

Компонент теперь установлен на Meta, и я его тестирую!

Несколько замечаний:

  1. Неясно, как открыть редактор. Я бы рекомендовал добавить здесь какое-то указание (возможно, всплывающую подсказку со словом «Редактировать» или значком карандаша в области предпросмотра):

  1. Возникает серьёзный конфликт z-index с композером: изображение оказывается позади композера. Приходится сильно уменьшать композер, чтобы увидеть всё изображение.

  2. Изображения, которые редактируются, выглядят огромными. Есть ли способ сохранить их исходные размеры при редактировании?

6 лайков

Спасибо большое за обратную связь!
Я работаю над замечанием №1. Я изменю их стиль, но кнопки «ANNOTATE» или «CROP» будут открывать запрошенный инструмент.

По поводу замечания №2, не могли бы вы уточнить проблему?

Я скоро займусь пунктом №3.

6 лайков

Конечно:

Компоновщик отображается поверх редактора изображений, поэтому я не могу нормально редактировать, пока не уменьшу компоновщик.

Огромное спасибо за всю вашу замечательную работу здесь!

3 лайка

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

4 лайка

А, я понял, что здесь происходит. Не могли бы вы протестировать тему «сфокусированная боковая панель», которая включена только для команды Discourse (и является частью продукта Discourse for Teams)?

Мое предположение: вам нужно немного увеличить значение z-index. @markvanlan помогает с этим.

4 лайка

@Nam Принято отличное изменение, позволяющее обрезать и поворачивать изображения. Теперь после нажатия на изображение (только локальная загрузка) появляется этап выбора, где можно либо добавить аннотации, либо обрезать/повернуть изображение. :clap:

Единственная проблема сейчас — ещё одна ошибка с z-index, но уже в модальном окне обрезки (z-index модального окна аннотаций указан верно). У внешнего элемента модального окна обрезки нет стабильного className, поэтому я открыл PR для библиотеки cropro, чтобы добавить его.

Редактирование:
Я форкнул репозиторий и внёс небольшое необходимое изменение. Проблема с z-index больше не возникает.

4 лайка

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

3 лайка

У меня проблема, не получается.

1 лайк

Прошел уже год, поэтому я в отчаянии спрашиваю снова, так как у этого проекта столько потенциала: есть ли хоть какая-то надежда на поддержку изображений, размещенных на S3, и использование CDN? :grin:

2 лайка

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

1 лайк

Интересно, я попробовал на другом сайте, где сейчас отключены все плагины и TC, и у меня та же проблема, но всё работает, если отключить S3. Есть какие-то идеи? Изображение тоже странно растянуто: должно быть в пропорции 2:3, но оно растягивается на всю ширину экрана.

3 лайка

Указано ли в вашем app.yml значение DISCOURSE_ENABLE_CORS: true?

2 лайка

Нет, у меня нет этой строки, и в настройках сайта cors-origins тоже ничего не задано.

1 лайк

Попробуйте настроить это и выполнить повторную сборку.

2 лайка

Проблема сохраняется после включения/пересборки. Нужно ли что-то настраивать для cors-origins или DISCOURSE_CORS_ORIGIN?

1 лайк

У меня проблема: невозможно отредактировать выполненное.

2021-09-20_16-46-24

1 лайк

Когда я пытаюсь сделать это на смартфоне, текущее изображение не редактируется, а заменяется следующее (соседнее с текущим).

Можете ли вы проверить это?

1 лайк