Создавайте красивые постеры с преобразованием коллажей в Filestack

Я никогда не устаю повторять: Filestack прекрасно справляется с работой с изображениями.

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

И, кстати, когда вы будете готовы превратить свое приложение в бизнес, обязательно ознакомьтесь с другим нашим постом о том, как интегрировать Snipcart для функциональности корзины покупок plug-and-play.

Стопка постеров

Итак, это название приложения (я вовсе не оригинален), но как оно на самом деле работает?

В двух словах, мы позволяем пользователям загружать сразу несколько изображений и определять размер постера, чтобы Filestack API обрабатывал их и возвращал коллаж. Посмотреть демонстрационное приложение вживую можно здесь: https://posterstack.herokuapp.com/.

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

Давайте посмотрим на домашнюю страницу:

Поскольку мы хотим создать ощущение приложения службы плакатов, у нас есть хорошая карусель вместо статического jumbotron в верхней части главной страницы: это можно использовать в дальнейшем для например показать карусель с последними 4-5 загруженными постерами. В конце концов, благодаря Filestack у нас есть полный контроль над окончательным размером постера.

Наконец, давайте взглянем на страницу загрузки:

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

И последнее, но не менее важное: приложение создано с помощью node.js и JQuery, так как исходный код можно найти здесь.

Загрузка нескольких файлов

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

Команда Filestack заботится о каждой детали, поэтому на помощь приходит функция pickMultiple:

По сути, это то же самое, что и pick, но параметр options позволяет свойству определять максимальное количество изображений, загружаемых за один вызов.

Итак, давайте посмотрим на код:

filepicker.pickMultiple( { mimetype: 'image/*', hide: true, services: ['COMPUTER', 'BOX', 'IMGUR','DROPBOX', 'GOOGLE_DRIVE', 'FACEBOOK', 'INSTAGRAM', 'URL'], maxFiles: 7 }, function(Blob){ console.log(JSON.stringify(Blob)); var url = createUrl(Blob); //Create the correct URL for the poster _this.data("doc-url", url); setTimeout(previewImage(url), 2000); }, function(FPError){ console.log(FPError.toString()); }, function(FPProgress){ console.log(parseInt(FPProgress.progress)); progressPercentage = parseInt(FPProgress.progress) + '%'; $('.progress-bar').css('width', progressPercentage).text(progressPercentage); });

Параметр option определяется следующим образом:

1. Свойство mimetype ограничивает загружаемые файлы простыми изображениями, мы видели это свойство уже много раз, и я определенно предпочитаю его, чем расширение.

2. Мы скрываем модальное окно сразу после выбора изображений, чтобы воспользоваться функцией onProgress и анимировать индикатор выполнения, созданный с помощью Bootstrap. Опять же, на протяжении всего процесса загрузки будет запущена функция onProgress, чтобы вернуть текущий процент выполнения.

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

4. Наконец, maxFiles, который управляет количеством одновременных загрузок, установлен на 7, что достаточно справедливо!

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

Создание коллажа

Я думаю, нам следует взглянуть на функцию createUrl, потому что она манипулирует конечным результатом в объекте Blob:

var createUrl = function(Blob) { var url = 'https://process.filestackapi.com/collage=files:['; var handlerList = []; var firstImage; Blob.forEach(function(image, index){ if(index > 0) { //The first image is put at the end of the url handlerList.push(image.url.substring(image.url.lastIndexOf('/') + 1)); } else { firstImage = image.url.substring(image.url.lastIndexOf('/') + 1); } }); url += handlerList.join() + ']'; //Set the final size url += ',width:' + ($('#width').val() || 1450); url += ',height:' + ($('#height').val() || 700); url += ',fit:crop/' + firstImage; // fit:crop for a result close to the set size return url; }

Я максимально упростил логику для легкого понимания шагов по созданию конечного URL:

Прежде всего, функция выбора возвращает файл JSON с некоторой информацией о завершенной загрузке, а также URL-адрес изображения.

Отлично, pickMultiple делает то же самое, но на этот раз изображений больше одного, поэтому вместо этого нам приходится иметь дело с массивом!

Кроме того, поскольку мы используем дескриптор Filestack, нам нужно извлечь его из URL-адреса, как вы можете заметить из цикла.

Наконец, параметры size и fit объединяются, а также первое изображение, которое становится дескриптором filelink в конце URL-адреса.

Примечание: обратите внимание, что если пользователи не укажут размер плаката, по умолчанию он будет 1450 x 700.

Давайте попробуем сделать плакат! Я только что сделал один о стране, в которой я сейчас живу, Тайване:

И давайте посмотрим на конечный URL:

https://process.filestackapi.com/collage=files:[6Oqg1Xg8TJin3NN66XuS,Ioj4IEePQpGDFvHBPKBT,T7Ko2GLTZSeEpRK33BpN,Zl0cOpySdWA4QVWNR1Kk,0fkJg2oZRqSNJKhcM6BQ],width:1450,height:700,fit:crop/IxWdhJlRLqWIMPLwSk2E

Вы можете заметить список дескрипторов стека файлов, параметры размера и подгонки, дескриптор ссылки на файл.

Экспорт файла

Теперь на главной странице у нас есть новая запись, и мы можем ее экспортировать:

Давайте посмотрим на функцию экспорта, прикрепленную к кнопке:

var exportData = function(url) { var options = { suggestedFilename: 'myFilestackPoster', mimetype: 'image/jpeg', services: ['COMPUTER', 'FACEBOOK'], openTo: 'COMPUTER' }; filepicker.exportFile( url, options, function(Blob){ console.log(Blob); }); }

Первый параметр — это URL-адрес экспортируемого файла, затем мы передаем объект параметров для функции exportFile:

1. SuggestedFilename — предлагаемое имя для изображения.

2. Мы определили MIME-тип, чтобы пользователи могли сохранять его в виде файла .jpeg.

3. Мы разрешаем пользователям экспортировать его только на свое локальное устройство или в Facebook с помощью свойства services.

4. OpenTo определяет начальную предлагаемую службу, в которую пользователь может экспортировать.

… И, наконец, функция onSuccess для регистрации возвращенного Blob.

Это все! Мы дошли до конца и у нас есть работающее приложение.

Выводы

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

Мы прошли все этапы создания и сохранения коллажа, показав, как использовать функцию pickMultiple и сходство с pick.

Мы последовательно проанализировали API Filestack для обработки исходных изображений для создания коллажа, а также написали функцию, позволяющую легко создать URL-адрес для этого.

Наконец, благодаря функции exportFile мы позволяем пользователям экспортировать свои собственные творения.

Поздравляю!

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