Dieser Artikel wurde maschinell übersetzt.

Windows Phone

Programmieren des Nokia Sketch-Effekts unter Windows Phone 8

Srikar Doddi

Beispielcode herunterladen

Nokia hat vor kurzem das Nokia Imaging SDK in der Beta zu Windows Phone 8 Entwickler erweiterte Bildgebung Erfahrungen für Nokia Lumia Smartphones erstellen können.

Das Nokia-Imaging-SDK enthält eine Bibliothek für die Bearbeitung von Bildern erfasst und gespeichert, die von Windows Phone-Geräten. Seine Funktionen sind Decodierung und Kodierung JPEG-Bilder, Anwenden von Filtern und Effekten, Zuschneiden, drehen und Ändern der Größe. Das Nokia Imaging SDK bietet mehr als 50 vorgefertigte Filter und Effekte. Sie können nicht nur Effekte wie Sepia, Cartoon, Skizze und So weiter, aber auch automatische Optimierung, Helligkeit, Farbton, Sättigung und vieles mehr. Das SDK wurde speziell für mobile Imaging, mit Geschwindigkeit und Leistung als Schlüsselfaktoren entwickelt.

In diesem Artikel werde ich die Verwendung von der Skizze-Effekt durch eine Beispiel-app namens Papier Foto. Der Skizze-Effekt gilt für die Sucher-Stream in Echtzeit und bietet Benutzern die Möglichkeit, Bilder erfassen und speichern Sie sie auf dem Telefon-Kamera-Rolle. Entwickelte ich diese app mit Visual Studio 2012, das Nokia Imaging SDK und Windows Phone 8 SDK. Ich habe ein Nokia Lumia 920-Smartphone um zu testen.

Nokia Imaging SDK Grundlagen

Das Nokia-Imaging-SDK erstellt wurde von Nokia zu Ihnen vollen Zugriff auf eine leistungsfähige Bibliothek der Bildbearbeitung Tools, mit denen Sie große imaging-Anwendungen schnell und einfach erstellen. Wie bereits erwähnt, wurde dieses SDK entwickelt, mit hoher Leistung und geringer Speicherauslastung im Sinn, die wichtig ist, da Microsoft und Nokia arbeiten um Geräte der nächsten Generation wie die Nokia-Lumia-1020 zu erstellen. Das SDK wird bereits in Nokias eigenen imaging-Anwendung, Creative Studio verwendet. Das SDK und die Bibliothek stehen kostenlos (finden Sie im Lizenzvertrag bei bit.ly/130tVHJ), und das SDK unterstützt derzeit nur Windows Phone 8 apps.

Das Nokia Imaging SDK bietet folgende Features:

• Eine einfach zu bedienende-API, die sowohl aus verwaltetem Code sowie native Code verfügbar ist. Dies bedeutet, dass das SDK wird als ein Windows Phone-Laufzeitbibliothek bereitgestellt und Sie können die Methoden der Bibliothek von c#, Visual Basic oder C++ aufrufen.Die API kommt mit einer Reihe von Klassen und Methoden für verschiedene Bildverarbeitungs-Aufgaben.
• RAJPEG Technologie, um Bild ohne Zugangsdaten Decodierung ein ganze JPEG-Bild zunächst die unglaublich schnelle Vorschau ermöglicht, Anwendung von Effekten, Zuschneiden und Drehung der Bilder in hoher Auflösung.
• Mehr als 50 Filter, Effekte und Verbesserungen. Einige dieser Erweiterungen können Sie programmgesteuert RGB Ebenen, Farbton, Sättigung und Helligkeit anpassen. Sie können auch benutzerdefinierte Effekte und Filter bei Bedarf erstellen. Zusätzlich zu diesen Filter und Effekte ermöglicht das SDK auch beschneiden, drehen und Größenänderung mit unbegrenztes Undo-Funktionalität.
• Mehrere voll ausgestattete Beispielanwendungen können Sie den Quellcode untersuchen und entdecken die Funktionen des SDK. Die Beispiele decken ein Spektrum von Features wie Echtzeit-Manipulation des Filtereigenschaften und Anwendung von mehreren Filter-Schichten auf Fotos.
• Umfangreiche Dokumentation mit Schnellstart-Führer, Beispielprojekte, API-Referenz-Handbücher und verschiedene Dokumente, die eine Übersicht einiger der Kernkonzepte, die mit imaging-Anwendungen zu erstellen.

Erste Schritte

