Come recuperare dati pixel in un formato particolare (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Illustreremo come usare un oggetto BitmapDecoder per recuperare i dati pixel da un'immagine. I pixel sono compressi come matrici di byte e quando richiedi i dati puoi specificarne il formato.
Puoi specificare questi attributi dei dati pixel generati da BitmapDecoder:
- Formato pixel (BitmapPixelFormat).
- Modalità alfa (BitmapAlphaMode).
- Operazione di taglio e/o scala, rotazione, capovolgimento (BitmapTransform).
- Se rispettare un flag di orientamento EXIF incorporato (ExifOrientationMode).
- Se eseguire la gestione colore sullo spazio colore sRGB (ColorManagementMode).
Questo è utile se devi controllare in modo preciso il comportamento di decodifica o se la tua app si aspetta che i dati pixel siano in un formato particolare. Ad esempio, in caso di interoperabilità con l'API HTML Canvas Context2D, devi fornire i dati pixel come Rgba8 e alfa lineare.
Cosa sapere
Tecnologie
Prerequisiti
- Partiamo dal presupposto che tu sappia come creare una semplice app di Windows Runtime in JavaScript. Per altre informazioni, vedi Creazione della prima app di Windows Runtime scritta JavaScript.
- Disponi di un oggetto BitmapDecoder. La sezione Come decodificare un'immagine ti assiste nel crearne uno.
Istruzioni
Passaggio 1: Recupera un oggetto decodificatore
Scrivi la parte iniziale di una funzione che riceve un oggetto BitmapDecoder.
function GetPixelData(decoder) {
Il decodificatore ti consente di accedere ai dati pixel. Se ancora non disponi di un oggetto decodificatore, vedi Come decodificare un'immagine.
Passaggio 2: Recupera un oggetto provider di dati pixel
Chiama il metodo getPixelDataAsync e specifica i parametri per controllare il formato dei dati pixel restituiti. Il provider di dati pixel contiene i dati pixel nel formato specificato. Quando viene restituito getPixelDataAsync, i dati pixel vengono allocati e sono pronti all'uso.
decoder.getPixelDataAsync(
Windows.Graphics.Imaging.BitmapPixelFormat.rgba8,
Windows.Graphics.Imaging.BitmapAlphaMode.straight,
new Windows.Graphics.Imaging.BitmapTransform(),
Windows.Graphics.Imaging.ExifOrientationMode.respectExifOrientation,
Windows.Graphics.Imaging.ColorManagementMode.colorManageToSRgb
).then(function (pixelDataProvider) {
In questo caso, il formato pixel è impostato su RGBA8 e la modalità alfa è lineare (straight). Quando vengono restituiti i dati pixel, il funzionamento del codice di gestione si basa su questo presupposto. Non applichiamo alcuna trasformazione se non per rispettare l'orientamento EXIF e la gestione colore è abilitata.
Nota Puoi chiamare getPixelDataAsync senza argomenti. Il metodo restituirà i dati pixel nel formato originale. Per altre informazioni, vedi Come recuperare dati pixel nel formato predefinito.
Passaggio 3: Recupera i pixel dal provider di dati
Chiama il metodo detachPixelData per recuperare una matrice di byte dei dati pixel.
var pixels = pixelDataProvider.detachPixelData()
La funzione detachPixelData restituisce in modo sincrono una matrice di byte dei dati pixel. Questo esempio richiede i dati pixel nel formato pixel Rgba8, pertanto ogni elemento della matrice corrisponde a un singolo valore di canale di colore.
Nota Puoi chiamare detachPixelData una volta sola. Tutte le chiamate successive non riusciranno. Se desideri recuperare di nuovo i pixel, devi chiamare getPixelDataAsync per ottenere un nuovo provider di dati pixel.
Passaggio 4: Riproduci i pixel a ciclo continuo
Dopo avere recuperato i dati pixel, devi elaborarli. Il codice azzera i canali blu e verde, conservando i canali alfa e rosso.
var height = decoder.orientedPixelHeight;
var width = decoder.orientedPixelWidth;
for (var i = 0; i < height; i++) {
for (var j = 0; j < width; j++) {
pixels[(i * height + j) * 4 + 1] = 0; // Green channel (RGBA)
pixels[(i * height + j) * 4 + 2] = 0; // Blue channel (RGBA)
}
}
});
}
Nota Nel passaggio 2, la chiamata a getPixelDataAsync ha specificato che il decodificatore restituisce i dati pixel con l'orientamento EXIF applicato. È pertanto importante usare le proprietà orientedPixelWidth e orientedPixelHeight anziché pixelWidth e pixelHeight quando desideri ottenere le dimensioni dell'immagine. Le proprietà orientedPixelWidth e orientedPixelHeight riflettono qualsiasi modifica delle dimensioni dovuta all'orientamento EXIF.