Este artigo foi traduzido por máquina.

Windows Phone

Programação o efeito Nokia Sketch no Windows Phone 8

Srikar Doddi

Baixar o código de exemplo

Nokia recentemente lançou o SDK Imaging Nokia em beta para permitir que os desenvolvedores de Windows Phone 8 criar experiências de imagem avançadas para smartphones Nokia Lumia.

O Nokia Imaging SDK inclui uma biblioteca para manipulação de imagens capturadas e armazenadas por dispositivos Windows Phone. Suas características incluem a decodificação e codificação de imagens JPEG, aplicar filtros e efeitos, recorte, rotação e redimensionamento. O Nokia Imaging SDK fornece mais de 50 premade filtros e efeitos. Você pode não só aplicar efeitos como sépia, cartoon, desenho e assim por diante, mas também aplicar auto-melhorar, controle de brilho, matiz, saturação e muitos mais. O SDK foi desenvolvido especificamente para a imagem latente móvel, com desempenho de velocidade e memória como impulsores-chave.

Neste artigo, vou demonstrar o uso do efeito através de um aplicativo de exemplo chamado papel Photo sketch. O efeito do esboço é aplicado para o fluxo de visor em tempo real e fornece aos usuários a capacidade de capturar imagens e salve-os no rolo da câmera do telefone. Desenvolvi este aplicativo usando o Visual Studio 2012, a Nokia Imaging SDK e o SDK do Windows Phone 8. Eu usei um smartphone Nokia Lumia 920 para testá-lo.

Nokia Imaging SDK básico

O Nokia Imaging SDK foi criado pela Nokia para dar-lhe acesso completo para uma poderosa biblioteca de manipulação de imagens ferramentas que ajudam você criam grandes apps de imagens rapidamente e facilmente. Como mencionado, este SDK foi projetado com alto desempenho e baixo-memória uso em mente, que é importante porque a Microsoft e Nokia estão trabalhando para criar a próxima geração de aparelhos como o Nokia Lumia 1020. O SDK já é usado no aplicativo de imagem da própria Nokia, estúdio criativo. O SDK e a biblioteca estão disponíveis gratuitamente (Veja o contrato de licença em bit.ly/130tVHJ), e o SDK atualmente suporta somente Windows Phone 8 apps.

O Nokia SDK Imaging oferece os seguintes recursos:

• Uma API simples de usar que está disponível tanto de código gerenciado, bem como código nativo. Isto significa que o SDK é fornecido como uma biblioteca de tempo de execução do Windows Phone e você pode chamar os métodos da biblioteca de Visual Basic ou C++.A API vem com uma variedade de classes e métodos para várias tarefas de imagens.
• RAJPEG tecnologia de acesso imagem dados sem decodificar uma imagem JPEG em primeiro lugar, que permite pré-visualizações extremamente rápidas, aplicação de efeitos, corte e rotação de imagens de alta resolução.
• Mais de 50 filtros, efeitos e melhorias. Alguns desses aprimoramentos permitem que você programaticamente ajustar os níveis RGB, matiz, saturação e brilho. Você também pode criar efeitos personalizados e filtros, se necessário. Além desses filtros e efeitos, o SDK permite também para recorte, rotação e redimensionamento com a funcionalidade de desfazer ilimitado.
• Vários aplicativos de amostra inteiramente caracterizado permitem que você explore o código fonte e descubra as funcionalidades do SDK. Os exemplos cobrem uma gama de características tais como a aplicação de várias camadas de filtro para fotos e manipulação em tempo real das propriedades de filtro.
• Rica documentação com guias de início rápido, projetos de exemplo, guias de referência de API e vários documentos que fornecem uma visão geral de alguns dos principais conceitos necessários para criar aplicativos de imagem.

Guia de Introdução

De alto nível, eu usei as seguintes APIs do SDK da imagem latente do Nokia para meu aplicativo de amostra:

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

A API de Nokia.Graphics.Imaging contém a funcionalidade de núcleo do Nokia Imaging SDK, que inclui todos os filtros de imagem, efeitos de imagem, codificador JPEG e decodificador. A biblioteca de Nokia.InteropServices.WindowsRuntime é usada internamente e é uma biblioteca necessária que precisa ser referenciado no seu projeto. Ele contém uma classe chamada BufferFactory que é usado para criar uma instância de IBuffer. Este SDK pode ser instalado usando o Gerenciador de pacotes NuGet no Visual Studio. Você pode encontrar o pacote procurando por NokiaImagingSDK.

