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

Windows Phone

Cree una avanzada aplicación de cámara para los teléfonos Nokia Lumia

Rajesh Lal

En este artículo, voy a enseñarte a desarrollar una aplicación para smartphones Nokia Lumia 1520 20MP y 41-megapíxeles (MP) Nokia Lumia 1020. Se centran principalmente en el Nokia Lumia 1020, pero la información se aplica a todos los dispositivos con tecnología PureView Lumia Windows Phone 8. En primer lugar, analizaré PureView, la tecnología detrás de la poderosa cámara incluida en los teléfonos, y luego voy a explicar las características avanzadas disponibles para acceder y mejorar tus fotografías. Yo le proporcionará una visión general del SDK de proyección de imagen de Nokia (tiene toneladas de ready-to-use filtros gráficos) y un tutorial de cómo usarlo. También cubriré el típico flujo de trabajo necesario para construir una aplicación de cámara y te mostraré cómo crear un filtro de fotografía tilt-shift para simular la profundidad de campo. Comencemos.

Comprensión de la tecnología de PureView en un teléfono con cámara 41MP

PureView tecnología consta de cámara avanzada de hardware y software relacionado. Juntos, permiten la captura y el ahorro de imágenes de alta calidad, alta resolución. Los tres aspectos principales de la tecnología PureView están una lente de cámara de alta resolución, zoom sobremuestreo y sin pérdidas. Voy a explicar brevemente cada uno.

La base de la tecnología de PureView es un sensor de alta resolución, 7.728 píxeles de ancho y 5.368 píxeles de alto, que suman más de 41MP. Esto permite que la cámara del teléfono capturar fotografías grandes, seis veces más grandes que una fotografía de 5MP normal.

Figura 1 compara un 41MP resolución de imagen con una resolución de imagen de 5MP. Debido a esta resolución 41MP, usted puede tomar 34MP de alta calidad fotografías de 16:9 (7.728 x 4.354) así como 38MP 4:3 fotografías (7.152 x 5.368), como se muestra en la vista de la lente de la cámara en figura 2.

Figura 1 foto de 41MP en comparación con una foto de 5MP

Figura 2 Zoom Lossless sigue siendo parte de la fotografía

Pixel sobremuestreo es cuando la cámara toma una foto de 41MP y crea una imagen de alta calidad 5MP. Esta es la foto que ves en la pantalla del teléfono. Además, el proceso de sobremuestreo mantiene toda la riqueza de detalles en la imagen pero filtros lejos cualquier ruido visual.

El tercer aspecto de la tecnología PureView es zoom sin pérdidas, que simplemente significa que no perder calidad de imagen cuando te acercas. Esto es posible porque, en cualquier momento — tienes disponible el cuadro original de 41MP, que es sobremuestreado para mostrar una foto de 5MP. Cuando usted acerca, realmente hacer zoom en una parte de la foto de 41MP original. En hasta un zoom 3 x, todavía tratas con partes de la foto de 41MP original. Y ni siquiera en el zoom máximo, su calidad fotográfica sigue siendo la calidad de una foto de 5MP regular. Debido a la sobre muestreo, la calidad de imagen sólo se pone mejor como acercar. Figura 2 muestra cómo el zoom sin pérdidas es todavía parte de la fotografía original.

El Nokia Imaging SDK

Cuando una aplicación de cámara de la construcción, una fotografía de alta resolución es la materia prima, pero necesitarás una pila de software avanzadas que se puede utilizar las imágenes grandes y le permiten acceder y manipularlos. Aquí es donde entra el SDK de Nokia de imagen en el cuadro (bit.ly/1hJkmpl). Proporciona un conjunto de características avanzadas para acceder a una fotografía de alta resolución tomada por la cámara.

