Compartir a través de


Este artículo proviene de un motor de traducción automática.

Windows Phone

Programación del efecto de boceto de Nokia en Windows Phone 8

Srikar Doddi

Descargar el código de ejemplo

Nokia lanzó recientemente el SDK de imagen Nokia en beta para permitir a los desarrolladores de Windows Phone 8 crear experiencias de imagen avanzadas para los smartphones de Nokia Lumia.

El Nokia Imaging SDK incluye una biblioteca para manipular imágenes captura y almacena por dispositivos Windows Phone. Sus características incluyen decodificación y codificación de imágenes JPEG, aplicar efectos y filtros, recortar, rotar y redimensionar. El SDK de Nokia Imaging ofrece más de 50 filtros predefinidos y efectos. Usted puede no sólo aplicar efectos como sepia, dibujos animados, dibujo y así sucesivamente, pero también se aplican-mejorar el auto, control de brillo, tonalidad, saturación y muchos más. El SDK ha sido desarrollado específicamente para imágenes de móvil, con velocidad y memoria de rendimiento como conductores principales.

En este artículo, podrá demostrar el uso del efecto dibujo a través de una aplicación de ejemplo llamada papel foto. El efecto dibujo se aplica a la corriente de visor en tiempo real y proporciona a los usuarios la capacidad de capturar imágenes y guárdelos en el rollo de cámara del teléfono. He desarrollado esta aplicación usando Visual Studio 2012, el SDK de Nokia y el SDK de Windows Phone 8. Usé un smartphone Nokia Lumia 920 para probarlo.

Nokia Imaging SDK básico

El SDK de Nokia de imágenes fue creado por Nokia para darle acceso completo a una potente librería de manipulación de imágenes herramientas que le ayudan a crean aplicaciones de imágenes rápida y fácilmente. Como se ha mencionado, este SDK fue diseñado con alto rendimiento y baja memoria uso en mente, la cual es importante porque Microsoft y Nokia están trabajando para crear dispositivos de última generación como el Nokia Lumia 1020. El SDK ya se utiliza en aplicaciones de imágenes de Nokia, Creative Studio. El SDK y la biblioteca están disponibles de forma gratuita (ver el acuerdo de licencia en bit.ly/130tVHJ), y el SDK es compatible actualmente sólo aplicaciones Windows Phone 8.

El SDK de Nokia Imaging ofrece las siguientes características:

  • Una API sencilla de usar que está disponible tanto desde código administrado, así como el código nativo. Esto significa el SDK se proporciona como una biblioteca de tiempo de ejecución de Windows Phone y puede llamar a los métodos de la biblioteca de C#, Visual Basic o C++.La API viene con una variedad de clases y métodos para las varias tareas de imágenes.
  • Tecnología RAJPEG para acceso a datos de imagen sin descifrar una imagen JPEG en primer lugar, que permite para las previsualizaciones sorprendentemente rápidas, aplicación de efectos, recorte y rotación de imágenes de alta resolución.
  • Más de 50 filtros, efectos y mejoras. Algunas de estas mejoras permiten ajustar mediante programación niveles RGB, matiz, saturación y luminosidad. También puede crear efectos personalizados y filtros si es necesario. Además de estos filtros y efectos, el SDK también permite recortar, girar y redimensionar con funcionalidad deshacer ilimitado.
  • Varias aplicaciones de muestra todas las funciones le permiten explorar el código fuente y descubre las características del SDK. Los ejemplos abarcan una gama de características tales como manipulación en tiempo real de las propiedades de filtro y la aplicación de varias capas de filtro para fotos.
  • Rica documentación con guías de inicio rápido, proyectos de ejemplo, guías de referencia de la API y varios documentos que proporcionan una visión general de algunos de los conceptos básicos necesitados para crear aplicaciones de imagen.

Para comenzar

En un nivel alto, usé las siguientes API desde el SDK de Nokia Imaging para mi aplicación de ejemplo:

  • Nokia.Graphics
  • Nokia.Graphics.Imaging
  • Nokia.InteropServices.WindowsRuntime

La API de Nokia.Graphics.Imaging contiene la funcionalidad básica del SDK de proyección de imagen de Nokia, que incluye todos los filtros de imagen, efectos de imagen, JPEG codificador y decodificador. La biblioteca de Nokia.InteropServices.WindowsRuntime se utiliza internamente y es una biblioteca necesaria que necesita para hacer referencia a su proyecto. Contiene una clase llamada BufferFactory que se utiliza para crear una instancia de IBuffer. Este SDK puede instalarse usando el gestor de paquetes NuGet en Visual Studio. Puede encontrar el paquete mediante la búsqueda de NokiaImagingSDK.

