Cet article a fait l'objet d'une traduction automatique.

Windows Phone

L'effet esquisse de Nokia dans Windows Phone 8 de programmation

Srikar Doddi

Télécharger l'exemple de code

Nokia a récemment publié le SDK d'imagerie des Nokia en version bêta pour permettre aux développeurs Windows Phone 8 créer des expériences d'imagerie avancées pour les smartphones Nokia Lumia.

Le Nokia Imaging SDK inclut une bibliothèque pour la manipulation des images capturées et stockées par des dispositifs de Windows Phone. Ses caractéristiques comprennent le décodage et codage d'images JPEG, en appliquant des filtres et effets, recadrage, rotation et le redimensionnement. Le Nokia Imaging SDK fournit plus de 50 effets et des filtres prédéfinis. Vous pouvez non seulement appliquer des effets tels que sépia, bande dessinée, croquis et ainsi de suite, mais s'appliquent aussi-amélioration automatique, réglage de la luminosité, teinte, saturation et bien d'autres. Le SDK a été spécifiquement développé pour l'imagerie mobile, avec des performances de vitesse et de la mémoire comme principaux moteurs.

Dans cet article, je vais démontrer l'utilisation de l'effet de l'esquisse à travers un exemple d'application appelé papier Photo. L'effet esquisse est appliqué dans le flux de viseur en temps réel et offre aux utilisateurs la possibilité de capturer des images et les enregistrer dans la pellicule du téléphone. J'ai développé cette application en utilisant les Visual Studio 2012, le SDK d'imagerie de Nokia et le kit de développement Windows Phone 8. J'ai utilisé un smartphone Nokia Lumia 920 pour le tester.

Nokia imagerie SDK Basics

Le SDK d'imagerie de Nokia a été créé par Nokia pour vous donner un accès complet à une puissante bibliothèque de manipulation d'images outils qui vous aident à créent des applications d'imagerie grand rapidement et facilement. Comme mentionné, ce SDK a été conçu avec la haute performance et basse-mémoire à l'esprit, ce qui est important, parce que Microsoft et Nokia s'emploient à créer des appareils de nouvelle génération tels que le Nokia Lumia 1020. Le SDK est déjà utilisé dans l'application d'imagerie Nokia propres, Studio de création. Le SDK et la bibliothèque sont disponibles gratuitement (voir le contrat de licence à bit.ly/130tVHJ), et le SDK prend actuellement en charge uniquement les applications Windows Phone 8.

Le SDK d'imagerie de Nokia offre les fonctionnalités suivantes :

• Une API simple à utiliser qui est disponible à la fois du code managé ainsi que du code natif. Cela signifie que le SDK est fourni comme une bibliothèque d'exécution de Windows Phone et vous pouvez appeler les méthodes de la bibliothèque de c#, Visual Basic ou C++.L'API est livré avec une gamme de classes et de méthodes pour diverses tâches d'imagerie.
• Technologie RAJPEG pour accéder aux images données sans décoder une image JPEG entière tout d'abord, qui permet pour les prévisualisations incroyablement rapides, application des effets, recadrage et rotation d'images haute résolution.
• Plus de 50 filtres, effets et améliorations. Certaines de ces améliorations vous permettent d'ajuster par programme les niveaux, la teinte, la saturation et la luminosité RGB. Vous pouvez également créer des effets personnalisés et des filtres si nécessaire. En plus de ces filtres et effets, le SDK permet également de recadrage, rotation et le redimensionnement avec la fonctionnalité d'annulation illimitée.
• Plusieurs exemples complets d'applications vous permettent d'explorer le code source et de découvrir les fonctionnalités du SDK. Les exemples couvrent un éventail de fonctionnalités telles que la manipulation en temps réel des propriétés du filtre et l'application de plusieurs couches de filtre aux photos.
• Documentation riche avec les guides de démarrage rapide, exemples de projets, les guides de référence API et plusieurs documents qui donnent un aperçu de certaines des notions fondamentales nécessaires pour créer des applications d'imagerie.

