Este artigo foi traduzido por máquina.

Windows Phone

Crie um aplicativo avançado de câmera para os telefones Nokia Lumia

Rajesh Lal

Neste artigo, vou ensiná-lo a desenvolver um app para o 41-megapixel (MP) Nokia Lumia 1020 e smartphones Nokia Lumia 1520 de 20MP. Vou me concentrar principalmente sobre o Nokia Lumia 1020, mas as informações se aplica a todos os dispositivos de Lumia Windows Phone 8 com tecnologia PureView. Em primeiro lugar, falarei sobre PureView, a tecnologia por trás da poderosa câmera constam os telefones, e então vou explicar os recursos avançados disponíveis para acessar e melhorar suas fotos. Fornecerei uma visão geral do Nokia Imaging SDK (tem toneladas de ready-to-use filtros gráficos) e uma passo a passo de como usá-lo. Também falarei sobre o fluxo de trabalho típico necessário para construir um aplicativo de câmera e mostrar-lhe como criar um filtro de fotografia tilt-shift para simular a profundidade de campo. Vamos começar.

Compreender a tecnologia de PureView em um celular com câmera 41MP

PureView tecnologia consiste de câmera avançada de hardware e software relacionado. Juntos, eles permitem a captura e salvamento de imagens de alta resolução, de alta qualidade. Os três principais aspectos da tecnologia de PureView são uma lente de câmera de alta resolução, zoom oversampling e sem perdas. Vou explicar brevemente cada um.

O núcleo da tecnologia de PureView é um sensor de alta resolução, 7.728 pixels de largura e 5.368 pixels de altura, totalizando mais de 41MP. Isso permite que a câmera do telefone capturar fotografias grandes, seis vezes maiores do que uma fotografia normal 5MP.

Figura 1 compara uma imagem de resolução de 41MP com uma foto de resolução de 5MP. Por causa desta resolução 41MP, pode tirar 34MP de alta qualidade 16:9 fotos (7.728 x 4.354), bem como 38MP 4:3 fotografias (7.152 x 5.368), conforme mostrado na exibição de lente da câmera Figura 2.

Figura 1 41MP imagens em comparação com uma foto de 5MP

Figura 2 Zoom sem perdas ainda é parte da fotografia

Oversampling de pixel é quando a câmera tira uma foto 41MP e cria uma imagem de alta qualidade 5MP. Esta é a foto que você vê na tela do telefone. Além disso, o processo de sobreamostragem mantém toda a riqueza de detalhes na imagem mas filtros afastado qualquer ruído visual.

O terceiro aspecto da PureView tecnologia é zoom sem perdas, que simplesmente significa que você não perca a qualidade da imagem quando você aumenta o zoom. Isto é possível porque — em qualquer momento — você tem disponível a imagem original de 41MP, que é oversampled para mostrar uma foto de 5MP. Quando você aumenta o zoom, você está realmente dando zoom em uma parte da foto original 41MP. Até um zoom de 3x, você está ainda lidando com partes da foto original 41MP. E mesmo no zoom máximo, sua qualidade de foto ainda é a qualidade de uma foto de 5MP regular. Devido a sobreamostragem, a qualidade da imagem só fica melhor, ao aumentar o zoom. Figura 2 mostra como o zoom sem perdas ainda é parte da fotografia original.

O Nokia SDK de imagem

Quando estiver criando um aplicativo de câmera, uma fotografia de alta resolução é a matéria-prima, mas você vai precisar de uma pilha de software avançado que pode usar as imagens enormes e permitem que você acessar e manipulá-los. Isto é onde o Nokia Imaging SDK vem em cena (bit.ly/1hJkmpl). Ele fornece um conjunto de recursos avançados para acessar uma fotografia de alta resolução tirada pela câmera.

O Nokia Imaging SDK inclui decodificação parcial de JPEG, chamado tecnologia JPEG de acesso aleatório (RAJPEG). RAJPEG permite acesso aleatório de dados JPEG, rápida redução de escala de imagens e descodificação parcial instantânea. Estes aspectos de RAJPEG permitem a manipulação de imagens em tempo real. O Nokia Imaging SDK contém mais de 50 filtros, efeitos e melhorias. Ainda contém um conjunto das operações mais comuns de imagem, tais como cortar, redimensionar, girar e desfazer, só para citar alguns. Estas características de out-of-the-box ajudá-lo a criar aplicativos avançados de câmera/foto-centric sem se preocupar com as funcionalidades mais comuns. Para usar o SDK de Imaging Nokia em seu projeto, siga as instruções na página da Nokia Lumia desenvolvedor biblioteca (bit.ly/KzDPNG).