El Nokia Imaging SDK incluye parcial decodificación JPEG, denominado tecnología JPEG de acceso al azar (RAJPEG). RAJPEG permite el acceso aleatorio de datos JPEG, rápido downscaling de imágenes y decodificación parcial inmediata. Estos aspectos de RAJPEG permiten la manipulación de imágenes en tiempo real. El Nokia Imaging SDK contiene más de 50 filtros, efectos y mejoras. Incluso contiene un conjunto de las operaciones más comunes de imagen, tales como cultivos, redimensionar, rotar y deshacer, sólo para nombrar unos pocos. Estas características out-of-the-box ayudan a crear aplicaciones avanzadas de cámara/foto-centrada en sin preocuparse de las funcionalidades más comunes. Para utilizar el SDK de proyección de imagen de Nokia en su proyecto, siga las instrucciones en la página de Nokia Lumia Developer Library (bit.ly/KzDPNG).

Proyección de imagen de SDK APIs

Las API disponibles en el SDK de imagen pueden aplicarse fácilmente a los datos de las imágenes capturados por la cámara en relativamente pocas líneas:

var imageSource = new StreamImageSource(e.ChosenPhoto);
// Define the effects to apply
var filterEffect = new FilterEffect(imageSource);
filterEffect.Filters = new [] { new FogFilter() };
// Render the image using WriteableBitmapRenderer
WriteableBitmapRenderer renderer =
  new WriteableBitmapRenderer(filterEffect, 
  myImageBitmap,OutputOption.PreserveAspectRatio);
await renderer.RenderAsync();

Aquí, e.ChosenPhoto se utiliza para crear un StreamImageSource. El e.ChosenPhoto puede venir directamente de una foto de cámara-capturado o de cualquiera de las fotos en el álbum. Después creó un efecto de filtro para aplicar en la foto y añade un FogFilter artístico a la matriz de filtros en mi efecto. Si lo desea, esta matriz puede contener varios filtros, que luego son aplicados y prestados a myImageBitmap usando un WriteableBitmapRenderer. Como su nombre indica, representa una fuente de la imagen a un WriteableBitmap. Finalmente, el método RenderAsync ayuda en el procesamiento asincrónico de la imagen.

Junto con FogFilter, puede aplicar más de 50 otros filtros de imagen SDK para una fotografía. Figura 3 muestra la lista de filtros de mejora dentro de la App filtro Explorer gratis, disponible fuera de la caja para los desarrolladores. Incluye filtros tales como AutoEnhanceFilter, AutoLevelsFilter, ColorBoostFilter y ExposureFilter. Estos son los filtros se pueden aplicar directamente a cualquier foto o imagen capturada en tiempo real para mejorar la calidad.

Figura 3 filtros de realce en el explorador de filtro App gratis

Hay otros filtros para brillo (BrightnessFilter) y contraste (ContrastFilter), que toma los parámetros de brillo y contraste. Hay una serie de filtros para efectos artísticos, tales como relieve, escala de grises y sepia. También existen los "filtros" de edición de imágenes que proporcionan las funciones utilizadas anteriormente mencionadas como rotar, flip, espejo y así sucesivamente. Esto pueden aplicarse a una sola imagen en múltiples ocasiones, uno encima de otro, para crear efectos dramáticos.

Flujo de trabajo de la aplicación de cámara de alta resolución

Ahora que te dije sobre el hardware y las capacidades de proyección de imagen de SDK, te voy a mostrar el flujo de trabajo típico que necesita para la construcción de una potente cámara de teléfono la aplicación. Porque estoy lidiando con una enorme imagen, tengo que jugar bien para que mi aplicación no hacer otras aplicaciones lentas o tomar una gran cantidad de memoria. Esto puede garantizarse por no tratar de manipular directamente la imagen grande en la cámara.

En cualquier punto del tiempo, la cámara tendrá dos fotografías: la fotografía original de 41MP y la foto de 5MP, que se muestra en el panel de vista de cámara. En mi aplicación, siempre trabajaré en la fotografía de teléfono cámara 5MP, que puede ser o bien la imagen de la foto entera Shaping, la parte ampliada de la imagen, o la parte sobremuestreada y parcialmente con zoom de la foto.