Auf hohem Niveau habe ich die folgenden APIs aus dem Nokia Imaging SDK für mein Beispiel-app:

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

Die Nokia.Graphics.Imaging-API enthält die wichtigsten Funktionen des Nokia Imaging SDKs, die alle Bildfilter, Bildeffekte, JPEG Encoder und Decoder enthält. Die Nokia.InteropServices.WindowsRuntime-Bibliothek wird intern verwendet und ist eine erforderliche Bibliothek, die im Projekt verwiesen werden muss. Es enthält eine Klasse namens BufferFactory, die zum Erstellen einer Instanz des IBuffer verwendet wird. Dieses SDK kann mit dem NuGet Package Manager in Visual Studioinstalliert werden. Das Paket finden Sie auf der Suche nach NokiaImagingSDK.

Das Objektdiagramm dieser APP besteht im Wesentlichen aus drei Hauptklassen, gezeigt Abbildung 1. Die MainPage ist Ihre typische Telefon-app-Seite von einer XAML-Datei und als Gegenleistung c# implementiert. Diese MainPage-Klasse implementiert die app UI, die das MediaElement enthält, die den Kamerasucher mit dem Sketch-Effekt zeigt. Die Page-Klasse besitzt auch die Instanzen von zwei anderen Hauptklassen: CameraStreamSource und NokiaSketchEffect. CameraStreamSource, abgeleitet von MediaStreamSource, stellt die Kameradaten, und die NokiaSketchEffect implementiert die Skizze-Wirkung. Die CameraStreamSource ist eine Klasse von Nokia implementierten und wird bereitgestellt, um Entwickler bei der Firma app Proben außerhalb der Nokia-Imaging-SDK.

Abbildung 1 das Klassendiagramm für die Papier-Foto-Projekt

Das Objektdiagramm übersetzt für die Code-Organisation angezeigt, Abbildung 2.

Abbildung 2 Visual Studio Lösungsstruktur

Definieren die Benutzeroberfläche

Die Benutzeroberfläche dieser APP ist einfach, wie in Abbildung 3. Die Hauptseite zeigt das Bild von einem Sucher und verfügt über eine Symbolleiste, die eine einzelne Schaltfläche um das Foto mit der Skizze-Modus-Effekt zu erfassen hat.

Abbildung 3 das Papier Foto UI

Abbildung 4 zeigt das XAML-Markup für die Hauptseite mit dem Grid-Element definieren Sie den Container für den Sucher mit dem angewendeten Effekt Skizze anzeigen verwendet.

Abbildung 4 das XAML-Markup für die 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>

Der Anwendungsleiste baut auf das Markup angezeigt, die Abbildung 5. Wie Sie sehen können, definiert eine Schaltfläche Aufnahme und ein Info-Menü-Element. Die Schaltfläche "Aufnahme" ist mit einen Ereignishandler für das Click-Ereignis zu behandeln.

Abbildung 5 der Anwendungsleiste 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 verwendet einen Funktionen getrieben Sicherheitsmodell. Dieses Modell erlaubt Benutzern, opt-in bestimmte Funktionen aktiviert werden können. In meiner Demo-app müssen die folgenden Funktionen für Benutzer aktiviert werden:

• ID_CAP_ISV_CAMERA: Dies ermöglicht den Zugriff auf die Rückfahrkamera (primär) oder die nach vorn gerichteten Kamera.
• ID_CAP_MEDIALIB_PHOTO: Dies bietet nur-Lese-Zugriff auf Fotos in der Mediathek. Es gibt auch einer app die Möglichkeit zum Speichern von Fotos in der Kamera-Rolle. Ich werde diese Funktion später in diesem Artikel um ein Foto in der Kamerarolle zu speichern, nach der Anwendung des Skizze veranschaulichen.

In Bezug auf die Hardware-Anforderungen erfordert die app eine hinten gerichteten Kamera ordnungsgemäß funktioniert. Die ID_REQ_REARCAMERA-Option ausgewählt ist, um zu verhindern, dass die app Installation auf ein Telefon ohne eine Rückfahrkamera.

Eine Echtzeit-Sketch-Effekts zu den Kamerasucher

Die NokiaSketchEffect-Klasse ist verantwortlich für die Skizze Effekts in Echtzeit an den Kamerasucher. Beachten Sie die Verwendung des SketchMode.Gray um den gewünschten Effekt in meiner app zu erhalten. Get­SampleAsync Funktion in der CameraStreamSource-Klasse ist verantwortlich für die Verarbeitung des Kamera-Puffers mit dem Sketch-Effekt und bietet das Medienelement mit dem Puffer. Die GetSampleAsync-Methode verwendet das Nokia­SketchEffect.GetNewFrameAndApplyEffect Methode, um den veränderten Kamera-Puffer. Der Code in Abbildung 6 zeigt, wie es implementiert wird.