El gráfico de objetos de esta aplicación consiste básicamente en tres clases principales, se muestra en la figura 1. La Página principal es tu teléfono normal aplicación página implementado por un archivo XAML y una contraparte de C#. Esta clase de MainPage implementa la interfaz de usuario, que incluye el MediaElement que muestra el visor de la cámara con el efecto dibujo a la aplicación. La clase de página principal también es propietaria de las instancias de las otras dos clases principales: CameraStreamSource y NokiaSketchEffect. El CameraStreamSource, derivado de MediaStreamSource, proporciona los datos de la cámara, y el NokiaSketchEffect implementa el efecto dibujo. El CameraStreamSource es una clase implementada por Nokia y se proporciona a los desarrolladores a través de muestras de la aplicación de la compañía fuera el SDK de Nokia Imaging.

The Class Diagram for the Paper Photo Project
Figura 1 del diagrama de clases para el proyecto de papel fotográfico

El gráfico de objetos se traduce en la organización de código se muestra en la figura 2.

Visual Studio Solution Structure
Figura 2 Visual Studio solución estructura

Definición de la interfaz de usuario

La interfaz de usuario de esta aplicación es sencilla, como se muestra en la figura 3. La Página principal muestra la imagen de un visor y viene con una barra de la aplicación que tiene un solo botón para capturar la foto con el efecto del modo de dibujo.

The Paper Photo UI
Figura 3 el papel foto UI

Figura 4 muestra el marcado XAML para la Página principal utilizando el elemento Grid para definir el contenedor utilizado para mostrar el visor con el efecto de dibujo aplicado.

Figura 4 el marcado XAML para el Main Page

<Grid x:Name="LayoutRoot" Background="Transparent">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <Grid Grid.Row="1" Margin="8">
    <Grid x:Name="MediaElementContainer" Margin="0"></Grid>
      <StackPanel
        x:Name="TitlePanel"
        Grid.Row="0"
        Margin="12,17,0,28">
        <TextBlock
          Text="{Binding Path=LocalizedResources.ApplicationTitle,
          Source={StaticResource LocalizedStrings}}"
          Style="{StaticResource PhoneTextNormalStyle}"
          Margin="12,0"/>
      </StackPanel>           
    </Grid>
  </Grid>

La barra de aplicación se construye usando el marcado se muestra en la figura 5. Como puedes ver, define un botón de captura y un elemento de menú About. El botón de captura se asocia un controlador de eventos para controlar el evento click.

Figura 5 la barra de aplicación Markup

<phone:PhoneApplicationPage.ApplicationBar>
  <shell:ApplicationBar Opacity="0.4">
    <shell:ApplicationBarIconButton x:Name="CaptureButton"
      Text="Capture" IconUri="Assets/capture-button-icon.png"
      Click="CaptureButton_Click" IsEnabled="True" />
    <shell:ApplicationBar.MenuItems>
      <shell:ApplicationBarMenuItem
        Click="OnAboutPageButtonClicked" Text="about" />
    </shell:ApplicationBar.MenuItems>
  </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Windows Phone utiliza un modelo de seguridad basada en funciones. Este modelo permite a los usuarios suscribirse para permitir cierta funcionalidad ser activado. En mi aplicación de demostración, necesitan estar habilitado para que los usuarios las siguientes capacidades:

  • ID_CAP_ISV_CAMERA: Esto proporciona acceso a la cámara trasera (primaria) o a la cámara de frente.
  • ID_CAP_MEDIALIB_PHOTO: Esto proporciona acceso de sólo lectura a las fotos en la mediateca. También da una aplicación capaz de guardar las fotos en el rollo de la cámara. Voy a demostrar esta capacidad más adelante en el artículo para guardar una foto en el rollo de la cámara después de aplicar el efecto dibujo.

En cuanto a los requisitos de hardware, la aplicación necesita una cámara mirando hacia atrás para funcionar correctamente. Se selecciona la opción ID_REQ_REARCAMERA para evitar la aplicación de la instalación de un teléfono sin una cámara trasera.

Aplicar un efecto de dibujo en tiempo real al visor de la cámara

La clase NokiaSketchEffect es responsable de aplicar el efecto dibujo en tiempo real al visor de la cámara. Note el uso de SketchMode.Gray para conseguir el efecto deseado en mi aplicación. El Get­SampleAsync función en la clase CameraStreamSource es responsable de procesar el buffer de la cámara utilizando el efecto de dibujo, y proporciona el elemento multimedia con el buffer. El método GetSampleAsync utiliza el Nokia­método SketchEffect.GetNewFrameAndApplyEffect para obtener el buffer cámara modificada. El código en figura 6 muestra cómo se implementa.

Figura 6 poner la cámara modificada de búfer