Figura 4 muestra el flujo de trabajo para la aplicación de imágenes.

Figura 4 imagen App Workflow

Los pasos individuales incluyen:

• Capturar una imagen de alta resolución.
• Guárdelo en su almacenamiento local.
• Haga su magia usando el SDK de imágenes.
• Achicar la imagen resultante a 5MP.
• Guarda la imagen mejorada 5MP con el rollo de la cámara.

Crea un filtro fotográfico: Tilt Shift

Ahora podrás atravesar el flujo de trabajo de mi cámara fotográfica aplicación de filtro-basado, tilt-shift. Fotografía Tilt-shift es el uso de los movimientos de cámara — específicamente la inclinación — para enfoque selectivo simular una escena en miniatura (ver figura 5). Usted puede encontrar más información sobre la fotografía tilt-shift en bit.ly/1bRYYNK. En esta aplicación, podrás simular la profundidad de campo con post-proceso digital utilizando varios filtros en el SDK de Nokia Imaging.

Figura 5 el efecto Tilt-Shift

Te voy a mostrar cómo esto encaja en el flujo de trabajo lo discutido anteriormente.

Adquirir foto es el primer paso para cualquier aplicación basada en cámara para adquirir una imagen de la cámara del teléfono o galería de imágenes. Puedes hacerlo de tres maneras diferentes. Uno es usar la cámara 5MP predeterminado mediante el uso de la CameraCaptureTask, que provoca el visor de la cámara normal. El segundo método se llama utilizando el control selector nativo foto por PhotoChooserTask. Estas dos alternativas son suficientes para aplicaciones de cámara más, pero para una aplicación avanzada que necesitas para capturar fotos de alta resolución, necesitas crear un visor personalizado, que provoca el visor de aplicación Pro cámara incorporado de alta resolución. Esto se hace mediante el objeto PhotoCaptureDevice. Ver figura 6 para la lista de métodos y propiedades apoyadas por PhotoCaptureDevice.

 Figura 6 métodos y propiedades apoyadas por PhotoCaptureDevice

La interfaz de usuario la aplicación tilt-shift se compone de dos imágenes: una Original­imagen para mostrar la imagen real capturado o seleccionado utilizando el selector de foto y la TiltShiftImage, que muestra la imagen final después de que el filtro inclinación-desplazamiento se aplica a la imagen original. La SelectButton activa el selector nativo foto y la cámara­botón dispara la cámara, como se muestra en el código de figura 7.

Figura 7 el código XAML UI

<Canvas x:Name="LayoutRoot" Background="Transparent">
  <TextBlock Text="" Style="{StaticResource
    PhoneTextNormalStyle}" />
  <Image x:Name="TiltShiftImage" Height="480" Width="728"
    Stretch="UniformToFill" MouseLeftButtonUp
    ="TiltShiftImage_MouseLeftButtonUp"/>
  <Image x:Name="OriginalImage" Height="480" Width="728"
    Stretch="UniformToFill" Canvas.ZIndex="0"
    MouseLeftButtonUp="OriginalImage_MouseLeftButtonUp"
    Source="/Assets/Landscapes.jpg"/>
  <Rectangle x:Name="TiltshiftRegion" Fill="White" Height="65"
    Stroke="#FF0B7AFF" Canvas.Top="320" Width="728"
    Opacity="0.25" StrokeThickness="5"/>
  <Button x:Name="SelectButton" Content="Select"
    Click="PickAnImageButton_Click" Canvas.Left="4"
    Canvas.Top="398" />
  <Button x:Name="CameraButton" Content="Camera"
    Click="CameraButton_Click" Canvas.Left="123"
    Canvas.Top="398" />
  <Button x:Name="ProButton" Content="Pro Camera"
    Click="ProCameraButton_Click" Canvas.Left="254"
    Canvas.Top="398" />
  <Button x:Name="SaveButton" Content="Save"
    Click="SaveImage_Click" Canvas.Left="630"
    Canvas.Top="398" />
  <Button x:Name="TiltShiftButton" Content="Tilt Shift"
    Click="TiltShiftButton_Click" Canvas.Left="449"
    Canvas.Top="398" />