O gráfico do objeto deste app consiste basicamente em três classes principais, mostradas no Figura 1. O MainPage é a sua página de app de telefone típico implementada por um arquivo XAML e c# contrapartida. Essa classe MainPage implementa o aplicativo interface do usuário, que inclui o MediaElement que exibe o visor da câmera com o efeito de desenho. A classe MainPage também possui as instâncias das outras duas classes principais: CameraStreamSource e NokiaSketchEffect. O CameraStreamSource, derivado de MediaStreamSource, fornece os dados da câmera, e o NokiaSketchEffect implementa o efeito de desenho. A CameraStreamSource é uma classe implementada pela Nokia e é fornecido aos desenvolvedores através de amostras de app da empresa fora da Nokia Imaging SDK.

Figura 1 diagrama de classe para o projeto da foto papel

O gráfico do objeto se traduz na organização do código mostrado no Figura 2.

Figura 2 estrutura de solução de Visual Studio

Definindo a interface do usuário

A interface do usuário deste app é simples, como mostrado em Figura 3. A página principal exibe a imagem de um visor e vem com uma barra de aplicativo que possui um único botão para capturar a foto com o efeito do modo de desenho.

Figura 3 foto o papel da interface do usuário

Figura 4 mostra a XAML marcação para a página principal usando o elemento Grid para definir o recipiente utilizado para visualizar o visor com o efeito de desenho aplicado.

Figura 4 a marcação XAML para o principal página

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

A barra de aplicativos é construída usando a marcação mostrada na Figura 5. Como você pode ver, ele define um botão de captura e um item de menu sobre. O botão de captura está associado com um manipulador de eventos para manipular o evento click.

Figura 5 barra de aplicativo marcação

<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 usa um modelo de segurança baseada em capacidades. Este modelo permite que os usuários optam em permitir que determinadas funcionalidades ser ativado. No meu aplicativo de demonstração, os seguintes recursos precisam ser ativados para usuários:

• ID_CAP_ISV_CAMERA: Isso fornece acesso para a câmera traseira (primária) ou a câmera frontal.
• ID_CAP_MEDIALIB_PHOTO: Isso fornece acesso somente leitura para fotos na biblioteca de mídia. Também dá um app a capacidade de salvar as fotos no rolo da câmera. Vou demonstrar esse recurso posteriormente neste artigo para salvar uma foto para o rolo da câmera depois de aplicar o efeito de desenho.

Em termos de requisitos de hardware, o aplicativo requer uma câmera traseira voltados para funcionar corretamente. A opção ID_REQ_REARCAMERA é selecionada para impedir que o aplicativo instalar um telefone sem uma câmera traseira.

Aplicar um efeito de desenho em tempo real para o visor da câmera

A classe NokiaSketchEffect é responsável por aplicar o efeito de desenho em tempo real para o visor da câmera. Observe o uso de SketchMode.Gray para obter o efeito desejado em meu aplicativo. O Get­SampleAsync função na classe CameraStreamSource é responsável por processar o buffer de câmera usando o efeito de esboço, e fornece o elemento de mídia com o buffer. O método GetSampleAsync usa o Nokia­SketchEffect.GetNewFrameAndApplyEffect método para obter o buffer de câmera modificada. O código em Figura 6 mostra como ele é implementado.

Figura 6-obter o Buffer de câmera modificada

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

O captureDevice na função é uma variável privada da foto­CaptureDevice classe encontrada em Windows.Phone.Media.Capture. A função RenderToBitmapAsync é fornecido pelo Nokia SDK Imaging para apoiar o render assíncrono de EditingSession para um bitmap. A EditingSession é uma classe importante fornecida pelo Nokia SDK Imaging para representar uma sessão de edição de processamento de imagem. O objeto EditingSession é o núcleo deste SDK. Em um fluxo de trabalho típico, o EditingSession é criado a partir de uma imagem, filtros ou efeitos são adicionados a esta sessão, o EditingSession é então processada para um bitmap ou um buffer de memória, e finalmente o EditingSession está fechado. O código em Figura 6 mostra como um novo bitmap associado com o argumento processedBuffer é criado, o efeito do esboço é aplicado a ele e então ele é processado para o novo buffer. Finalmente, o método de CreateSketchFilter produz o olhar da imagem esboçado. Esta função leva SketchMode — uma enumeração — como um argumento para passar os modos para o filtro de esboço. Os dois modos disponíveis são cinza para desenho em escala de cinza e cores para o desenho na cor. Como você pode ver, eu usei o SketchMode.Gray no Figura 6 código. Isso permite que o aplicativo Photo Paper produzir imagens em escala de cinza.

Capturar e salvar a imagem como uma imagem JPEG ao rolo da câmera

Até agora, eu mostrei como aplicar o efeito de desenho em tempo real para o visor. Agora eu vou olhar para capturar uma imagem do visor e depois salvá-lo para o rolo da câmera do dispositivo. A função de captura primeiro inicia a focagem automática e então capta uma fotografia. Além de lidar com a funcionalidade de captura de barra de aplicativo, você também pode tratar a captura iniciada pelo gatilho de dispositivo de hardware.