public async Task GetNewFrameAndApplyEffect(IBuffer processedBuffer)
{
  if (captureDevice == null)
  {
    return;
  }
  captureDevice.GetPreviewBufferArgb(cameraBitmap.Pixels);
  Bitmap outputBtm = new Bitmap(
    outputBufferSize,
    ColorMode.Bgra8888,
    (uint)outputBufferSize.Width * 4,
    processedBuffer);
  EditingSession session = 
    new EditingSession(cameraBitmap.AsBitmap());
  session.AddFilter(FilterFactory.CreateSketchFilter(SketchMode.Gray));
  await session.RenderToBitmapAsync(outputBtm);
}

El captureDevice en la función es una variable privada de la foto­CaptureDevice clase encontrada en Windows.Phone.Media.Capture. La función RenderToBitmapAsync es proporcionada por el Nokia Imaging SDK para apoyar el render asincrónico de EditingSession en un mapa de bits. El EditingSession es una clase importante proporcionada por el SDK de Nokia de imágenes para representar a una sesión de edición de procesamiento de imágenes. El objeto EditingSession es el núcleo de este SDK. En un flujo de trabajo típico, el EditingSession es creado a partir de una imagen, filtros o efectos se agregan a esta sesión, el EditingSession entonces se procesa a un mapa de bits o en un búfer de memoria, y finalmente se cierra el EditingSession. El código en figura 6 muestra cómo se crea un nuevo mapa de bits asociado con el argumento de processedBuffer, se aplica el efecto dibujo a él y luego se procesa en el búfer de nuevo. Finalmente, el método de CreateSketchFilter produce la apariencia de la imagen esbozada. Esta función toma SketchMode — una enumeración — como argumento para pasar los modos para el filtro del bosquejo. Los dos modos disponibles son gris para dibujo en escala de grises y color para el dibujo en color. Como puedes ver, usé SketchMode.Gray en la figura 6 código. Esto permite que la aplicación de papel foto producir imágenes en escala de grises.

Capturar y guardar la imagen como una imagen JPEG para el rollo de la cámara

Hasta ahora he demostrado cómo aplicar el efecto dibujo en tiempo real al visor. Ahora miraré a capturar una imagen desde el visor y luego guardarlo en el rollo de la cámara del dispositivo. La función de captura inicia primero autofocus y luego captura una foto. Además de manejar la funcionalidad de captura de la barra de aplicación, también puede controlar la captura iniciada por el gatillo de dispositivo de hardware.

El código que se muestra en la figura 7 permite la captura a través del botón de la cámara. Más específicamente, la función activa o desactiva la función de liberación del obturador de hardware. La clase CameraButtons proporciona los eventos que se activan mediante los botones del dispositivo obturador. Una tal evento es el evento ShutterKeyHalfPressed, desencadenado cuando el botón del obturador de hardware se pulsa y mantiene para aproximadamente 800 milisegundos. Otro evento es el evento ShutterKeyPressed. Este evento se produce cuando el botón del obturador hardware recibe una prensa completa. La función SetCameraButtonsEnabled también encarga de la eliminación de estos controladores de eventos para ayudar a liberar la memoria relacionada con la cámara.

Figura 7 que permite capturar a través del botón de cámara

private void SetCameraButtonsEnabled(bool enabled)
{
  if (enabled)
  {
    Microsoft.Devices.CameraButtons.ShutterKeyHalfPressed
      += ShutterKeyHalfPressed;
    Microsoft.Devices.CameraButtons.ShutterKeyPressed
      += ShutterKeyPressed;
  }
  else
  {
    Microsoft.Devices.CameraButtons.ShutterKeyHalfPressed
      -= ShutterKeyHalfPressed;
    Microsoft.Devices.CameraButtons.ShutterKeyPressed
      -= ShutterKeyPressed;
  }
}

Ahora voy a explicar en detalle el proceso de captura. En el código que se muestra en la figura 8, el objeto camera representa el dispositivo de captura de la foto, la cámara aguarda.FocusAsync función inicia el enfoque automático y el método StartCaptureAsync captura un fotograma. Pero antes de que se puede capturar el marco, lo necesario para preparar la secuencia de captura. Para ello llamando al PrepareCaptureSequenceAsync. También estás creando un objeto de secuencia de captura con un marco, como se puede ver en la cámara.CreateCaptureSequence(1). El valor 1 indica el número de fotogramas que será capturado inmediatamente después de iniciar la captura. Por último, también se especifica propiedades de cámara y foto configuración utilizando el método KnownCameraPhotoProperties. La LockedAutoFocusParameters se establece en None, indicando que se centran, exposición y ajustes de balance de blancos se ajustan automáticamente antes de la captura.

Figura 8 el proceso de captura