</Canvas>

La cámara resultante se muestra la interfaz de usuario en figura 8.

Figura 8 la interfaz de usuario de la aplicación Tilt-Shift

Capturar una imagen de alta resolución los dos primeros métodos de la normal funcionalidad de recogedor de la cámara y foto son simples. El espacio de nombres Microsoft.Phone.Tasks tiene dos objetos task, cámara­CaptureTask y PhotoChooserTask, para estos dos propósitos. Simplemente seleccione la imagen en el selector de foto o desde el resultado de la captura de cámara como la fuente de su filtro de tilt-shift:

private void PickAnImageButton_Click(object sender, RoutedEventArgs e)
{
  PhotoChooserTask chooser = new PhotoChooserTask();
  chooser.Completed += PickImageCallback;
  chooser.Show();  
}
private void CameraButton_Click(object sender, RoutedEventArgs e)
{
  CameraCaptureTask camera = new CameraCaptureTask();
  camera.Show();
  camera.Completed += PickImageCallback;
}

Para capturar una foto de alta resolución, necesito crear un visor personalizado utilizando un cepillo video cuya fuente será la imagen de una aplicación de cámara Pro:

<Canvas x:Name="Canvas" Tap="Canvas_Tap" Height="480"
  HorizontalAlignment="Center" VerticalAlignment="Center">
  <Canvas.Background>
    <VideoBrush x:Name="ViewfinderVideoBrush" Stretch="Uniform"/>
  </Canvas.Background>          
  <Border x:Name="FocusBracket" Width="80" Height="80"
    BorderBrush="White" BorderThickness="2" Margin="-40"
    Visibility="Collapsed" CornerRadius="360"/>
  <Image x:Name="FreezeImage" Visibility="Collapsed"
    Stretch="Uniform" Height="480"/>
</Canvas>

También necesito inicializar la aplicación cámara Pro con la resolución correcta según el dispositivo, Lumia 1020 o Lumia 1520 y el tipo de resolución que quería. Ver figura 9 para las opciones.

Figura 9 opciones de alta resolución

Variantes de modelos	Puede configurar manualmente	Opciones de alta resolución
Lumia 1020	RM-875, 876-RM, RM-877	7712 x 4352 (16:9), 7136 x 5360 (4:3)
Lumia 1520	RM-937 938-RM, RM-940, RM-939	5376 x 3024 (16:9), 4992 x 3744 (4:3)

Figura 10 muestra cómo puede inicializar la aplicación cámara Pro.

Figura 10 inicializar la aplicación cámara profesional

private void InitializeCamera() {
  Windows.Foundation.Size captureResolution;
  var deviceName = DeviceStatus.DeviceName;
  if (deviceName.Contains("RM-875") || deviceName.Contains("RM-876") ||
    deviceName.Contains("RM-877"))
  {
    captureResolution = new Windows.Foundation.Size(7712, 4352); // 16:9
    //captureResolution = new Windows.Foundation.Size(7136, 5360); // 4:3
  }
  else if (deviceName.Contains("RM-937") || deviceName.Contains("RM-938") ||
    deviceName.Contains("RM-939"))  {
      captureResolution = new Windows.Foundation.Size(5376, 3024); // 16:9
      //captureResolution = new Windows.Foundation.Size(4992, 3744); // 4:3
    }
  else {
    captureResolution = PhotoCaptureDevice.GetAvailableCaptureResolutions(
      REAR_CAMERA_SENSOR_LOCATION).First();
  }
  var task = PhotoCaptureDevice.OpenAsync(REAR_CAMERA_SENSOR_LOCATION,
  captureResolution).AsTask();
  task.Wait();
  _device = task.Result;
  _device.SetProperty(
    KnownCameraGeneralProperties.PlayShutterSoundOnCapture, true);
  if (_flashButton != null) {
    SetFlashState(_flashState);
  }
  AdaptToOrientation(); 
  ViewfinderVideoBrush.SetSource(_device);
  if (PhotoCaptureDevice.IsFocusSupported(REAR_CAMERA_SENSOR_LOCATION))  {
    Microsoft.Devices.CameraButtons.ShutterKeyHalfPressed +=
    CameraButtons_ShutterKeyHalfPressed;
  }
  Microsoft.Devices.CameraButtons.ShutterKeyPressed +=
    CameraButtons_ShutterKeyPressed;
}