Abbildung 6 immer den modifizierten Kamera-Puffer

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

Die CaptureDevice in der Funktion ist eine private Variable des Fotos­CaptureDevice-Klasse in Windows.Phone.Media.Capture gefunden. Die RenderToBitmapAsync-Funktion wird vom Nokia Imaging SDK zur Unterstützung des asynchronen Rendern des EditingSession in eine Bitmap bereitgestellt. Die EditingSession ist eine wichtige Klasse bereitgestellt durch das Nokia Imaging SDK, eine Bearbeitungssitzung Bildverarbeitung zu vertreten. Das EditingSession-Objekt ist das Herzstück dieses SDK. In einem typischen Workflow der EditingSession entsteht aus einem Bild, Filter oder Effekte werden mit dieser Sitzung hinzugefügt, die EditingSession dann in eine Bitmap oder in einen Speicherpuffer gerendert wird und schließlich die EditingSession geschlossen ist. Der Code in Abbildung 6 zeigt, wie eine neue Bitmap, verbunden mit dem ProcessedBuffer-Argument wird erstellt, der Skizze-Effekt wird darauf angewendet und dann wird es in den neuen Puffer gerendert. Schließlich erzeugt die CreateSketchFilter-Methode das skizzierten Bild aussehen. Diese Funktion erfordert SketchMode — eine Enumeration — als Argument für die Modi für die Skizze-Filter übergeben. Die beiden Modi verfügbar sind grau für Skizze in Graustufen und Farbe für Skizze in Farbe. Wie Sie sehen können, ich habe SketchMode.Gray in der Abbildung 6 Code. Dadurch wird die Papier-Foto-app, um Bilder in Graustufen zu erzeugen.

Erfassen und speichern das Bild als JPEG-Grafik zur Kamerarolle

Bisher habe ich gezeigt, wie die Skizze-Effekte in Echtzeit auf den Sucher anwenden. Jetzt schaue ich auf das Einfangen eines Bildes vom Sucher und dann auf die Kamera-Rolle auf dem Gerät speichern. Die Capture-Funktion zuerst initiiert Autofokus und dann fängt ein Foto. Neben der Handhabung der Capture-Funktion aus der Programmleiste, können Sie auch die Erfassung von der Hardware-Gerät-Trigger eingeleiteten behandeln.

Der Code in Abbildung 7 ermöglicht das erfassen durch die Kamera-Taste. Genauer gesagt, die Funktion aktiviert oder deaktiviert die Hardware Shutter Release-Funktion. Die CameraButtons-Klasse stellt die Ereignisse, die durch die Gerät-Verschluss-Tasten ausgelöst werden. Ein solches Ereignis ist das ShutterKeyHalfPressed-Ereignis ausgelöst, wenn der Hardware-Auslöser gedrückt für rund 800 Millisekunden gehalten. Ein weiteres Ereignis ist das ShutterKeyPressed-Ereignis. Dieses Ereignis tritt auf, wenn der Hardware-Auslöser eine volle Presse erhält. Die SetCameraButtonsEnabled-Funktion verarbeitet auch die Beseitigung dieser Ereignishandler zu helfen, den mit Bezug zu der Kamera Speicher freizugeben.

Abbildung 7 aktivieren Capture durch die Kamera-Taste

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

Jetzt werde ich der Aufzeichnungsprozess im Detail erläutern. In den Code in Abbildung 8, das Camera-Objekt stellt das Foto Capture-Gerät, die Await-Kamera.FocusAsync Funktion initiiert der Autofokus und die StartCaptureAsync-Methode erfasst einen Frame. Aber bevor der Rahmen erfasst werden können, müssen Sie die Capture-Sequenz vorbereiten. Sie tun dies durch Aufrufen von PrepareCaptureSequenceAsync. Sie auch erstellen ein Capture-Sequenz-Objekt mit einem Frame wie Sie von der Kamera sehen können.CreateCaptureSequence(1). Der Wert 1 gibt die Anzahl der Frames, die erfasst werden soll, unmittelbar nach der Einnahme zu initiieren. Schließlich geben Sie auch Kameraeigenschaften und Fotoeinstellungen, die mithilfe der KnownCameraPhotoProperties-Methode. Die LockedAutoFocusParameters ist auf None gesetzt, Angabe, die sich, Belichtung und Weißabgleich-Einstellungen vor der Aufnahme automatisch angepasst werden.