Mise en route

À un niveau élevé, j'ai utilisé l'API suivantes dans le kit de développement Nokia Imaging pour mon exemple d'application :

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

L'API de Nokia.Graphics.Imaging contient la fonctionnalité de base du Nokia Imaging SDK, qui inclut tous les filtres d'image, effets d'image, encodeur JPEG et décodeur. La bibliothèque Nokia.InteropServices.WindowsRuntime est utilisée en interne et une bibliothèque requise qui doit être référencé dans votre projet. Il contient une classe appelée BufferFactory qui est utilisé pour créer une instance de IBuffer. Ce SDK peut être installé en utilisant le gestionnaire de package NuGet au Visual Studio. Vous pouvez trouver le paquet en recherchant NokiaImagingSDK.

Le graphique d'objets de ce soft se compose essentiellement de trois classes principales, montrés dans Figure 1. La page principale est votre page d'app téléphone typique mis en œuvre par un fichier XAML et un homologue de c#. Cette classe MainPage implémente l'app UI, qui comprend l'objet MediaElement qui affiche le viseur de l'appareil avec l'effet de l'esquisse. La classe MainPage possède également les cas des deux autres classes principales : CameraStreamSource et NokiaSketchEffect. La CameraStreamSource, dérivé de MediaStreamSource, fournit les données de la caméra, et le NokiaSketchEffect met en œuvre l'effet esquisse. Le CameraStreamSource est une classe implémentée par Nokia et n'est fourni aux développeurs via échantillons app de la société à l'extérieur de la Nokia Imaging SDK.

Figure 1 le diagramme de classes pour le projet de Photo papier

Le graphique d'objet se traduit par l'organisation de code illustrée dans Figure 2.

Figure 2 Structure de Solution Visual Studio

Définition de votre interface utilisateur

L'interface utilisateur de cette application est simple, comme le montre Figure 3. La page d'accueil affiche l'image d'un viseur et est livré avec une barre d'application qui a un seul bouton pour capturer la photo avec l'effet de mode Esquisse.

Figure 3 la Photo papier UI

Figure 4 montre le balisage XAML pour la page d'accueil à l'aide de l'élément Grid pour définir le conteneur utilisé pour afficher le viseur avec l'effet esquisse appliqué.

Figure 4 le balisage XAML pour la 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 barre de l'application est construite en utilisant le balisage indiqué dans Figure 5. Comme vous pouvez le voir, il définit un bouton de capture et un élément de menu propos. Le bouton de capture est associé à un gestionnaire d'événements pour gérer l'événement click.

Figure 5 la barre d'Application 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 utilise un modèle de sécurité axée sur les capacités. Ce modèle permet aux utilisateurs d'opter pour permettre certaines fonctionnalités à activer. Dans mon application de démo, les fonctionnalités suivantes doivent être activées pour les utilisateurs :

• ID_CAP_ISV_CAMERA : Cela permet d'accéder à la caméra arrière (primaire) ou la caméra frontale.
• ID_CAP_MEDIALIB_PHOTO : Ceci fournit l'accès en lecture seule aux photos dans la Médiathèque. Il donne également une application la possibilité de sauvegarder des photos dans l'appareil-photo. Je vais démontrer cette capacité plus tard dans l'article pour enregistrer une photo sur l'appareil-photo après avoir appliqué l'effet esquisse.

En fonction de la configuration matérielle requise, l'application nécessite une caméra de face vers l'arrière pour fonctionner correctement. L'option ID_REQ_REARCAMERA est sélectionnée afin d'empêcher l'application de s'installer sur un téléphone sans une caméra arrière.

Application d'un effet de dessin en temps réel pour le viseur de l'appareil