Imaging APIs SDK

As APIs disponíveis no SDK de imagem pode ser facilmente aplicadas para os dados da imagem capturados pela câmera em relativamente poucas linhas:

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();

Aqui, e.ChosenPhoto é usado para criar um StreamImageSource. O e.ChosenPhoto pode vir diretamente a partir de uma foto de câmera-capturado ou de qualquer foto no álbum. Então criou um efeito de filtro para aplicar na foto e acrescentou uma FogFilter artístico para a matriz de filtros em meu efeito. Se desejado, essa matriz pode conter vários filtros, que são aplicados e processados para myImageBitmap usando um WriteableBitmapRenderer. Como o nome sugere, ele processa uma fonte de imagem para um WriteableBitmap. Finalmente, o método de RenderAsync ajuda na assíncrono processamento da imagem.

Juntamente com FogFilter, você pode aplicar mais de 50 outros filtros de imagem SDK para uma fotografia. Figura 3 mostra a lista de filtros de realce dentro o App gratuito Explorer filtro, disponível fora da caixa para desenvolvedores. Inclui filtros como AutoEnhanceFilter, AutoLevelsFilter, ColorBoostFilter e ExposureFilter. Estas são filtros você pode aplicar diretamente a qualquer foto ou imagem capturada em tempo real para melhorar a qualidade.

Figura 3 filtros de realce no Gerenciador de filtro de App grátis

Há outros filtros para brilho (BrightnessFilter) e contraste (ContrastFilter), que tenham parâmetros de brilho e contraste. Há um número de filtros apenas para efeitos artísticos, tais como relevo, em tons de cinza e sépia. Há também os edição de imagem "filtros" que fornecem as funções comumente usadas anteriormente mencionadas como girar, inverter, espelhar e assim por diante. Isto podem ser aplicados a uma única imagem várias vezes, uma em cima da outra, para criar efeitos dramáticos.

Workflow de App de câmera de alta resolução

Agora que eu contei sobre o hardware e recursos de Imaging SDK, eu vou te mostrar o fluxo de trabalho típico que você precisa para construir uma poderosa câmera telefone app. Porque estou lidando com uma imagem enorme, eu tenho que jogar bonito, então meu app não fazer outros apps lento ou tomar uma enorme quantidade de memória. Isto pode ser assegurado por não tentar manipular diretamente a imagem grande na câmera.

Em qualquer ponto do tempo, a câmara terá duas fotografias: a fotografia original do 41MP e a fotografia de 5MP, que é mostrada no painel de visualização de câmera. Em meu aplicativo, eu sempre vou trabalhar sobre a figura de telefone de câmera de 5MP, que pode ser a imagem saturada da foto inteira, a parte ampliada da imagem, ou a parte saturada e parcialmente ampliada da foto.

Figura 4 mostra o fluxo de trabalho para o app de imagens.

Figura 4 imagem App Workflow

As etapas individuais incluem:

• Capture uma imagem de alta resolução.
• Salve-o em seu local de armazenamento.
• Faça sua mágica usando o SDK Imaging.
• Escala para baixo a imagem resultante de 5MP.
• Salve a imagem de 5MP aprimorado ao rolo da câmera.

Criando um filtro fotográfico: Tilt-Shift

Agora apresentarei o fluxo de trabalho de meu fotográfico baseado em filtro, tilt-shift câmera app. Fotografia Tilt-shift é o uso de movimentos de câmera — especificamente inclinação — para foco seletivo simular uma cena em miniatura (ver Figura 5). Você pode encontrar mais informações sobre a fotografia tilt-shift no bit.ly/1bRYYNK. Neste app, eu vou simular a profundidade de campo com pós-processamento digital usando vários filtros no Nokia Imaging SDK.

Figura 5 o efeito Tilt-Shift

Eu vou te mostrar como isso se encaixa no fluxo de trabalho discutido anteriormente.

Adquirir foto o primeiro passo para qualquer aplicativo baseado em câmera é adquirir uma imagem na câmera do telefone ou na Galeria de imagens. Você pode fazer isso de três maneiras diferentes. Um está usando a câmera de 5MP padrão usando o CameraCaptureTask, o que desencadeia o visor da câmera normal. O segundo método é usando o controle de selecionador de foto nativo chamado por PhotoChooserTask. Estas duas alternativas são suficientes para a maioria dos aplicativos de câmera, mas para um app avançado onde você precisa para capturar fotos de alta resolução, você precisa criar um visor personalizado, o que desencadeia o visor de aplicativo built-in câmera Pro com alta resolução. Isso é feito usando o objeto PhotoCaptureDevice. Ver Figura 6 para a lista de métodos e propriedades suportadas pelo PhotoCaptureDevice.

 Figura 6 métodos e propriedades com suporte por PhotoCaptureDevice