Captura de la imagen de la aplicación de cámara profesional consiste en eventos ShutterHalfKeyPressed y ShutterKeyPressed, como se muestra en figura 11.

Figura 11 capturando una imagen vía obturador tecla eventos

private async void CameraButtons_ShutterKeyHalfPressed(
  object sender, EventArgs e) {
    if (!_focusing && !_capturing) {
      _focusing = true;
      await _device.FocusAsync();
      _focusing = false;
    }
}
private async void CameraButtons_ShutterKeyPressed(
  object sender, EventArgs e) {
    if (!_focusing && !_capturing) {
      _capturing = true;
      var stream = new MemoryStream();
      try {
        var sequence = _device.CreateCaptureSequence(1);
        sequence.Frames[0].CaptureStream = stream.AsOutputStream();
        await _device.PrepareCaptureSequenceAsync(sequence);
        await sequence.StartCaptureAsync();
      }
      catch (Exception ex) {
        stream.Close();
      }
      _capturing = false;
      if (stream.CanRead) {
        // Process the image in the stream
        // This can be saved to the local storage
      }
    }
}

La magia primero usaré el PickImageCallback para sacar una foto, que se define como una fuente de la OriginalImage. Para acceder a dimensiones de la imagen, utilizare ImageProviderInfo.

También podrá crear filtros y aplicarlos en la sesión. Para crear un efecto tilt-shift, usaré tres filtros diferentes: BlurFilter con KernelSize 15; ColorBoostFilter con valor 0,5; y otra vez BlurFilter con KernelSize 21. Los dos desdibujan hacer filtros el primero plano y el fondo de la imagen fuera de foco y el ColorBoostFilter aclara la región, lo que quiero hacer para crear el efecto miniatura. El código correspondiente aparece en la Ilustración 12.

Figura 12 inicializar filtros para un efecto

