Sqlury - Квадратные картинки без обрезки
У меня есть хобби. Нужно признаться, нередкое и далеко не оригинальное. Я люблю собирать картинки. Я где-то читала, что когда лайкаешь и репостишь картинки, вырабатываются эндорфины, или происходит что-то подобное. В общем, это пристрастие имеет медицинское объяснение. Я подвержена этому, и могу часами репостить картинки в Tumblr, а особо понравившиеся закидываю себе на стену ВКонтакте.
Но, то ли по недомыслию, то ли наоборот, от большого ума, Стена ВКонтакте в десктопной версии сделана так, что картинки портретной ориентации не заполняют колонку по всей ширине, как это происходит в приложении, и даже не выравниваются по центру, как мобильной версии сайта:
Возможно, разработчики ВК понимают принцип "Mobile first", как то, что десктопную версию можно уже и не доводить до ума. Но мне такая "неровная" Стена совсем не нравится. Поначалу я решила добавлять только картинки альбомной ориентации и квадратные, с одинаковой шириной и высотой. Но так приходилось отбрасывать очень много хороших, стоящих картинок. Потом я приловчилась обрезать "высокие" картинки до квадрата. Но обрезать можно далеко не каждую картинку. Часто из-за обрезки теряется вся эстетическая ценность. И тогда я решила добавлять размытый фон по бокам, чтобы сделать картинку квадратной без обрезки. Но дело в том, что такой функционал доступен во множестве разных мобильных приложений (для Android, по крайней мере), но как я ни искала, не смогла найти онлайн-сервис, который бы позволял делать то же самое (потом мне показали один, но уже потом, и там для того, чтобы "заквадратить" картинку, нужно высчитывать пропорцию, в общем, в фотошопе и то быстрее).
И в конце концов я решила сделать такой онлайн-инструмент сама. Вот что получилось:
http://alisabadass.ml/sqlury/sqlury.html
Если открыть исходный код страницы, наверное можно ужаснуться. Там винегрет, куски чужого кода, найденные то там то тут, которые мне удалось связать в одно. Но для меня главное, что это работает. И я могу постить себе на Стену квадратные картинки без обрезки. Сидя за компьютером, а не только с телефона.
Тем не менее, для телефона эта страница тоже адаптирована. А ещё сделала приложение для Android. Использовала PhoneGap.
Приложение можно скачать с моего сайта на Byethost по ссылке:
http://alisabadass.ml/sqlury/getapk/Sqlury-current.apk
Или воспользовавшись QR-кодом:
Примечания.
# В онлайн-версии кнопка "Поделиться" не работает. В приложении работает. Для standalone-приложения и для сайта находящегося на сервере разные правила для шаринга в соцсетях. В приложении у меня это делается просто плагином cordova-plugin-x-socialsharing, а как сделать на сайте, я пока не разобралась. Можно сделать, если согласиться грузить получившуюся картинку к себе на сервер сначала, но я не хочу. Саму кнопку на сайте оставила в надежде, что смогу найти решение. Ну и просто для красоты.
# В онлайн-версии работает загрузка картинки не только с устройства, но и по ссылке. Вот в этом случае картинка грузится ко мне на сервер. Прочла внимательно про меры безопасности, сделала всё по мануалу. Ну, если всё-таки найдётся кто-то исполненный злых намерений, найдёт уязвимость и решит поломать мой сайт или навредить хостингу, ну что же. Бэкап у меня есть, хостинг бесплатный. Досадно конечно будет, но не смертельно. Надеюсь, что подобного не случится вообще. Полагаюсь на людскую человечность и на принцип Неуловимого Джо.
# Загрузка по ссылке работает не со всех сайтов. Например, картинки с Pinterest, c imgur, из Instagram, из ВК - грузятся. А с Tumblr нет, что печально. У Tumblr, как я поняла, организована проверка, послал ли запрос пользователь через браузер, или скрипт. Соответственно, даётся разный ответ. Но другие сайты, где реализована загрузка по ссылке (тот же imgur.com), как-то это обходят. Мне не удалось. Прописывала маскировку под браузер, не дало результата.
# Картинка-плейсхолдер на месте canvas, это на самом деле инструкция. Но из всех, кто видел, никто не понял, что это она. Мне советовали подписать, мол, Инструкция. Но из соображений дизайна не хочу использовать текст вообще. Всё равно маловероятно, что на страницу попадёт кто-то, не зная, зачем именно.
# Значок с надписью "alisa" на сайте и в приложении, это ссылка на блог в Tumblr. Отношения к делу не имеет. Там у меня находится большая часть картинок, которые я собираю.
# На скриншоте, где мобильный Хром, в адресной строке предупреждение. Это он ругается на незащищённое соединение. Хостинг бесплатный, сертификат самоподписанный.
# Друзья, которым показывала, спрашивали, не собираюсь ли выкладывать приложение в Play, монетизировать, расширять функционал и т.д. Нет, ничего из этого делать не собираюсь. Я делала это для своих нужд и для удовольствия. Если пригодится кому-то ещё, моя выгода - моральная. Буду рада и польщена. Выкладывать и монетизировать что-то буду когда/если научусь делать нормально.
# В коде страницы есть скрипт Яндекс.Метрики. Опять же, никакой комерческой составляющей тут нет. Просто ради удовольствия смотреть, что кто-то заходил.