linch.me — добавление аннотаций к изображением

в 3:03, , рубрики: аннотации, Артемий Лебедев, линч, я пиарюсь, метки: ,

linch.me — добавление аннотаций к изображением

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

На название меня вдохновил Бизнес-линч Лебедева.
Отлинчеванные изображения выгледят примерно так:
linch.me — добавление аннотаций к изображением

Аналоги

www.pixtick.com — флеш.
www.marqueed.com — регистрация.
www.bounceapp.com — только текст и без сносок.
Кроме того, их объединял один фатальный недостаток.
Резюме: нужен свой велосипед.

Создание

Отброшены были возможные решения с канвасом, флешем и прочими новыми технологиями и сделана ставка на тёплые ламповые изображения и html. Хостингов изображений сейчас много, и использовать можно любой. При помощи некоторых инструментов можно получать ссылки на изображения, загруженные на Dropbox.
Сначала хотелось использовать аккуратные треугольники для стрелок, но вылез неприятный баг в фаерфоксе:
linch.me — добавление аннотаций к изображением
К сожалению, обойти его не получилось, поэтому было принято решение использовать стрелки.
По диагонали стрелки крассиво и аккуратно сделать не получилось, поэтому было решение сделать проще — для каждой стороны.
Автоматическое переключение аннотаций на стороны указания стрелок прикручивать не стали, потому что оно менее понятное, чем простое добавление и удаление для каждой стороны, а мне нравятся простые решения.
Когда внешняя составляющая начала работать, я обратился к другу, который помог сделать бекенд. Прикрутили сохранение аннотаций и генерацию изображений. Добавили генерацию уникального URL.

Видео использования

Результат

http://linch.me/ — пользуйтесь на здоровье!

P.S. Бонус: если нашим сайтом будут пользоваться больше, чем фейсбуком — то мы добавим веселый фон!

Автор: lucius

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js