Блог

Полезные статьи и новости о жизни WaveAccess

Обработка изображений с помощью ImgIx

В процессе разработки веб-интерфейсов работа с изображениями имеет особое значение. Плохое качество графики оттолкнет пользователей, а большое количество картинок в высоком разрешении утяжелит страницу и сделает приложение неприемлемо медленным. Подобные сложности обычно решаемы за счет сетей доставки контента (Conten Delivery Network, CDN), но как быть, если вам нужно обработать изображение непосредственно перед отображением на странице?

Processing Images Using Imglx

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

Выход есть – ImgIx. Это надстройка над CDN (Amazon CloudFront), который позволяет выполнять обработку изображений в реальном времени перед добавлением в кэш. ImgIx предоставляет широкий функционал для работы с изображением без потери качества, а также ряд дополнительных функций оптимизации, например, Monochrome, Blur, Halftone и т.д.

На данный момент все файлы, загруженные на ImgIx, обрабатываются с помощью серверов, которые основаны на графическом фреймворке OS X. Это обеспечивает высокую производительность, что имеет большое значение при хранении данных в облаке (ssd based CDN).

 

Начало работы с ImgIx. Выбираем источник данных

Прежде всего, для начала работы с ImgIx необходимо создать источник и развернуть его. Существует несколько типов источников, которые соединяют ImgIx с хранилищем изображений. Рассмотрим 3 основных:

  1. Amazon S3: Подключение к существующей Amazon S3 bucket со своими учетными данными. Amazon Simple Storage Service – это файловый хостинг с высокой скоростью передачи данных, гарантирующий безопасное и надежное хранение наших файлов. Главным преимуществом Amazon S3 является его экономичность - мы платим только за используемый объем хранилища, без дополнительных затрат.
  2. Web Folder: Протокол передачи данных через интернет. В данном случае источник подключается к существующим папкам файлов, находящимся на нашем сайте. Нет необходимости обращаться к сторонним хранилищам и повторно загружать материалы.
  3. Web Proxy: Прокси-сервер для загрузки любого доступного изображения. Этот источник может подключиться к любому изображению в интернете с помощью указанного url-адреса. Такой способ кажется наиболее простым в использовании, но здесь разработчики ImgIx требуют проверить безопасность файлов, а также обязательно указывать источник используемых изображений.

К каждому источнику предъявляются индивидуальные требования для работы с ImgIx. У каждого из них существуют дополнительные параметры, которые необходимо задать перед началом использования сервиса.

 

Пример реализации работы с сервисом Java

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

Для обработки изображений необходимо всего лишь добавить нужный атрибут в url, как это представлено на главной странице сайта. Следовательно, для работы с ImgIx предлагаем использовать DSL, так как считаем это хорошим решением для поставленной задачи.

Создаем интерфейс IImgIxBuilder и его реализацию с необходимыми нам методами (каждый метод, в данном случае, будет один раз изменен в ImgIx). К примеру, чтобы задать конечные Width, Height - нужно задать к нашему пути (S3 bucket - картинке) параметры w=PARAM&h=PARAM

Следовательно, создаем enum доступных атрибутов:

   public enum ImgIxParams {
        WIDTH("w"),
        HEIGHT("h")
		...
    } 

и сами методы:

   public IImgIxBuilder setWidth(String width) {
        this.width = width;
        return this;
    }

    public IImgIxBuilder setHeight(String height) {
        this.height = height;
        return this;
    } 

Так же необходимо указать обязательные аргументы в конструкторе: imgIx domain (который мы указывали при настройке source) и оригинальный путь к картинке в S3.

И результирующий метод: public String makeLink(), который будет собирать конечную ссылку для imgIx сервиса.

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

    builder.setWidth("480")
                .setHeight("300")
                .setTrim("auto", "black", "9", "8", "")
                .setAuto("enhance")
                .setMonochrome("f00")
                .setExtension("jpg"); 

После чего мы сможем ее использовать по своему усмотрению.


Анализ изображений

ImgIx сервис так же можно использовать для анализа картинок. К примеру, взять палитру цветов.

    IImgIxBuilder builder = new CImgIxBuilder(domain, "amazonImgPath");
        builder.setWidth("480")
                .setHeight("300")
                .setExtension(ext)
                .setQuality("75")
                .setTrim("auto", "black", "9", "8", "")
                .setAuto("enhance")
                .setFit("crop")
                .setPalette("json");
CPaletteJson paletteJson = CImgIxDownloader.downloadPaletteJson(builder.makeLink()); 

В результате получился отличный IImgIxBuilder, не привязанный ни к одной из настроек source (мы задали лишь imgIx domain).

 

Тестирование
Сам IImgIxBuilder можно покрыть unit-тестами и без аккаунта imgIx. Его главная задача — создавать правильные url. Следовательно, достаточно проверить следующие параметры:

        @Test
    public void builderShouldChangeAuto() throws Exception {
        IImgIxBuilder builder = new CImgIxBuilder(domain, "amazonImgPath");
        builder.setAuto("enhance");
        assertTrue(StringUtils.equals(getParamByName(builder.makeLink(), CImgIxBuilder.ImgIxParams.AUTO.getParamName()).getValue(), "enhance"));
    }

    @Test
    public void builderShouldChangeFit() throws Exception {
        IImgIxBuilder builder = new CImgIxBuilder(domain, "amazonImgPath");
        builder.setFit("crop");
        assertTrue(StringUtils.equals(getParamByName(builder.makeLink(), CImgIxBuilder.ImgIxParams.FIT.getParamName()).getValue(), "crop"));
    } 

Заключение
ImgIx показал себя как простой и удобный сервис для работы с изображениями, не требующий дополнительных усилий на его реализацию. Также одним из преимуществ ImgIx является доступная цена.

Полезные ссылки
https://www.imgix.com/
https://docs.imgix.com/apis/url

Заказать звонок

Удобное время:

Отменить

Пишите!

Присоединить
Файл не больше 30 Мб.
Отменить