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

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

На название меня вдохновил Бизнес-линч Лебедева ^[2].
Отлинчеванные изображения выгледят примерно так:

Аналоги

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

Создание

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

К сожалению, обойти его не получилось, поэтому было принято решение использовать стрелки.
По диагонали стрелки крассиво и аккуратно сделать не получилось, поэтому было решение сделать проще — для каждой стороны.
Автоматическое переключение аннотаций на стороны указания стрелок прикручивать не стали, потому что оно менее понятное, чем простое добавление и удаление для каждой стороны, а мне нравятся простые решения.
Когда внешняя составляющая начала работать, я обратился к другу, который помог сделать бекенд. Прикрутили сохранение аннотаций и генерацию изображений. Добавили генерацию уникального URL.

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

Результат

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

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

Автор: lucius

Источник ^[6]