СРЕДСТВА WINDOWS PHONE 8.1 SILVERLIGHT ДЛЯ СОЗДАНИЯ МОДУЛЯ ОБРАБОТКИ ИЗОБРАЖЕНИЙ

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

В данной статье рассмотрены средства .NET Silverlight для платформы Windows Phone 8.1, позволяющие реализовать основные функции, связанные с обработкой изображений.

1. Добавление фото. Источником фото может быть галерея или камера. Для добавления изображения из галереи вызывается задача выбора PhotoChooserTask, с камеры - CameraCaptureTask. Это стандартные механизмы, которые позволяют пользователю выбрать существующее фото либо захватить изображение с камеры. При вызове PhotoChooserTask открывается стандартный интерфейс галереи WP, при вызове CameraCaptureTask - стандартный интерфейс камеры устройства. Они знакомы пользователю и не вызывают вопросов по их использованию. Выбранное фото можно загрузить в элемент ViewportControl, который позволяет размещать внутри себя содержимое, размеры которого больше размеров экрана и прокручивать его.
2. Масштабирование фото. Масштабирование фото должно быть обеспечено при помощи жестового управления. В Windows Phone имеется высокоуровневая поддержка для жестов, которая называется манипуляцией (manipulation) касания. Для операции масштабирования изображения повсеместно используется жест сжатия (Pinch). К элементу ViewportControl можно привязать событие ViewportControl_ManipulationDelta, которое и будет осуществлять масштабирование. Далее это событие будет вызываться при использовании жеста сжатия, и внутри него будет происходить пересчет размеров отображаемого изображения. Этот пересчет опирается на значение PinchManipulation.CumulativeScale - соотношение расстояния между текущими и расстояния между исходными точками касания.

По завершении манипуляции вызывается событие ViewportControl_ManipulationCompleted, внутри которого рассчитывается коэффициент ZoomFactor как отношение размеров отображаемого изображения к фактическим пиксельным размерам фото. Таким образом, в любой момент можно узнать, насколько было масштабировано изображение.

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

В течение этапа масштабирования имеется возможность перемещать фото в рабочей области, она заложена в логику компонента ViewportControl.

3. Поворот фото. Были изучены различные пути реализации поворота изображения в WP. Таких путей оказалось три:

• поворот изображения на произвольный угол средствами библиотеки WriteableBitmapEx. Данная библиотека имеет в своем распоряжении функции Rotate и RotateFree - первая поворачивает изображение на угол 90 градусов, а вторая - на любой произвольный угол. Подобный путь имеет следующие минусы: он неизбежно переприсваивает фото после манипуляции, что сказывается на качестве изображения и скорости работы метода и, кроме того, затрудняет откат изменений.
• поворот изображения на произвольный угол средствами Lumia Imaging SDK. Библиотека от Microsoft дает возможность применить к изображению фильтр RotationFilter c параметром rotationAngle - углом, на который происходит поворот изображения. Однако, данный способ несет те же проблемы, что и предыдущий.
• поворот отображаемого изображения на произвольный угол при помощи RenderTransform. Этот класс получает и устанавливает сведения о преобразовании, влияющем на положение элемента при отображении. RenderTransform связывается с изображением, и далее остается только задать свойства RenderTransform, отвечающие за центр преобразования и угол поворота. Данный метод не затрагивает само изображение и быстро работает.

В зависимости от целей конечного модуля можно остановиться на одном из этих способов. Так, приложение Instagram для Windows Phone, цель которого – быстрая обработка изображения с минимальными затратами времени на это, до недавних пор предлагало пользователю только поворот на 90 градусов, а приложение Fhotoroom, специализирующееся непосредственно на обработке фото, позволяет повернуть фото на произвольный угол.

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

Обрезка по видимой области осуществляется при помощи конструктора класса WriteableBitmap(UIelement element,Transform transform), который создает новый экземпляр класса, используя заданный элемент интерфейса и преобразование. В качестве element передается ViewportControl, и размер обрезанного изображения будет соответствовать размерам этого элемента интерфейса.

Для реализации механизма наложения фильтров были использованы средства Lumia Imaging SDK. Данный SDK предоставляет широкий спектр фильтров для художественной обработки изображений. Было решено реализовать несколько из них.

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

5. Кадрирование. Кадрирование изображение может быть представлено различными сценариями. Это может быть обрезка фото по границам видимой области, как, например, в Instagram, либо обрезка по рамке, как в стандартном средстве для просмотра изображений Windows 8.1. Первый способ был описан выше. Второй предполагает работу с так называемой канвой – элементом Canvas, который позволяет отрисовывать элементы управления на координатной сетке. Рамку можно создать при помощи класса Rectangle, задать ей размер и цвет, а ее перемещение организовать с помощью обработки касаний (события UIElement.PointerEntered, UIElement.PointerMoved, UIElement.PointerExited). Обрезать изображение по рамке можно при помощи конструктора WriteableBitmap.
6. Сохранение. Сохранение изображения в галерею в формате .JPG происходит при помощи стандартной функции класса MediaLibrary SavePicture. Также стоит упомянуть возможность изменить пиксельный размер изображения; это можно сделать при помощи функции Resize пакета WriteableBitmapEx, либо при помощи стандартного класса BitmapDecoder, который позволяет декодировать изображение из байтового потока, применив к нему необходимые параметры: кодирование цветов (в частности, альфа-канала), размер изображения, тип кодирования (jpeg, png, gif и прочее) и т.д.

Таким образом, фреймворк .NET Silverlight для Windows Phone 8.1 предоставляет широкий спектр инструментов для обработки изображения, включающий в себя специализированную библиотеку Lumia Imageing SDK. Разработка модуля для обработки фото с помощью этих инструментов не представляет большой сложности.

Список литературы:

1. Каменева А.Е., Горбунова А.В. Градационные преобразования матрицы изображения [Текст] / Каменева А.Е., Горбунова А.В. // Электронный научный журнал № 3 (3): сб. статей. – Москва, 2016. – С. 12-15.
2. Пугачев С.В. Разработка приложений для Windows 8 на языке C# / С. В. Пугачев, А. М. Шериев, К. А. Кичинский. — СПб.: БХВ-Петербург, 2013. — 416 с.
3. Рихтер Дж. CLR via C#. Программирование на платформе Microsoft .NET Framework 2.0 на языке C#. Мастер-класс. / Пер. с англ. — 2-е изд., исправ. — М.: Издательство «Русская Редакция»; СПб.: Питер , 2008. — 656 стр.: ил.