private async System.Threading.Tasks.Task Capture()
{
  try
  {
    await camera.FocusAsync();
    MemoryStream imageStream = new MemoryStream();
    imageStream.Seek(0, SeekOrigin.Begin);
    CameraCaptureSequence sequence = camera.CreateCaptureSequence(1);
    sequence.Frames[0].CaptureStream = imageStream.AsOutputStream();
    await camera.PrepareCaptureSequenceAsync(sequence);
    await sequence.StartCaptureAsync();
    camera.SetProperty(
      KnownCameraPhotoProperties.LockedAutoFocusParameters,
      AutoFocusParameters.None);
    ...
}

Por último, el código siguiente muestra cómo guardar la fotografía capturada en el rollo de la cámara:

MediaLibrary library = new MediaLibrary();
EditingSession session =
  new EditingSession(imageStream.GetWindowsRuntimeBuffer());
using (session)
{
  session.AddFilter(FilterFactory.CreateSketchFilter(SketchMode.Gray));
  IBuffer data = await session.RenderToJpegAsync();
  library.SavePictureToCameraRoll(FileNamePrefix
    + DateTime.Now.ToString() + ".jpg",
    data.AsStream());
}

La clase MediaLibrary es proporcionada por la API de Microsoft.XNA.Framework.Media y se utiliza para guardar las fotos a la biblioteca multimedia del teléfono. El Microsoft.XNA.Framework.Media de espacio de nombres contiene clases para enumerar, jugar y ver canciones, álbumes, listas de reproducción y fotos. Puede entonces utiliza la clase EditingSession de Nokia Imaging SDK para crear una sesión desde el buffer de imagen comprimida y luego aplica el filtro de efecto boceto antes de guardar la imagen en el rollo de la cámara usando la función SavePictureToCameraRoll.

Lente recogedor de la integración

En Windows Phone 8, puede crear una lente de medios enriquecidos que se abre desde la aplicación cámara incorporada y la derecha de la aplicación se lanza a la experiencia del visor. Con el fin de integrar con la experiencia de la lente, la aplicación necesita para inscribirse en la extensión Camera_Capture_App. Esta extensión declara que el sistema operativo que la aplicación de papel foto puede mostrar un visor cuando se lanza desde el selector de la lente. Las extensiones se especifican en el archivo WMAppManifest.xml. Tienes que abrir este archivo con el editor de texto: Haga clic derecho sobre el archivo y seleccione "abrir con... | Editor de texto. " Justo después del elemento de Tokens, dentro del elemento extensiones, se especifica la extensión de la lente con el siguiente elemento de extensión:

<Extension ExtensionName="Camera_Capture_App"
  ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5631}"
  TaskID="_default" />

Ahora su aplicación se completa con integración de lente y puede guardar derecho de cuadros en el rollo de la cámara del dispositivo. La imagen en figura 9 fue tomada con la cámara incorporada de la aplicación y la imagen en figura 10 fue tomada con la aplicación de papel foto usando el efecto dibujo.

A Regular Image Taken with the Built-in Camera App
Figura 9 Regular imagen tomada con la cámara incorporada de la aplicación

An Image Taken Using the Paper Photo App Using the Sketch Effect
Figura 10 una imagen tomada mediante la aplicación de foto de papel usando el efecto dibujo

Agregar sus propias funciones

En este artículo, exploré la captura de la foto APIs de Microsoft y el nuevo Nokia Imaging SDK para crear una rica experiencia de imagen. Aplicar el efecto dibujo al visor en tiempo real y luego capturó la foto y había guardado en el dispositivo cámara rollo. Como puedes ver, hay muchas características que ahora puede utilizar gracias a Nokia Imaging SDK, que hace que sea fácil construir aplicaciones como ésta. Unos pequeños detalles fueron omitidos en aras de la brevedad, pero usted puede referir a la descarga de código (github.com/Srikar-Doddi/PaperPhoto) para una completa comprensión. Esto es sólo un ejemplo del uso del SDK de Nokia Imaging, pero hay muchas otras características que usted puede agregar y las posibilidades son ilimitadas. Espero que utilice este código como punto de partida y añade más características a esta aplicación.

Srikar Doddi es el director ejecutivo de ingeniería en la escuela prueba Kaplan Usted puede encontrar sus escritos en medio de medium.com/@SrikarDoddi. Es también el creador de las simplista, DateTileScheduler y papel foto aplicaciones para Windows Phone 8 y el apuntador e intento para Windows 8. Se puede llegar a Doddi vía correo electrónico a srikar.doddi@gmail.com.

Gracias al siguiente experto técnico por su ayuda en la revisión de este artículo: Lance McCarthy (Nokia)
Lance McCarthy es un embajador de Nokia y Telerik XAML Support Specialist (ext-lance.mccarthy@nokia.com)