Comment modifier une image (HTML)
[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Cette rubrique vous montre comment utiliser un objet BitmapEncoder pour modifier une image existante. Vous pouvez utiliser l’objet BitmapEncoder pour appliquer des transformations (par exemple, une mise à l’échelle et un découpage), définir des métadonnées et des propriétés et modifier des pixels tout en protégeant les données non modifiées. Nous vous montrons comment initialiser un objet BitmapEncoder avec les données d’image d’origine, y apporter une ou plusieurs modifications, puis comment enregistrer le tout pour mettre à jour le fichier d’origine.
Vous pouvez également utiliser l’objet BitmapEncoder pour créer une nouvelle image de zéro, (procédure expliquée dans la rubrique Comment coder une nouvelle image).
Ce que vous devez savoir
Technologies
- Création de votre première application Windows Runtime en JavaScript
- Windows.Storage.Pickers
- Windows.Graphics.Imaging
Prérequis
- Nous partons du principe que vous savez créer une application Windows Runtime de base en JavaScript. Pour plus d’informations, voir Création de votre première application Windows Runtime en JavaScript.
- Vous disposez d’un objet BitmapDecoder. La rubrique Comment décoder une image vous guide à travers ce processus.
Instructions
Étape 1: Obtenir un objet décodeur à partir de l’image d’origine
Écrivez le début d’une fonction qui reçoit un objet BitmapEncoder initialisé à partir du fichier image que vous souhaitez modifier et l’interface IRandomAccessStream ouverte à partir du fichier. Cet exemple écrase l’image d’origine ; vous devez donc utiliser un flux ouvert à l’aide de privilèges ReadWrite.
function (decoder, fileStream) {
Remarque Pour obtenir des instructions sur la manière de vous procurer les objets de décodeur et de flux, consultez la rubrique Comment décoder une image.
Lorsque vous appelez OpenAsync, veillez à modifier et redéfinir le paramètre FileAccessMode sur ReadWrite.
Étape 2: Initialiser l’objet encodeur à des fins de modification
Créez un InMemoryRandomAccessStream en tant que destination de codage et créez un objet BitmapEncoder de transcodage à l’aide de la méthode CreateForTranscodingAsync.
Utilisez le InMemoryRandomAccessStream comme emplacement temporaire pour y stocker le fichier codé. Sinon, le décodeur et l’encodeur auront simultanément accès en lecture et écriture au même flux, ce qui ne fonctionnerait pas.
// 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;
Remarque La méthode CreateForTranscodingAsync prend en charge la copie de données uniquement vers une image dotée du même format que l’image d’origine. Elle ne vous permet pas d’effectuer de conversion entre un format et un autre.
Vous disposez à présent d’un objet BitmapEncoder qui a été initialisé avec les données issues de l’objet BitmapDecoder source.
Étape 3: Transformer l’image
L’encodeur étant désormais à votre disposition, vous pouvez réaliser diverses opérations, y compris la définition de métadonnées et de données de pixels. Cet exemple met à l’échelle et fait pivoter l’image à l’aide de la méthode BitmapTransform. Pour plus d’informations sur la définition des métadonnées, voir Comment écrire des métadonnées d’image. Pour plus d’informations sur la définition des données de pixels, voir Comment coder une nouvelle image.
// 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;
Remarque Si vous utilisez la méthode CreateForTranscodingAsync pour créer l’objet BitmapEncoder, le décodeur tente de copier toutes les données d’origine en mode sans perte. Par exemple, si vous transcodez une image JPEG et modifiez certaines propriétés d’image mais n’apportez aucune transformation ou modification aux données de pixels, les données de l’image sont copiées sans perte. Par contre, si vous essayez de traiter l’image en récupérant des données de pixels du décodeur, puis en les définissant sur l’encodeur, ce processus entraînera forcément des pertes puisque les données de pixels doivent être recodées.
Étape 4: Vider l’encodeur et traiter les erreurs
Une fois votre travail avec l’encodeur terminé, videz-le pour finaliser le processus de codage. Vous devez également gérer les cas où le format d’image ne prend pas en charge les miniatures de codage. Si vous savez que vous modifierez toujours un format d’image prenant en charge les miniatures (par exemple, le format JPEG), vous pouvez passer outre cette phase de traitement des erreurs.
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;
}
Étape 5: Enregistrer l’image codée dans le fichier et nettoyer
Pour finir, copiez le contenu du flux en mémoire dans le flux du fichier d’origine et fermez tous les flux.
}).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();
});