A interface do usuário o app de tilt-shift é composto por duas imagens: um Original­imagem para mostrar a real imagem capturada ou selecionado usando o seletor de foto e o TiltShiftImage, que exibe a imagem final após o filtro de tilt-shift é aplicado à imagem original. A SelectButton provoca o seletor de foto nativo e a câmera­botão aciona a câmera, conforme mostrado no código da Figura 7.

Figura 7 o código de interface do usuário XAML

<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>

A câmera resultante UI é mostrado no Figura 8.

Figura 8, a interface do usuário do App de Tilt-Shift

Capturar uma imagem de alta resolução os dois primeiros métodos de funcionalidade de selecionador de câmera e fotografia normal são simples. O namespace Microsoft.Phone.Tasks tem dois objetos de tarefa, câmera­CaptureTask e PhotoChooserTask, para estas duas finalidades. Basta Selecione a imagem de seletor da foto ou do resultado da captura da câmera como a fonte do seu 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 uma foto de alta resolução, eu preciso criar um visor personalizado usando uma escova vídeo cuja fonte será a imagem do aplicativo câmera 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>

Eu também preciso inicializar o aplicativo da câmera Pro com a resolução correta dependendo do dispositivo, Lumia 1020 ou Lumia 1520 e o tipo de resolução que queria. Ver Figura 9 para opções.

Figura 9 opções de alta resolução

Figura 10 mostra como você pode inicializar o aplicativo da câmera Pro.

Figura 10-inicializando o aplicativo da câmera Pro

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;
}

Capturar a imagem do aplicativo de câmera Pro envolve eventos ShutterHalfKeyPressed e ShutterKeyPressed, como mostrado em Figura 11.

Figura 11 captura uma imagem através de eventos tecla do obturador

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
      }
    }
}

Fazer a mágica primeiro eu vou usar o PickImageCallback para tirar uma foto, que é definida como uma fonte do OriginalImage. Para acessar dimensões da imagem, eu vou usar ImageProviderInfo.

Também vou criar filtros e aplicá-las na sessão. Para criar um efeito de tilt-shift, eu vou usar três filtros diferentes: BlurFilter com KernelSize 15; ColorBoostFilter com valor 0,5; e novamente BlurFilter com 21 KernelSize. Os dois Borrão faz filtros de primeiro plano e o plano de fundo da imagem fora de foco e o ColorBoostFilter clareia a região, o que eu quero fazer para criar o efeito de miniatura. O código para isso é mostrado na Figura 12.

Figura 12 inicializando filtros para um efeito

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 o filtro de tilt-shift, eu preciso de três retângulos: o retângulo superior para borrão; o retângulo médio para aumentar a cor; e o retângulo inferior para borrão novamente (ver Figura 13). Neste exemplo, usarei uma região retangular, chamada TiltshiftRegion, que o usuário pode tocar e mudar para personalizar a posição onde ocorre a mudança de inclinação. O retângulo translúcido mostrado na Figura 13 torna-se inclinação deslocada e o resto da área está desfocado.

Figura 13 os três retângulos utilizados para o efeito Tilt-Shift

A posição de TiltShiftRegion é usada para calcular os três retângulos onde os filtros são aplicados (vê Figura 14).

Figura 14 combinando filtros para um efeito

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; 
}

Salvar foto finalmente, a imagem processada precisa ser salvo de volta, como mostrado em Figura 15.

Figura 15-salvando a imagem processada

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;
}

E eu sou feito. Você agora entende PureView avançada câmera captura e pós-processamento da imagem usando o SDK da imagem latente da Nokia. Espero que você encontrou este artigo útil, e estou ansioso para ouvir seus comentários e sugestões.

Rajesh Lal trabalha na Nokia e é apaixonado por tecnologias Windows Phone e a Web. Seu livro mais recente é "fundamentos de Design Digital: 100 maneiras de criar melhor Desktop, Web e Interfaces móveis"(Rockport Publishers, 2013). Você pode encontrá-lo em bit.ly/dsgnbk. Para obter informações sobre o autor, consulte iRajLal.com.

Agradecemos aos seguintes especialistas técnicos pela revisão deste artigo: Chevon Christie (Microsoft) e Wadehra pars (Nokia)