Abbildung 8 der Aufzeichnungsprozess

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

Der folgende Code zeigt schließlich, wie man das aufgenommene Foto zur Kamerarolle speichert:

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

Die MediaLibrary-Klasse wird von der Microsoft.XNA.Framework.Media-API zur Verfügung gestellt und dient zum Speichern von Fotos in das Telefon Medienbibliothek. Der Microsoft.XNA.Framework.Media-Namespace enthält Klassen zum Auflisten, spielen und Songs, Alben, Wiedergabelisten und Bilder anzeigen. Sie verwenden Sie dann die EditingSession-Klasse aus dem Nokia Imaging SDK zum Erstellen einer Sitzung aus dem komprimierten Bild-Puffer und wenden dann den Skizze-Effekt-Filter vor dem Speichern des Bildes zur Kamerarolle mithilfe der SavePictureToCameraRoll-Funktion.

Objektiv-Picker-Integration

Windows Phone 8 erstellen Sie eine rich-Media-Linse, die von der eingebauten Kamera-app öffnet und startet Ihre app-rechts in die Sucher-Erfahrung. Um mit der Objektiv-Erfahrung zu integrieren, muss die app für die Camera_Capture_App-Erweiterung zu registrieren. Diese Erweiterung erklärt dem Betriebssystem, dass die Papier-Foto-app Sucher angezeigt werden kann, wenn es aus dem Objektiv-Pflücker gestartet wird. Erweiterungen werden in der Datei WMAppManifest.xml angegeben. Sie müssen diese Datei mit dem Texteditor öffnen: Mit der rechten Maustaste auf die Datei und wählen Sie "Öffnen mit... | Text-Editor. " Unmittelbar nach dem Token-Element innerhalb des Elements Erweiterungen ist die Objektiv-Erweiterung mit dem folgenden Extension-Element angegeben:

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

Jetzt Ihre app ist komplett mit Objektiv Integration und Bilder rechts in der Kamerarolle auf dem Gerät speichern kann. Das Bild im Abbildung 9 wurde mit der eingebauten Kamera-app und das Bild im Abbildung 10 mit den Papier-Foto-app mit dem Effekt "Skizze" übernommen wurde.

Abbildung 9 reguläre Bild aufgenommen mit der eingebauten Kamera-App

Abbildung 10 ein Bild mit dem Papier-Foto-App mit dem Sketch-Effekt

Fügen Sie Ihre eigenen Features

In diesem Artikel untersucht ich Foto Capture APIs von Microsoft und das brandneue Nokia Imaging SDK eine reiche Erfahrung in Bildbearbeitung erstellen. Ich den Sketch-Effekt auf den Sucher in Echtzeit angewendet und erfasst das Foto und auf der Kamerarolle Gerät gespeichert. Wie Sie sehen können, gibt es jede Menge Funktionen, mit denen Sie nun dank des Nokia Imaging SDK, wodurch es leicht zu apps wie diese zu bauen. Ein paar Kleinigkeiten wurden aus Gründen der Kürze halber weggelassen, aber Sie können auf den Codedownload verweisen (github.com/Srikar-Doddi/PaperPhoto) vollständig zu verstehen. Dies ist nur ein Beispiel für die Verwendung der Nokia Imaging SDK, aber es gibt viele andere Features, die hinzugefügt werden können und die Möglichkeiten sind unbegrenzt. Ich hoffe, dass Sie diesen Code als Ausgangspunkt verwenden und diese app weitere Features hinzuzufügen.

Srikar Doddi ist der geschäftsführende Direktor des Maschinenbaus an Kaplan Test Vorb Seine Schriften finden Sie auf Medium bei medium.com/@SrikarDoddi. Er ist auch der Schöpfer von den einfachsten, DateTileScheduler und Papier Foto apps für Windows Phone 8 und die Souffleuse und Dabble apps für Windows 8. Toddi erreichen Sie per E-mail an srikar.doddi@gmail.com.

Unser Dank gilt dem folgenden technischen Experten für die Durchsicht dieses Artikels: Lance McCarthy (Nokia)
Lance McCarthy ist ein Nokia-Botschafter und Telerik XAML Support Specialist (ext-lance.mccarthy@nokia.com)