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

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

Помимо миниатюр, iStock также предлагал функцию масштабирования, которая позволяла прокручивать большую версию фотографии. Мне пришло в голову, что я мог бы использовать это, чтобы получить более крупную композицию с водяным знаком для загрузки?

Версия 1

В 2012 году функция масштабирования iStock загрузила более крупное изображение, разбитое на плитки. Я предполагаю, что это было сделано для того, чтобы люди не загружали большую версию, поскольку я сомневаюсь, что это будет механизмом экономии полосы пропускания.

Как бы то ни было, я был неустрашим и готов принять вызов. Моей первой попыткой решить проблему, чтобы доказать, что это возможно, был пользовательский скрипт. Это фрагмент JavaScript, который можно запустить с помощью расширения, такого как GreaseMonkey или NinjaKit, во многом так же, как и собственное расширение браузера. Это очень быстрый способ прототипирования идеи.

После того, как концепция была проверена, я написал расширения для Safari и Chrome. При запуске — через измененную ссылку на странице — расширение будет увеличивать изображение до максимального уровня, затем программно захватывать каждую плитку, объединять плитки вместе на элементе холста HTML5 и, наконец, преобразовывать холст в большое изображение JPEG, которое может легко скачать.

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

Версия 2

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

Как разработчик программного обеспечения вы учитесь быть готовым убить своих любимцев при любом рефакторинге.

Версия 3

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

В этой версии добавлена ​​ссылка — зеленая кнопка «Скачать большую композицию» — под существующей красной кнопкой «Скачать это фото». Прелесть этой новой ссылки в том, что она более удобна и удобна, чем предыдущие версии инструмента.

Загрузка может быть запущена несколькими способами:

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

Эта версия, надеюсь, продлится какое-то время, но я буду следить за ней. Исходный код, разумеется, есть на GitHub.

Последние мысли

У меня есть много забавных расширений строительства. Не только потому, что это включает в себя программирование, манипулирование DOM с использованием JavaScript и немного HTML и CSS для стилей. Для меня настоящее удовольствие заключается в деконструкции внутренней работы веб-страницы — я думаю, вы могли бы назвать это обратным проектированием — и последующем внедрении решения, которое будет не только хорошо работать, но и устойчиво к поломке при малейших изменениях на странице. он модифицируется.

Контакт

Свяжитесь с нами, если ваши проекты требуют внимания к деталям на уровне бывшего Apple.