Condividi tramite


Il presente articolo è stato tradotto automaticamente.

Windows Phone

Programmazione l'effetto schizzo di Nokia a Windows Phone 8

Srikar Doddi

Scaricare il codice di esempio

Nokia ha recentemente rilasciato il SDK di Imaging Nokia in versione beta per consentire agli sviluppatori di Windows Phone 8 creare esperienze di imaging avanzate per gli smartphone Nokia Lumia.

L'Imaging Nokia SDK include una libreria per manipolare immagini acquisiti e memorizzati dai dispositivi Windows Phone. Le sue caratteristiche includono la decodifica e codifica di immagini JPEG, applicando effetti e filtri, ritaglio, rotazione e ridimensionamento. il SDK di Imaging Nokia offre più di 50 effetti e filtri premade. È possibile non solo applicare effetti come seppia, cartoon, schizzo e così via, ma anche applicare miglioramento automatico, controllo di luminosità, tonalità, saturazione e molti altri. il SDK è stato sviluppato specificamente per mobile imaging, con prestazioni di velocità e memoria come driver della chiave.

In questo articolo, illustrerò l'uso dell'effetto schizzo attraverso un'applicazione di esempio chiamata carta foto. L'effetto schizzo viene applicato nel flusso del mirino in tempo reale e fornisce agli utenti la possibilità di catturare immagini e salvarle per rotolo fotocamera del telefono cellulare. Sviluppato questa app utilizzando Visual Studio 2012, il SDK di Imaging Nokia e il SDK di Windows Phone 8. Ho usato uno smartphone Nokia Lumia 920 per testarlo.

Nozioni di base di Nokia Imaging SDK

il SDK di Imaging Nokia è stato creato da Nokia per avere accesso completo a una potente libreria di manipolazione delle immagini strumenti che aiutano a creano grandi applicazioni di imaging rapidamente e facilmente. Come accennato, questo SDK è stato progettato con prestazioni elevate e utilizzo memoria insufficiente nella mente, che è importante perché Microsoft e Nokia stanno lavorando per creare la prossima generazione dispositivi come Nokia Lumia 1020. il SDK è già utilizzato in applicazioni di imaging di Nokia, Studio creativo. La biblioteca e il SDK sono disponibili gratuitamente (vedere il contratto di licenza a bit.ly/130tVHJ), e il SDK supporta attualmente solo le applicazioni Windows Phone 8.

il SDK di Imaging Nokia offre le seguenti caratteristiche:

  • API semplice da usare che è disponibile sia da codice gestito così come codice nativo. Questo significa che il SDK viene fornito come una libreria di Runtime di Windows Phone e chiamare i metodi della libreria da c#, Visual Basic o C++.L'API è dotato di una serie di classi e metodi per diverse attività di formazione immagine.
  • Tecnologia RAJPEG per accesso dati immagine senza decodifica un'intera immagine JPEG in primo luogo, che permette anteprime incredibilmente veloce, applicazione di effetti, ritaglio e rotazione delle immagini ad alta risoluzione.
  • Più di 50 filtri, effetti e miglioramenti. Alcuni di questi miglioramenti consentono di regolare a livello di codice RGB livelli, tonalità, saturazione e luminosità. È inoltre possibile creare effetti personalizzati e filtri, se necessario. Oltre a questi filtri ed effetti, il SDK consente inoltre di ritaglio, rotazione e ridimensionamento con funzionalità undo illimitati.
  • Diverse applicazioni di esempio completamente descritto permettono di esplorare il codice sorgente e scoprire le caratteristiche del SDK. Gli esempi coprono una gamma di caratteristiche come la manipolazione in tempo reale delle proprietà del filtro e l'applicazione di diversi strati di filtro alle foto.
  • Ricca documentazione con guide di avvio rapido, progetti di esempio, guide di riferimento API e diversi documenti che forniscono una panoramica di alcuni dei concetti principali necessari per creare applicazioni di imaging.

