В этом руководстве мы рассмотрим использование API Filestack для загрузки аватаров для приложений.

Команда Filestack стремится предоставлять все более и более сложные алгоритмы для управления изображениями: это не только для фильтрации или преобразования изображений, но и для предоставления пользователям полного API для облегчения разработки приложений.

На самом деле мы не первый раз работаем с распознаванием лиц, в прошлом я описывал шаги по размытию лица персонажей для приложения Угадай игру. Очевидно, что распознавание лиц открывает двери для множества сценариев, где оно пригодится, поэтому сегодня я собираюсь показать вам, как создавать аватары профиля для вашего следующего веб-сайта!

Приложение

Как обычно, приложение состоит из нескольких страниц, на которых мы сначала загружаем и настраиваем аватар, а затем видим результат в простом списке:

/index.html

/add.html

Для создания приложения я использовал Node.js и JQuery + Google MDL. Вы всегда можете клонировать/форкнуть его на моем github!

Создать аватар

Итак, как мы создаем аватары или изображения профиля? Просто выполните следующие три шага:

  1. Загрузите изображение.
  2. Обрезать лицо.
  3. Скруглите углы.

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

Обрезать лицо

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

Если вы посмотрите документацию, то одно из преобразований изображения — это распознавание лиц, что нам и нужно.

На этой странице описаны различные ситуации и много примеров, но в нашем случае давайте сосредоточимся на процессе crop_faces:

Документация предоставляет нам синтаксис на тот случай, если мы устанавливаем ключ API локально в проекте или предпочитаем отправлять его в запросе процесса.
В моем случае я обычно устанавливаю ключ локально, чтобы URL-адрес процесса был короче. Вот основной синтаксис:

https://process.filestackapi.com/crop_faces=[options]/Filestack_FileLink_Handle

Мы можем установить несколько параметров, перечисленных в документации, для урока я решил установить mode:fill, так как он отдает приоритет параметрам ширины и высоты, а не отображению всего объекта лица.

Примечание: Filestack_FileLink_Handle — это не что иное, как дескриптор файла, который мы получаем при загрузке файла, прикрепленного к ссылке CDN.

Например, рассмотрим следующую картинку:

Гэндальф хочет обрезать свое лицо на картинке… Давайте поможем ему.
Как только мы загрузим картинку с помощью функции pick, мы получим обратно объект Blob со ссылкой на CDN (а также другие фрагменты информации).

https://cdn.filestackcontent.com/06Ki2xTu2hb83EH8DymA

Давайте теперь обрежем дескриптор файла 06Ki2xTu2hb83EH8DymA и создадим новый URL:

https://process.filestackapi.com/crop_faces=mode:fill/48lbThHGTEOzSCAodc

и результат следующий:

Именно то, что искал серый пилигрим!

За углом

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

В разделе граница и эффекты преобразования изображения хорошо объяснено, как это сделать:

https://process.filestackapi.com/rounded_corners=[options]/Filestack_FileLink_Handle

К счастью, мы можем соединить его с предыдущим преобразованием crop_faces следующим образом:

https://process.filestackapi.com/crop_faces=[options]/rounded_corners=[options]/Filestack_FileLink_Handle

Доступно несколько вариантов, но я использую только rounded_corners=radius:1 to 10000.
Давайте посмотрим, как выглядит аватар Гэндальфа с rounder_courners=radius:10000. >:

В приложении я добавил ползунок, чтобы пользователь мог выбирать в диапазоне от 1 до 10000, поскольку выбор субъективен.

Загрузить картинку

Загрузка изображения — это нечто очень тривиальное, поскольку я рассказываю об этом в каждом руководстве.
Мы просто запускаем функцию pick с несколькими параметрами в объекте параметров:

filepicker.pick (
      {
        mimetype: 'image/*',
        container: 'modal',
        services: ['COMPUTER', 'FACEBOOK', 'INSTAGRAM', 'URL', 'IMGUR', 'PICASA'],
        openTo: 'COMPUTER'
      },
      function (Blob) {
        console.log(JSON.stringify(Blob));
        handler = Blob.url.substring(Blob.url.lastIndexOf('/') + 1);
        $('#profile-pic').attr('src', `https://process.filestackapi.com/crop_faces=mode:fill/rounded_corners=radius:${$('.mdl-js-slider').val()}/${handler}`);
      },
      function (FPError) {
        console.log(FPError.toString());
      }
    );
  • MIME-тип допускает только изображения.
  • Интерфейс загрузки содержится в модальном окне.
  • Сервис для загрузки определяется в массиве сервисов.
  • Наконец, первым выбором является пользовательское устройство.

Вот, собственно, и все, вырезаем обработчик из свойства Blob.url и создаем новый URL для обработки картинки.

Это все для этого урока, поздравляем!

Выводы

В этом уроке мы использовали Filestack, чтобы избежать проблем с кадрированием и скруглением углов аватаров. Мы использовали два из многочисленных API-интерфейсов процессов Filestack, которые помогли нам в решении этой задачи.
Кроме того, мы изучили основы использования API-интерфейсов процессов, и теперь вы готовы интегрировать их во все свои проекты!

Первоначально опубликовано на blog.filestack.com 28 ноября 2016 г.