public partial class MainPage : PhoneApplicationPage {
  private Stream _img;
  private StreamImageSource imageSource;
  private ImageProviderInfo info;
  private FilterEffect _tiltshiftEffect = null;
  private WriteableBitmap _tiltshiftImageBitmap = null;
  // Constructor
  public MainPage()  {
    InitializeComponent();
    _tiltshiftImageBitmap =
    new WriteableBitmap((int)TiltShiftImage.Width,(int)TiltShiftImage.Height);
  }
...
private async void PickImageCallback(Object sender, PhotoResult e) {
  if (e.TaskResult != TaskResult.OK) {
    return;
  }
  _img = e.ChosenPhoto;
  imageSource = new StreamImageSource(_img);
  var bitmapImage = new BitmapImage();
  bitmapImage.SetSource(e.ChosenPhoto);
  OriginalImage.Source = bitmapImage;
  info = await imageSource.GetInfoAsync();
  TiltShift();         
...

Para aplicar el filtro tilt-shift, necesito tres rectángulos: el rectángulo superior para desenfocar; el rectángulo central para alza de color; y el rectángulo inferior para desenfocar otra vez (ver figura 13). En este ejemplo, usaré una región rectangular llamada TiltshiftRegion, que el usuario puede tocar y mover a personalizar la posición donde realiza el cambio de inclinación. El rectángulo translúcido se muestra en la figura 13 se convierte en cambió la inclinación y el resto del área es borrosa.

Figura 13 los tres rectángulos utilizados para el efecto Tilt-Shift

La posición de TiltShiftRegion se utiliza para calcular los tres rectángulos donde se aplican los filtros (ver figura 14).

Figura 14 combinación de filtros para un efecto

private async void TiltShift() {
  if (info == null) return;
  try {
    var topLeft = new Windows.Foundation.Point(0, 0);
    var tiltShiftRegionTop = Canvas.GetTop(TiltshiftRegion);
    var delta = info.ImageSize.Height / TiltShiftImage.Height;
    tiltShiftRegionTop = (tiltShiftRegionTop + 10) * delta;
    var tiltShiftRegionBottom =
      (Canvas.GetTop(TiltshiftRegion) + 10) * delta + TiltshiftRegion.Height;
    var topRight =
      new Windows.Foundation.Point(info.ImageSize.Width, tiltShiftRegionTop);
    var bottomLeft = new Windows.Foundation.Point(0, tiltShiftRegionBottom);
    var bottomRight = new Windows.Foundation.Point(
      info.ImageSize.Width, info.ImageSize.Height);
    // Define the effects to apply
    _tiltshiftEffect = new FilterEffect(imageSource);
    List<IFilter> filters = new List<IFilter>();
    filters.Add(new BlurFilter(15, (
      new Windows.Foundation.Rect(topLeft, topRight)),
      BlurRegionShape.Rectangular));
    filters.Add(new ColorBoostFilter(0.5));
    filters.Add(new BlurFilter(23, (new Windows.Foundation.Rect(bottomLeft,
      bottomRight)), BlurRegionShape.Rectangular));
    _tiltshiftEffect.Filters = filters;
    // Render the image using WriteableBitmapRenderer
    WriteableBitmapRenderer renderer =
      new WriteableBitmapRenderer(_tiltshiftEffect,
      _tiltshiftImageBitmap, OutputOption.PreserveAspectRatio);
    _tiltshiftImageBitmap = await renderer.RenderAsync();
    TiltShiftImage.Source = _tiltshiftImageBitmap;
  }
  catch (Exception exception) {
    MessageBox.Show("Exception:" + exception.Message);
    return;
  }
  SaveButton.IsEnabled = true; 
}

Guardar foto finalmente, necesita ser salvada atrás, como se muestra en la imagen procesada figura 15.

Figura 15 salvando la imagen procesada

private async void SaveImage_Click(object sender, RoutedEventArgs e) {
  SaveButton.IsEnabled = false;
  if (_tiltshiftEffect == null) {
    return;
  }
  var jpegRenderer = new JpegRenderer(_tiltshiftEffect);
  // JPEG renderer gives the raw buffer for the filtered image
  IBuffer jpegOutput = await jpegRenderer.RenderAsync();
  // Save the image as a JPEG to the saved pictures album
  MediaLibrary library = new MediaLibrary();
  string fileName = string.Format("TiltShiftImage_{0:G}", DateTime.Now);
  var picture = library.SavePicture(fileName, jpegOutput.AsStream());
  MessageBox.Show("Tilt Shift Image saved!");
  SaveButton.IsEnabled = true;
}

Y ya me cansé.Ahora que usted entiende PureView avanzada cámara captura y procesamiento de la imagen usando el SDK de Nokia Imaging post.Espero encontraron este artículo útil, y estoy deseando escuchar sus comentarios y sugerencias.

Rajesh Lal trabaja en Nokia y es un apasionado de las tecnologías Web y Windows Phone. Su último libro es "Digital Design Essentials: 100 maneras de crear un mejor Desktop, Web e Interfaces móviles"(Rockport Publishers, 2013). Lo puedes encontrar en bit.ly/dsgnbk. Para obtener más información sobre el autor, consulte iRajLal.com.

Gracias a los siguientes expertos técnicos por su ayuda en la revisión de este artículo: Chevon Christie (Microsoft) y párrafos Wadehra (Nokia)