Guida introduttiva

Un livello alto, ho usato le seguenti API di Imaging Nokia SDK per la mia applicazione di esempio:

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

L'API Nokia.Graphics.Imaging contiene le funzionalità di base del SDK Nokia Imaging, che comprende tutta il filtri di immagine, effetti immagine, JPEG encoder e decoder. La libreria di Nokia.InteropServices.WindowsRuntime viene utilizzata internamente ed è una libreria necessaria che deve essere presente nel vostro progetto. Esso contiene una classe denominata BufferFactory che viene utilizzato per la creazione di un'istanza di IBuffer. Questo SDK può essere installato utilizzando il gestore di pacchetti NuGet in Visual Studio. Potete trovare il pacchetto cercando NokiaImagingSDK.

L'oggetto grafico di questa app è costituita essenzialmente da tre classi principali, mostrate Figura 1. La MainPage è la pagina di app telefono tipico implementata in un file XAML e una controparte di c#. Questa classe MainPage implementa l'interfaccia utente, che include l'oggetto MediaElement che visualizza il mirino della fotocamera con l'effetto schizzo app. Classe MainPage possiede anche le istanze delle altre due classi principali: CameraStreamSource e NokiaSketchEffect. La CameraStreamSource, derivato da MediaStreamSource, fornisce i dati della fotocamera e il NokiaSketchEffect implementa l'effetto schizzo. Il CameraStreamSource è una classe implementata da Nokia ed è fornito per gli sviluppatori attraverso esempi di app dell'azienda di fuori del SDK di Imaging Nokia.

The Class Diagram for the Paper Photo Project
Figura 1 diagramma classi per il progetto di carta fotografica

L'oggetto grafico si traduce per l'organizzazione del codice mostrato Figura 2.

Visual Studio Solution Structure
Struttura della soluzione di figura 2 Visual Studio

Definire l'interfaccia utente

L'interfaccia utente di questa applicazione è molto semplice, come illustrato nel Figura 3. Pagina principale visualizza l'immagine da un mirino e viene fornito con una barra dell'applicazione che ha un solo pulsante per catturare foto con l'effetto di modalità schizzo.

The Paper Photo UI
Figura 3 la carta foto UI

Figura 4 illustrato il markup XAML per la pagina principale utilizzando l'elemento Grid per definire il contenitore utilizzato per mostrare il mirino con l'effetto di disegno applicato.

Figura 4 il Markup XAML principale pagina

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

Barra dell'applicazione è costruita utilizzando il markup mostrato Figura 5. Come potete vedere, definisce un tasto di acquisizione e una voce di menu About. Il pulsante cattura è associato un gestore eventi per gestire l'evento click.

Nella figura 5 la barra applicazione 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 utilizza un modello di sicurezza basato su funzionalità. Questo modello consente agli utenti di scegliere di consentire alcune funzionalità da attivare. Nella mia applicazione demo, necessario essere abilitato per gli utenti le seguenti funzionalità:

  • ID_CAP_ISV_CAMERA: Questo consente di accedere alla fotocamera posteriore (primaria) o la fotocamera frontale.
  • ID_CAP_MEDIALIB_PHOTO: Questo fornisce accesso in sola lettura alle foto della libreria multimediale. Dà anche la possibilità di salvare le foto il rullino un'app. Illustrerò questa funzionalità più avanti nell'articolo a salvare una foto nel rullino dopo aver applicato l'effetto schizzo.

In termini di requisiti hardware, l'app richiede una videocamera posteriore per funzionare correttamente. Per evitare l'app da installare su un telefono senza una telecamera posteriore è selezionata l'opzione ID_REQ_REARCAMERA.

Applicare un effetto di Sketch in tempo reale per il mirino della fotocamera

