Come codificare una nuova immagine (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 ]
Illustriamo come salvare una nuova immagine in un file con un oggetto BitmapEncoder. Se desideri apportare modifiche a un'immagine esistente, vedi Come modificare un'immagine.
Cosa sapere
Tecnologie
- Creazione della prima app di Windows Runtime scritta in JavaScript
- Windows.Storage.Pickers
- Windows.Graphics.Imaging
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.
Istruzioni
Passaggio 1: Usare l'utilità di selezione file per selezionare un file di destinazione
FileSavePicker consente all'utente di selezionare un file nuovo o già esistente nel suo sistema. Dopo aver recuperato il file dall'utilità di selezione, puoi usarlo come destinazione per BitmapEncoder.
Crea innanzitutto un nuovo oggetto selezione file, imposta le opzioni relative al tipo di file in modo da consentire le immagine JPEG e mostra l'utilità di selezione all'utente.
// variables to store objects across multiple async operations
var encoder;
var fileType;
var stream;
var picker = new Windows.Storage.Pickers.FileSavePicker();
picker.fileTypeChoices.insert("JPEG file", [".jpg"]);
picker.defaultFileExtension = "jpg";
picker.suggestedFileName = "untitled";
picker.pickSaveFileAsync().then(function (file) {
if (!file) {
// The user did not select a file.
return;
}
fileType = file. fileType;
Nota Puoi aggiungere al filtro dei tipi di file altre estensioni. Per altre informazioni, vedi Windows.Storage.Pickers.
Nota Per ottenere un elenco di tutti i codificatori supportati e delle estensioni file, puoi usare Windows.Graphics.Imaging.BitmapEncoder.getEncoderinfoEnumerator.
Passaggio 2: Creare un oggetto codificatore per una nuova immagine
Una volta ottenuto il file di destinazione, recupera da esso un IRandomAccessStream con privilegi di accesso ReadWrite che userai per creare un'istanza di BitmapEncoder. Devi inoltre determinare l'ID codificatore corretto per il tipo di file selezionato dall'utente. Questo esempio consente soltanto le immagini JPEG, pertanto se consenti più tipi di file devi passare da uno all'altro in base al parametro FileType del file.
return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
}).then(function (_stream) {
stream = _stream;
stream.size = 0;
var encoderId;
switch (fileType) {
case ".jpg":
encoderId = Windows.Graphics.Imaging.BitmapEncoder.jpegEncoderId;
break;
}
return Windows.Graphics.Imaging.BitmapEncoder.createAsync(encoderId, stream);
}).then(function (encoder) {
Nota Gli ID dei codificatori predefiniti sono disponibili come membri statici di BitmapEncoder.
Se l'utente seleziona un file esistente in cui salvare, devi impostare IRandomAccessStream.size su 0 perché BitmapEncoder richiede che il flusso di output sia vuoto.
Disponi ora di un oggetto BitmapEncoder che rappresenta un'immagine JPEG vuota.
Passaggio 3: Impostare alcuni dati nel codificatore
Ora che disponi dell'oggetto BitmapEncoder, puoi impostare metadati e dati pixel, nonché controllare anteprime e trasformazioni come la rotazione e il ridimensionamento.
Il codice imposta una semplice matrice di dati pixel. Per altre informazioni sull'impostazione di metadati e proprietà di imaging, vedi Come scrivere i metadati dell'immagine.
// An array representing 2x2 red, opaque pixel data
var pixels = [255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255];
encoder.setPixelData(
Windows.Graphics.Imaging.BitmapPixelFormat.rgba8,
Windows.Graphics.Imaging.BitmapAlphaMode.straight,
2, // pixel width
2, // pixel height
96, // horizontal DPI
96, // vertical DPI
pixels
);
Nota Se crei un oggetto BitmapEncoder con il metodo CreateAsync, le informazioni minime che devi fornire per creare un'immagine valida sono quelle dei dati pixel usando il metodo SetPixelData.
Passaggio 4: Salva le modifiche nel file
Dopo avere terminato la modifica di BitmapEncoder, devi scaricare il codificatore e chiudere il flusso sottostante prima di usare il file. Se non esegui queste operazioni, l'immagine non verrà salvata e perderai i tuoi dati.
Devi infine risolvere eventuali errori. Se cerchi di eseguire un'azione di codifica non supportata dal formato del file o comunque non valida, non otterrai alcun errore finché non chiamerai FlushAsync. Ciò significa che FlushAsync non riesce se tenti di salvare un'anteprima impostando IsThumbnailGenerated su True in un formato quale BMP (che non supporta le anteprime).
return encoder.flushAsync();
}).then(function () {
// This means the encoder saved successfully.
}, function (error) {
// There was an error encoding, error.message has the error string.
}).done(null, function () {
// Close the stream regardless of whether encoding was successful. Otherwise it will continue to be locked for Read/Write access.
stream && stream.close();
});
}
Nota Quando chiami la funzione FlushAsync il codificatore esegue il salvataggio e per proseguire devi ricrearlo. Se intendi usare il codificatore in un secondo momento, non chiamare FlushAsync finché non hai finito di usare il codificatore.