O código mostrado na Figura 7 permite a captura por meio do botão da câmera. Mais especificamente, a função ativa ou desativa a função de liberação do obturador de hardware. A classe CameraButtons fornece os eventos que são acionados por botões de obturador o dispositivo. Um tal evento é o evento de ShutterKeyHalfPressed, acionado quando o botão de hardware do obturador é pressionado e mantido por aproximadamente 800 milissegundos. Outro evento é o evento ShutterKeyPressed. Esse evento ocorre quando o botão do obturador de hardware recebe uma imprensa completa. A função SetCameraButtonsEnabled também lida com a remoção desses manipuladores de evento para ajudar a liberar a memória relacionada com a câmera.

Figura 7 permite captura através do botão da câmera

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

Agora eu vou explicar detalhadamente o processo de captura. O código mostrado na Figura 8, o objeto de câmera representa o dispositivo de captura de foto, a câmera await.FocusAsync função inicia a focagem automática e o método de StartCaptureAsync captura um quadro. Mas antes que você pode capturar o quadro, você precisa preparar a sequência de captura. Para fazer isso, chamando PrepareCaptureSequenceAsync. Você também está criando um objeto de seqüência de captura com um quadro, como você pode ver da câmera.CreateCaptureSequence(1). O valor 1 indica o número de quadros que será capturado imediatamente depois que você iniciar a captura. Finalmente, você também especificar propriedades de câmera e configurações de foto usando o método de KnownCameraPhotoProperties. O LockedAutoFocusParameters é definido como None, indicando o foco, exposição e balanço de branco configurações irá ajustar automaticamente antes da captura.

Figura 8 o processo 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);
    ...
}

Finalmente, o código a seguir mostra como salvar a foto capturada ao rolo da câmera:

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

A classe MediaLibrary é fornecida pela API do XNA e é usada para salvar fotos para a biblioteca de mídia do telefone. O XNA namespace contém classes para enumerar, jogar e ver fotos, álbuns, playlists e músicas. Você usa a classe EditingSession do SDK da imagem latente do Nokia para criar uma sessão de buffer de imagem compactada e em seguida, aplique o filtro de efeito esboço antes de salvar as imagens do rolo da câmera usando a função SavePictureToCameraRoll.

Integração de selecionador de lente

No Windows Phone 8, você pode criar uma lente de mídia rica que abre a partir do aplicativo de câmera embutida e lança o seu direito de app na experiência visor. A fim de integrar-se com a experiência da lente, o app precisa se registrar para a extensão de Camera_Capture_App. Esta extensão declara ao sistema operacional que o app Photo Paper pode exibir um visor quando é lançado o seletor de lente de. Extensões são especificadas no arquivo WMAppManifest. Você precisa abrir esse arquivo com o editor de texto: Botão direito do mouse no arquivo e escolha "abrir com... | Editor de texto. " Logo após o elemento de Tokens, dentro do elemento de extensões, a extensão da lente é especificada com o seguinte elemento de extensão:

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

Agora seu app é completo com integração de lente e pode conservar direito fotos no rolo da câmera do dispositivo. A imagem em Figura 9 foi tirada com o app de câmera embutida e a imagem em Figura 10 foi tirada com a aplicação de papel foto usando o efeito de desenho.

Figura 9 Regular imagem tirada com o built-in câmera App

Figura 10 uma imagem tirada usando o papel foto App usando o efeito de desenho

Adicionar seus próprios recursos

Neste artigo, eu explorei a captura de foto APIs da Microsoft e o novíssimo Nokia Imaging SDK para criar uma experiência rica de imagens. Aplicado o efeito de esboço para o visor em tempo real e então capturou a imagem e salva-lo no rolo da câmera do dispositivo. Como você pode ver, há toneladas de características que você pode usar agora graças a Nokia Imaging SDK, o que torna mais fácil criar aplicativos como este. Alguns pequenos detalhes foram omitidos em nome da brevidade, mas você pode consultar o código para download (github.com/Srikar-Doddi/PaperPhoto) para obter uma compreensão completa. Este é apenas um exemplo de usando o SDK de Imaging da Nokia, mas existem muitos outros recursos que você pode adicionar e as possibilidades são ilimitadas. Espero que você use este código como ponto de partida e adiciona mais recursos para este app.

Srikar Doddi é o diretor executivo de engenharia na Kaplan teste prepos. Você pode encontrar seus escritos em meio às medium.com/@SrikarDoddi. Ele também é o criador de apps da simplista, DateTileScheduler e papel foto para Windows Phone 8 e os Prompter e Dabble apps para Windows 8. Jairo pode chegar via e-mail em srikar.doddi@gmail.com.

Agradecemos ao seguinte especialista técnico pela revisão deste artigo: Lance McCarthy (Nokia)
Lance McCarthy é um embaixador da Nokia e Telerik XAML Support Specialist (ext-lance.mccarthy@nokia.com)