La classe NokiaSketchEffect è responsabile per l'applicazione dell'effetto schizzo in tempo reale per il mirino della fotocamera. Si noti l'uso di SketchMode.Gray per ottenere l'effetto desiderato nel mio app. Il Get­funzione di SampleAsync della classe CameraStreamSource è responsabile dell'elaborazione del buffer della fotocamera utilizzando l'effetto schizzo e fornisce l'elemento multimediale con il buffer. Il metodo GetSampleAsync utilizza il Nokia­SketchEffect.GetNewFrameAndApplyEffect metodo per ottenere il buffer della fotocamera modificati. Il codice in Figura 6 dimostra come è realizzato.

Figura 6 ottenendo il Buffer della fotocamera modificati

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

Il captureDevice nella funzione è una variabile privata della foto­classe CaptureDevice trovato in Windows.Phone.Media.Capture. La funzione RenderToBitmapAsync è fornita da Nokia Imaging SDK per supportare il rendering asincrono di EditingSession a una bitmap. Il EditingSession è una classe importante fornita da Nokia Imaging SDK per rappresentare una sessione di modifica di elaborazione dell'immagine. L'oggetto EditingSession è il nucleo di questo SDK. In un flusso di lavoro tipico, il EditingSession è creato da un'immagine, filtri o effetti vengono aggiunti a questa sessione, il EditingSession quindi viene eseguito il rendering di un'immagine bitmap o in un buffer di memoria, e infine il EditingSession è chiuso. Il codice in Figura 6 Mostra come viene creata una nuova bitmap associata con l'argomento di processedBuffer, l'effetto schizzo viene applicato ad esso e quindi viene sottoposto a rendering nel nuovo buffer. Infine, il metodo di CreateSketchFilter produce l'aspetto dell'immagine sketch. Questa funzione prende SketchMode — un'enumerazione — come argomento per passare le modalità per il filtro di schizzo. Le due modalità disponibili sono grigio per schizzo in scala di grigi e colore per schizzo a colori. Come potete vedere, ho usato SketchMode.Gray nella Figura 6 codice. Questo permette l'applicazione di carta fotografica per produrre immagini in scala di grigi.

Catturare e salvare l'immagine come immagine JPEG per il rullino

Finora vi ho mostrato come applicare l'effetto schizzo in tempo reale al mirino. Ora guarderò catturare un'immagine dal mirino e poi salvarla nel rullino sul dispositivo. La funzione di cattura prima avvia autofocus e quindi acquisisce una foto. Oltre a gestire le funzionalità di acquisizione dalla barra dell'applicazione, è possibile gestire anche la cattura avviata dal trigger dispositivo hardware.

Il codice mostrato Figura 7 permette la cattura attraverso il pulsante della fotocamera. Più specificamente, la funzione attiva o disattiva la funzione di rilascio dell'otturatore hardware. La classe CameraButtons fornisce gli eventi che si sono scatenati dai pulsanti di scatto del dispositivo. Uno di questi eventi è l'evento ShutterKeyHalfPressed, attivato quando il pulsante di scatto hardware è premuto per circa 800 millisecondi. Un altro evento è il ShutterKeyPressed. Questo evento si verifica quando il pulsante di scatto hardware riceve una stampa completa. La funzione SetCameraButtonsEnabled gestisce anche la rimozione di questi gestori eventi per aiutare a liberare la memoria legata alla fotocamera.

Figura 7, permettendo la cattura tramite il pulsante fotocamera

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

Ora spiegherò in dettaglio il processo di acquisizione. Nel codice mostrato Figura 8, l'oggetto camera rappresenta la periferica di acquisizione di foto, la fotocamera di attesa.FocusAsync funzione avvia l'autofocus e il metodo StartCaptureAsync acquisisce un fotogramma. Ma prima è possibile catturare il frame, è necessario preparare la sequenza di acquisizione. Farlo chiamando PrepareCaptureSequenceAsync. Si sta creando un oggetto sequenza cattura con un fotogramma, come potete vedere dalla fotocamera.CreateCaptureSequence(1). Il valore 1 indica il numero di fotogrammi che sarà catturato subito dopo iniziare la cattura. Infine, è anche specificare proprietà fotocamera e le impostazioni di foto utilizzando il metodo KnownCameraPhotoProperties. Il LockedAutoFocusParameters è impostata su None, che indica che mettono a fuoco, esposizione e le impostazioni di bilanciamento del bianco regolerà automaticamente prima della cattura.

