Come modificare un'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 ]
Questo argomento mostra come usare un oggetto BitmapEncoder per modificare un'immagine esistente. Puoi usare l'oggetto BitmapEncoder per applicare trasformazioni quali scala e ritaglio, impostare metadati e proprietà e modificare pixel conservando eventuali dati non modificati. Illustriamo come inizializzare un oggetto BitmapEncoder con i dati immagine originali, applicarvi una o più operazioni di modifica e quindi salvarlo per aggiornare il file originale.
Puoi anche usare BitmapEncoder per creare una nuova immagine, operazione che spiegheremo in Come codificare una nuova immagine.
Cosa sapere
Tecnologie
- Creazione della prima app di Windows Runtime 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 ulteriori informazioni, vedi Creazione della prima app di Windows Runtime in JavaScript.
- Disponi di un oggetto BitmapDecoder. La procedura è descritta in Come decodificare un'immagine.
Istruzioni
Passaggio 1: Recupera un oggetto decodificatore dall'immagine originale
Scrivi la parte iniziale di una funzione che riceve un oggetto BitmapEncoder inizializzato dal file di immagine che desideri modificare e l'oggetto IRandomAccessStream aperto dal file. Questo esempio sovrascrive l'immagine originale, pertanto devi usare un flusso aperto con i privilegi ReadWrite.
function (decoder, fileStream) {
Nota Per istruzioni su come ottenere gli oggetti decodificatore e flusso, vedi Come decodificare un'immagine.
Quando chiamiOpenAsync, assicurati di modificare il parametro FileAccessMode su ReadWrite.
Passaggio 2: Inizializza l'oggetto codificatore per la modifica
Crea un oggetto InMemoryRandomAccessStream come destinazione di codifica e crea una transcodifica BitmapEncoder tramite il metodo CreateForTranscodingAsync.
Usa l'oggetto InMemoryRandomAccessStream come percorso temporaneo per archiviare il file codificato. In caso contrario, il decodificatore e il codificatore tenterebbero di leggere e scrivere contemporaneamente nello stesso flusso, cosa non possibile.
// Keep variables in-scope across multiple async
var memStream = new Windows.Storage.Streams.InMemoryRandomAccessStream();
var encoder;
Windows.Graphics.Imaging.BitmapEncoder
.createForTranscodingAsync(memStream, decoder).then(function (_encoder) {
encoder = _encoder;
Nota CreateForTranscodingAsync supporta la copia dei dati solo in un'immagine con lo stesso formato dell'originale. Non ti consente la conversione da un formato a un altro.
Disponi ora di un oggetto BitmapEncoder che è stato inizializzato con i dati dell'oggetto BitmapDecoder dell'origine.
Passaggio 3: Trasforma l'immagine
Ora che disponi del codificatore, puoi eseguire una varietà di azioni, tra cui l'impostazione di metadati e dati pixel. Questo esempio scala e ruota l'immagine tramite il metodo BitmapTransform. Per altre informazioni sull'impostazione di metadati, vedi Come scrivere i metadati dell'immagine. Per altre informazioni sull'impostazione dei dati pixel, vedi Come codificare una nuova immagine.
// Scaling occurs before flip/rotation.
encoder.bitmapTransform.scaledWidth = 640;
encoder.bitmapTransform.scaledHeight = 480;
// Fant is a relatively high quality interpolation algorithm.
encoder.bitmapTransform.interpolationMode =
Windows.Graphics.Imaging.BitmapInterpolationMode.fant;
// Generate a new thumbnail from the updated pixel data.
// Note: Only JPEG, TIFF and JPEG-XR images support encoding thumbnails.
encoder.isThumbnailGenerated = true;
encoder.bitmapTransform.rotation =
Windows.Graphics.Imaging.BitmapRotation.clockwise90Degrees;
Nota Se usi CreateForTranscodingAsync per creare l'oggetto BitmapEncoder, verrà tentata la copia di tutti i dati originali senza perdita di informazioni. Ad esempio, se esegui la transcodifica di un'immagine JPEG e modifichi alcune proprietà di imaging, ma non applichi alcuna trasformazione o modifica ai dati pixel, l'immagine verrà copiata senza perdita di informazioni. Tuttavia, se esegui l'elaborazione dell'immagine recuperando i dati pixel dal decodificatore e quindi impostandoli nel codificatore, si verificherà necessariamente un processo con perdita di informazioni in quanto i dati pixel devono essere nuovamente codificati.
Passaggio 4: Scarica il codificatore e gestisci gli errori
Quando non devi più usare il codificatore, scaricalo per completare l'operazione di codifica. Devi anche saper gestire il caso in cui il formato immagine non supporti la codifica delle anteprime. Se sai di dover modificare sempre un formato immagine in grado di supportare le anteprime, ad esempio JPEG, puoi ignorare la gestione degli errori.
return encoder.flushAsync();
}).then(null, function (error) {
switch (error.number) {
// If the encoder doesn't support writing a thumbnail, then try again
// but disable thumbnail generation.
case -2003292287: // WINCODEC_ERR_UNSUPPORTEDOPERATION
encoder.isThumbnailGenerated = false;
return encoder.flushAsync();
default:
throw error;
}
Passaggio 5: Salva l'immagine codificata nel file ed esegui la pulizia
Copia il contenuto dal flusso in memoria nel flusso del file originale e chiudi tutti i flussi.
}).then(function () {
// Overwrite the contents of the file with the updated image stream.
memStream.seek(0);
fileStream.seek(0);
fileStream.size = 0;
return Windows.Storage.Streams.RandomAccessStream.copyAsync(memStream, fileStream);
}).done(function () {
memStream.close();
fileStream.close();
});