La classe NokiaSketchEffect est chargée d'appliquer l'effet esquisse en temps réel pour le viseur de l'appareil. Notez l'utilisation de SketchMode.Gray pour obtenir l'effet désiré dans mon application. L'EEG­fonction SampleAsync dans la classe CameraStreamSource est responsable du traitement de la mémoire tampon de caméra à l'aide de l'effet de l'esquisse, et il fournit l'élément media avec le tampon. La méthode de GetSampleAsync utilise le Nokia­SketchEffect.GetNewFrameAndApplyEffect méthode pour obtenir le tampon de l'appareil photo mis à jour le. Le code dans Figure 6 montre comment il est mis en œuvre.

La figure 6, obtenir le tampon de l'appareil photo mis à jour le

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

Le captureDevice dans la fonction est une variable privée de la Photo­CaptureDevice classe trouvée dans Windows.Phone.Media.Capture. La fonction RenderToBitmapAsync est fournie par le SDK de Imaging de Nokia à l'appui de la rendre asynchrone de EditingSession à une bitmap. La EditingSession est une classe importante fournie par le SDK de l'imagerie de Nokia pour représenter une session d'édition-traitement de l'image. L'objet EditingSession est au cœur de ce SDK. Dans un flux de travail typique, la EditingSession est créée à partir d'une image, filtres ou effets sont ajoutés à cette session, la EditingSession est ensuite rendue à une image bitmap ou dans un mémoire tampon, et enfin la EditingSession est fermée. Le code dans Figure 6 montre comment une nouvelle bitmap associée à l'argument processedBuffer est créée, l'effet esquisse est appliqué à lui et puis il est restitué dans la nouvelle mémoire tampon. Enfin, la méthode CreateSketchFilter génère l'apparence de l'image esquissée. Cette fonction prend SketchMode — une énumération — comme argument pour passer les modes pour le filtre de croquis. Les deux modes disponibles sont gris pour les croquis en niveaux de gris et couleur croquis en couleur. Comme vous pouvez le voir, j'ai utilisé SketchMode.Gray dans le Figure 6 code. Cela permet à l'application de papier Photo produire des images en niveaux de gris.

Capturer et enregistrer l'image sous forme d'Image JPEG à l'appareil-photo

Jusqu'à présent, j'ai montré comment appliquer l'effet esquisse en temps réel pour le viseur. Maintenant, je vais regarder à la capture d'une image du viseur et puis l'enregistrer sur l'appareil-photo sur l'appareil. La fonction de capture initie d'abord autofocus et capte alors la photo. En plus de gérer les fonctionnalités de capture de la barre de l'application, vous pouvez également gérer la capture initiée par la détente de périphérique matériel.

Le code illustré dans Figure 7 permet la capture par le bouton de la caméra. Plus précisément, la fonction active ou désactive la fonction de déclenchement d'obturateur matériel. La classe CameraButtons fournit les événements qui sont déclenchés par les boutons de dispositif d'obturation. Un tel événement est l'événement de ShutterKeyHalfPressed, déclenché lorsque le bouton d'obturateur de matériel est pressé et maintenu pendant environ 800 millisecondes. Un autre événement est l'événement ShutterKeyPressed. Cet événement se produit lorsque le bouton d'obturateur de matériel reçoit une presse complet. La fonction de SetCameraButtonsEnabled gère également la suppression de ces gestionnaires d'événements pour aider à libérer de la mémoire associée à la caméra.

La figure 7, ce qui permet une Capture via le bouton de la caméra

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

Maintenant je vais vous expliquer en détail le processus de capture. Dans le code indiqué dans Figure 8, l'objet camera représente le périphérique de capture de photo, la caméra de l'attente.FocusAsync fonction initie l'autofocus et la méthode de StartCaptureAsync capture une image. Mais avant de pouvoir capturer l'image, vous devez préparer la séquence de capture. Effectuez cette opération en appelant PrepareCaptureSequenceAsync. Vous créez également un objet de séquence de capture avec une image, comme vous pouvez le voir sur la caméra.CreateCaptureSequence(1). La valeur 1 indique le nombre d'images que l'on saisira immédiatement après que vous lancez la capture. Enfin, vous spécifiez également les propriétés de caméra et paramètres de la photo à l'aide de la méthode KnownCameraPhotoProperties. Le LockedAutoFocusParameters est défini sur None, indiquant qui mettent l'accent, l'exposition et les réglages de la balance des blancs seront ajustera automatiquement avant capture.

