В этом руководстве мы рассмотрим использование API Filestack для загрузки аватаров для приложений.
Команда Filestack стремится предоставлять все более и более сложные алгоритмы для управления изображениями: это не только для фильтрации или преобразования изображений, но и для предоставления пользователям полного API для облегчения разработки приложений.
На самом деле мы не первый раз работаем с распознаванием лиц, в прошлом я описывал шаги по размытию лица персонажей для приложения Угадай игру. Очевидно, что распознавание лиц открывает двери для множества сценариев, где оно пригодится, поэтому сегодня я собираюсь показать вам, как создавать аватары профиля для вашего следующего веб-сайта!
Приложение
Как обычно, приложение состоит из нескольких страниц, на которых мы сначала загружаем и настраиваем аватар, а затем видим результат в простом списке:
/index.html
/add.html
Для создания приложения я использовал Node.js и JQuery + Google MDL. Вы всегда можете клонировать/форкнуть его на моем github!
Создать аватар
Итак, как мы создаем аватары или изображения профиля? Просто выполните следующие три шага:
- Загрузите изображение.
- Обрезать лицо.
- Скруглите углы.
Все эти шаги можно выполнить с помощью нескольких строк кода!
Чтобы проиллюстрировать их, давайте начнем со второго, затем с третьего и, наконец, вернемся к первому.
Обрезать лицо
В качестве первого шага нам нужно извлечь лицо из изображения. Мы можем сделать это через 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 г.