• Официальный сайт SDK
  • Сайт с примерами кода

Использование Images API

Введение

Интерфейс Images API позволяет производить наиболее часто используемые операции по обработке изображений: изменение размера, повороты, подстройка цветности и контрастов. Все эти операции обычно выполняются при загрузке пользователем на сервер файла с изображением или фотографией. Этот документ описывает процесс загрузки, обработки, сохранения и выдачи динамических изображений. Мы будем использовать код учебного приложения 'Гостевая книга' и внесем в него изменения для того, чтобы позволить пользователям размещать их аватары вместе с сообщениями.

Создание свойства для изображения

Первое, что необходимо сделать - обновить код модели и добавить в нее новое поле для сохранения бинарных данных изображения.

CmNsYXNzIEdyZWV0aW5nKGRiLk1vZGVsKToKYXV0aG9yID0gZGIuVXNlclByb3BlcnR5KCkKY29udGVudCA9IGRiLlN0cmluZ1Byb3BlcnR5KG11bHRpbGluZT1UcnVlKQo8Yj5hdmF0YXIgPSBkYi5CbG9iUHJvcGVydHkoKTwvYj4KZGF0ZSA9IGRiLkRhdGVUaW1lUHJvcGVydHkoYXV0b19ub3dfYWRkPVRydWUpCg===

Загрузка пользователями изображений

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

CnNlbGYucmVzcG9uc2Uub3V0LndyaXRlKCIiIgombHQ7Zm9ybSBhY3Rpb249Ii9zaWduIiA8Yj5lbmN0eXBlPSJtdWx0aXBhcnQvZm9ybS1kYXRhIjwvYj4gbWV0aG9kPSJwb3N0IiZndDsKJmx0O2RpdiZndDsmbHQ7bGFiZWwmZ3Q7TWVzc2FnZTombHQ7L2xhYmVsJmd0OyZsdDsvZGl2Jmd0OwombHQ7ZGl2Jmd0OyZsdDt0ZXh0YXJlYSBuYW1lPSJjb250ZW50IiByb3dzPSIzIiBjb2xzPSI2MCImZ3Q7Jmx0Oy90ZXh0YXJlYSZndDsmbHQ7L2RpdiZndDsKPGI+Jmx0O2RpdiZndDsmbHQ7bGFiZWwmZ3Q7QXZhdGFyOiZsdDsvbGFiZWwmZ3Q7Jmx0Oy9kaXYmZ3Q7CiZsdDtkaXYmZ3Q7Jmx0O2lucHV0IHR5cGU9ImZpbGUiIG5hbWU9ImltZyIvJmd0OyZsdDs8L2I+Jmx0Oy9kaXYmZ3Q7CiZsdDtkaXYmZ3Q7Jmx0O2lucHV0IHR5cGU9InN1Ym1pdCIgdmFsdWU9IlNpZ24gR3Vlc3Rib29rIiZndDsmbHQ7L2RpdiZndDsKJmx0Oy9mb3JtJmd0OwombHQ7L2JvZHkmZ3Q7CiZsdDsvaHRtbCZndDsiIiIpCg===

Этот код добавляет к форме два поля.

После этого необходимо обновить код обработчика приложения и добавить к нему возможность извлечения содержимого файла с изображением из запроса и сохранения его в хранилище с типом Blob.

CmNsYXNzIEd1ZXN0Ym9vayh3ZWJhcHAuUmVxdWVzdEhhbmRsZXIpOgpkZWYgcG9zdChzZWxmKToKZ3JlZXRpbmcgPSBHcmVldGluZygpCmlmIHVzZXJzLmdldF9jdXJyZW50X3VzZXIoKToKZ3JlZXRpbmcuYXV0aG9yID0gdXNlcnMuZ2V0X2N1cnJlbnRfdXNlcigpCmdyZWV0aW5nLmNvbnRlbnQgPSBzZWxmLnJlcXVlc3QuZ2V0KCJjb250ZW50IikKPGI+YXZhdGFyID0gc2VsZi5yZXF1ZXN0LmdldCgiaW1nIikKZ3JlZXRpbmcuYXZhdGFyID0gZGIuQmxvYihhdmF0YXIpPC9iPgpncmVldGluZy5wdXQoKQpzZWxmLnJlZGlyZWN0KCcvJykK=

Преобразование изображений

Интерфейс Images API позволяет использовать несколько видов операций обработки изображений.

Изменение размера

Вы можете изменить размер изображения и сохранить его существующие пропорции.

  

Поворот

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

  

Горизонтальный переворот

Вы можете зеркально перевернуть изображение по-горизонтали.

  

Вертикальный переворот

Вы можете зеркально перевернуть изображение по-вертикали.

  

Кадрирование

Вы можете выполнить обрезку части изображения.

  

I'm Feeling Lucky

Волшебная операция "I'm Feeling Lucky" выполняет улучшение баланса цветности изображения и приводит его к оптимальным уровням.

  

Для нашего приложения 'Гостевая книга' мы хотим добавить поддержку пользовательских аватаров размера 32x32 пикселей. Сначала необходимо импортировать модуль google.appengine.api.images. Затем нужно вызвать функцию resize и передать ей данные изображения.