Figura 8 il processo di acquisizione

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

Infine, il codice seguente viene illustrato come salvare le foto catturata per il rullino:

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 è fornita dall'API XNA e viene utilizzata per salvare le foto in biblioteca multimediale del telefono. I nomi di XNA contiene classi per enumerare, giocare e Mostra, canzoni, album, playlist e immagini. Potete quindi utilizzare la classe EditingSession da SDK Imaging Nokia per creare una sessione dal buffer immagine compressa e quindi applicare il filtro effetto schizzo prima di salvare le foto nel rullino usando la funzione SavePictureToCameraRoll.

Obiettivo integrazione Picker

In Windows Phone 8, è possibile creare una lente di contenuti multimediali che si apre dall'app fotocamera integrata e lancia la tua destra app nell'esperienza del mirino. Al fine di integrare l'esperienza della lente, l'app deve effettuare la registrazione per l'estensione Camera_Capture_App. Questa estensione dichiara al sistema operativo che l'app Photo Paper può visualizzare un mirino quando viene avviata da selezione lente. Le estensioni sono specificate nel file WMAppManifest. Xml. È necessario aprire questo file con l'editor di testo: Fare clic destro sul file e scegliere "Apri con... | Editor di testo. " Subito dopo l'elemento token, all'interno dell'elemento di estensioni, l'estensione della lente è specificato con il seguente elemento di estensione:

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

Ora l'app è completa con integrazione di lente e può salvare la destra immagini nel rullino sul dispositivo. L'immagine in Figura 9 è stato preso con l'app fotocamera integrata e l'immagine in Figura 10 è stato preso con l'applicazione di carta fotografica utilizzando l'effetto schizzo.

A Regular Image Taken with the Built-in Camera App
Figura 9 regolare immagine scattata con l'App fotocamera integrata

An Image Taken Using the Paper Photo App Using the Sketch Effect
Figura 10 un'immagine scattata utilizzando il carta fotografica App usando l'effetto schizzo

Aggiungi i tuo caratteristiche

In questo articolo, ho esplorato catturare foto API da Microsoft e il nuovissimo Nokia Imaging SDK per creare una ricca esperienza di formazione immagine. Applicato l'effetto schizzo al mirino in tempo reale e poi scattò la foto e salvato nel rullino del dispositivo. Come potete vedere, ci sono tonnellate di caratteristiche che è ora possibile utilizzare grazie al SDK Nokia Imaging, che rende più semplice costruire applicazioni come questa. Alcuni dettagli minori sono stati omessi per ragioni di brevità, ma si può fare riferimento per il download di codice (github.com/Srikar-Doddi/PaperPhoto) per una completa comprensione. Questo è solo un esempio di usando il SDK di Imaging Nokia, ma ci sono un sacco di altre funzioni che è possibile aggiungere e le possibilità sono illimitate. Spero che si utilizza questo codice come punto di partenza e aggiungere ulteriori caratteristiche di questa app.

Srikar Doddi è il direttore esecutivo dell'ingegneria presso Kaplan Test Prep Potete trovare i suoi scritti sul mezzo presso medium.com/@SrikarDoddi. Egli è anche il creatore della Simplist, DateTileScheduler e carta fotografica app per Windows Phone 8 e i suggeritore e dilettarsi applicazioni per Windows 8. È possibile raggiungere Doddi via e-mail a srikar.doddi@gmail.com.

Si ringraziano i seguenti esperti tecnici per aver rivisto questo articolo: Lance McCarthy (Nokia)
Lance McCarthy è un ambasciatore di Nokia e specialista di supporto XAML Telerik (ext-lance.mccarthy@nokia.com)