Figure 8 le processus de Capture

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

Enfin, le code suivant montre comment enregistrer la photo capturée sur la pellicule :

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 classe MediaLibrary est fournie par l'API Microsoft.XNA.Framework.Media et permet d'enregistrer des photos à la Médiathèque du téléphone. L'espace de noms Microsoft.XNA.Framework.Media contient des classes pour les énumérer, jouer et visionner les photos, chansons, albums et playlists. Vous ensuite utilisez la classe EditingSession de la Nokia Imaging SDK pour créer une session de la mémoire tampon d'image compressée et puis appliquez le filtre d'effet croquis avant d'enregistrer l'image de l'appareil-photo à l'aide de la fonction SavePictureToCameraRoll.

Intégration de Picker lentilles

Dans Windows Phone 8, vous pouvez créer un objectif de multimédias qui s'ouvre depuis l'application appareil photo intégré et votre droit de l'app se lance dans l'expérience de viseur. Afin d'intégrer l'expérience de la lentille, l'application doit s'inscrire à l'extension Camera_Capture_App. Cette extension déclare au système d'exploitation que l'app Photo papier peut afficher un viseur quand il est lancé depuis le sélecteur de la lentille. Les extensions sont spécifiées dans le fichier WMAppManifest.xml. Vous devez ouvrir ce fichier avec l'éditeur de texte : Faites un clic droit sur le fichier et choisissez "ouvrir avec... | Éditeur de texte. » Juste après l'élément de jetons, à l'intérieur de l'élément d'Extensions, l'extension de la lentille est spécifiée avec l'élément d'Extension suivante :

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

Maintenant votre application est terminée avec l'intégration de l'objectif et peut garder droit de photos dans l'appareil-photo sur l'appareil. L'image en Figure 9 a été prise avec l'application appareil photo intégré et l'image en Figure 10 a été prise avec l'application de papier Photo à l'aide de l'effet de l'esquisse.

Figure 9 régulière Image prise avec l'appareil photo intégré App

Figure 10 une Image prise à l'aide de l'application Photo papier en utilisant l'effet Sketch

Ajouter vos propres fonctionnalités

Dans cet article, j'ai exploré la capture photo API de Microsoft et le tout nouveau Nokia Imaging SDK pour créer une riche expérience d'imagerie. Puis j'ai appliqué l'effet esquisse au viseur en temps réel a pris la photo et enregistré sur la pellicule du dispositif. Comme vous pouvez le voir, il y a des tonnes de fonctionnalités que vous pouvez maintenant utiliser grâce au Nokia Imaging SDK, qui permet de facilement créer des applications tel que celui-ci. Quelques petits détails ont été omis par souci de concision, mais vous pouvez consulter le téléchargement de code (github.com/Srikar-Doddi/PaperPhoto) pour une compréhension complète. C'est juste un exemple d'utilisation du Nokia Imaging SDK, mais il y a beaucoup d'autres fonctionnalités, que vous pouvez ajouter et les possibilités sont illimitées. J'espère que vous utilisez ce code comme point de départ et ajoutez des fonctionnalités à cette application.

Srikar Doddi est le directeur exécutif d'ingénierie à Kaplan Test prép. Vous pouvez trouver ses écrits sur le milieu à medium.com/@SrikarDoddi. Il est également le créateur de l'apps Simplist, DateTileScheduler et papier Photo pour Windows Phone 8 et les prompteur et tremper des applications pour Windows 8. Vous pouvez rejoindre diri hala par courriel à srikar.doddi@gmail.com.

Merci aux experts techniques suivants d'avoir relu cet article : Lance McCarthy (Nokia)
Lance McCarthy est un ambassadeur de Nokia et Telerik XAML Support Specialist (ext-lance.mccarthy@nokia.com)