CjxiPmZyb20gZ29vZ2xlLmFwcGVuZ2luZS5hcGkgaW1wb3J0IGltYWdlczwvYj4KY2xhc3MgR3Vlc3Rib29rKHdlYmFwcC5SZXF1ZXN0SGFuZGxlcik6CmRlZiBwb3N0KHNlbGYpOgpncmVldGluZyA9IEdyZWV0aW5nKCkKaWYgdXNlcnMuZ2V0X2N1cnJlbnRfdXNlcigpOgpncmVldGluZy5hdXRob3IgPSB1c2Vycy5nZXRfY3VycmVudF91c2VyKCkKZ3JlZXRpbmcuY29udGVudCA9IHNlbGYucmVxdWVzdC5nZXQoImNvbnRlbnQiKQo8Yj5hdmF0YXIgPSBpbWFnZXMucmVzaXplKHNlbGYucmVxdWVzdC5nZXQoImltZyIpLCAzMiwgMzIpPC9iPgpncmVldGluZy5hdmF0YXIgPSBkYi5CbG9iKGF2YXRhcikKZ3JlZXRpbmcucHV0KCkKc2VsZi5yZWRpcmVjdCgnLycpCg===

Работа с динамическими изображениями

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

CmNsYXNzIEltYWdlICh3ZWJhcHAuUmVxdWVzdEhhbmRsZXIpOgpkZWYgZ2V0KHNlbGYpOgpncmVldGluZyA9IGRiLmdldChzZWxmLnJlcXVlc3QuZ2V0KCJpbWdfaWQiKSkKaWYgZ3JlZXRpbmcuYXZhdGFyOgpzZWxmLnJlc3BvbnNlLmhlYWRlcnNbJ0NvbnRlbnQtVHlwZSddID0gImltYWdlL3BuZyIKc2VsZi5yZXNwb25zZS5vdXQud3JpdGUoZ3JlZXRpbmcuYXZhdGFyKQplbHNlOgpzZWxmLmVycm9yKDQwNCkK=

Обработчик будет извлекать параметр img_id из пользовательского запроса. Теперь необходимо добавить к коду приложения передачу правильных ссылок на динамические изображения

CjxiPnNlbGYucmVzcG9uc2Uub3V0LndyaXRlKCImbHQ7ZGl2Jmd0OyZsdDtpbWcgc3JjPSdpbWc/aW1nX2lkPSVzJyZndDsmbHQ7L2ltZyZndDsiICUKZ3JlZXRpbmcua2V5KCkpPC9iPgpzZWxmLnJlc3BvbnNlLm91dC53cml0ZSgnICVzJmx0Oy9kaXYmZ3Q7JyAlCmNnaS5lc2NhcGUoZ3JlZXRpbmcuY29udGVudCkpCg===

Ниже приведен полный код модифицированного приложения:

CmltcG9ydCBjZ2kKaW1wb3J0IGRhdGV0aW1lCmltcG9ydCB3c2dpcmVmLmhhbmRsZXJzCmltcG9ydCBsb2dnaW5nCmZyb20gZ29vZ2xlLmFwcGVuZ2luZS5leHQgaW1wb3J0IGRiCmZyb20gZ29vZ2xlLmFwcGVuZ2luZS5hcGkgaW1wb3J0IHVzZXJzCmZyb20gZ29vZ2xlLmFwcGVuZ2luZS5leHQgaW1wb3J0IHdlYmFwcApmcm9tIGdvb2dsZS5hcHBlbmdpbmUuYXBpIGltcG9ydCBpbWFnZXMKbG9nZ2luZy5nZXRMb2dnZXIoKS5zZXRMZXZlbChsb2dnaW5nLkRFQlVHKQpjbGFzcyBHcmVldGluZyhkYi5Nb2RlbCk6CmF1dGhvciA9IGRiLlVzZXJQcm9wZXJ0eSgpCmNvbnRlbnQgPSBkYi5TdHJpbmdQcm9wZXJ0eShtdWx0aWxpbmU9VHJ1ZSkKYXZhdGFyID0gZGIuQmxvYlByb3BlcnR5KCkKZGF0ZSA9IGRiLkRhdGVUaW1lUHJvcGVydHkoYXV0b19ub3dfYWRkPVRydWUpCmNsYXNzIE1haW5QYWdlKHdlYmFwcC5SZXF1ZXN0SGFuZGxlcik6CmRlZiBnZXQoc2VsZik6CnNlbGYucmVzcG9uc2Uub3V0LndyaXRlKCcmbHQ7aHRtbCZndDsmbHQ7Ym9keSZndDsnKQpxdWVyeV9zdHIgPSAiU0VMRUNUICogRlJPTSBHcmVldGluZyBPUkRFUiBCWSBkYXRlIERFU0MgTElNSVQgMTAiCmdyZWV0aW5ncyA9IGRiLkdxbFF1ZXJ5IChxdWVyeV9zdHIpCmZvciBncmVldGluZyBpbiBncmVldGluZ3M6CmlmIGdyZWV0aW5nLmF1dGhvcjoKc2VsZi5yZXNwb25zZS5vdXQud3JpdGUoJyZsdDtiJmd0OyVzJmx0Oy9iJmd0OyB3cm90ZTonICUgZ3JlZXRpbmcuYXV0aG9yLm5pY2tuYW1lKCkpCmVsc2U6CnNlbGYucmVzcG9uc2Uub3V0LndyaXRlKCdBbiBhbm9ueW1vdXMgcGVyc29uIHdyb3RlOicpCnNlbGYucmVzcG9uc2Uub3V0LndyaXRlKCImbHQ7ZGl2Jmd0OyZsdDtpbWcgc3JjPSdpbWc/aW1nX2lkPSVzJyZndDsmbHQ7L2ltZyZndDsiICUKZ3JlZXRpbmcua2V5KCkpCnNlbGYucmVzcG9uc2Uub3V0LndyaXRlKCcgJXMmbHQ7L2RpdiZndDsnICUKY2dpLmVzY2FwZShncmVldGluZy5jb250ZW50KSkKc2VsZi5yZXNwb25zZS5vdXQud3JpdGUoIiIiCiZsdDtmb3JtIGFjdGlvbj0iL3NpZ24iIGVuY3R5cGU9Im11bHRpcGFydC9mb3JtLWRhdGEiIG1ldGhvZD0icG9zdCImZ3Q7CiZsdDtkaXYmZ3Q7Jmx0O2xhYmVsJmd0O01lc3NhZ2U6Jmx0Oy9sYWJlbCZndDsmbHQ7L2RpdiZndDsKJmx0O2RpdiZndDsmbHQ7dGV4dGFyZWEgbmFtZT0iY29udGVudCIgcm93cz0iMyIgY29scz0iNjAiJmd0OyZsdDsvdGV4dGFyZWEmZ3Q7Jmx0Oy9kaXYmZ3Q7CiZsdDtkaXYmZ3Q7Jmx0O2xhYmVsJmd0O0F2YXRhcjombHQ7L2xhYmVsJmd0OyZsdDsvZGl2Jmd0OwombHQ7ZGl2Jmd0OyZsdDtpbnB1dCB0eXBlPSJmaWxlIiBuYW1lPSJpbWciLyZndDsmbHQ7L2RpdiZndDsKJmx0O2RpdiZndDsmbHQ7aW5wdXQgdHlwZT0ic3VibWl0IiB2YWx1ZT0iU2lnbiBHdWVzdGJvb2siJmd0OyZsdDsvZGl2Jmd0OwombHQ7L2Zvcm0mZ3Q7CiZsdDsvYm9keSZndDsKJmx0Oy9odG1sJmd0OyIiIikKY2xhc3MgSW1hZ2UgKHdlYmFwcC5SZXF1ZXN0SGFuZGxlcik6CmRlZiBnZXQoc2VsZik6CmdyZWV0aW5nID0gZGIuZ2V0KHNlbGYucmVxdWVzdC5nZXQoImltZ19pZCIpKQppZiBncmVldGluZy5hdmF0YXI6CnNlbGYucmVzcG9uc2UuaGVhZGVyc1snQ29udGVudC1UeXBlJ10gPSAiaW1hZ2UvcG5nIgpzZWxmLnJlc3BvbnNlLm91dC53cml0ZShncmVldGluZy5hdmF0YXIpCmVsc2U6CnNlbGYucmVzcG9uc2Uub3V0LndyaXRlKCJObyBpbWFnZSIpCmNsYXNzIEd1ZXN0Ym9vayh3ZWJhcHAuUmVxdWVzdEhhbmRsZXIpOgpkZWYgcG9zdChzZWxmKToKZ3JlZXRpbmcgPSBHcmVldGluZygpCmlmIHVzZXJzLmdldF9jdXJyZW50X3VzZXIoKToKZ3JlZXRpbmcuYXV0aG9yID0gdXNlcnMuZ2V0X2N1cnJlbnRfdXNlcigpCmdyZWV0aW5nLmNvbnRlbnQgPSBzZWxmLnJlcXVlc3QuZ2V0KCJjb250ZW50IikKYXZhdGFyID0gaW1hZ2VzLnJlc2l6ZShzZWxmLnJlcXVlc3QuZ2V0KCJpbWciKSwgMzIsIDMyKQpncmVldGluZy5hdmF0YXIgPSBkYi5CbG9iKGF2YXRhcikKZ3JlZXRpbmcucHV0KCkKc2VsZi5yZWRpcmVjdCgnLycpCmFwcGxpY2F0aW9uID0gd2ViYXBwLldTR0lBcHBsaWNhdGlvbihbCignLycsIE1haW5QYWdlKSwKKCcvaW1nJywgSW1hZ2UpLAooJy9zaWduJywgR3Vlc3Rib29rKQpdLCBkZWJ1Zz1UcnVlKQpkZWYgbWFpbigpOgp3c2dpcmVmLmhhbmRsZXJzLkNHSUhhbmRsZXIoKS5ydW4oYXBwbGljYXRpb24pCmlmIF9fbmFtZV9fID09ICdfX21haW5fXyc6Cm1haW4oKQo==