Comment coder une nouvelle 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 enregistrer une nouvelle image dans un fichier à l’aide d’un objet BitmapEncoder. Si vous souhaitez apporter des modifications à une image existante, consultez la rubrique Comment modifier une 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.
Instructions
Étape 1: Utiliser le sélecteur de fichiers pour choisir un fichier de destination
La classe FileSavePicker permet à l’utilisateur de sélectionner un fichier neuf ou existant dans son système. Une fois le fichier choisi à l’aide du sélecteur, vous pouvez l’utiliser en guise de destination pour l’objet BitmapEncoder.
Pour commencer, créez un nouvel objet de sélecteur de fichiers, définissez les options de type de fichier pour autoriser les images JPEG et affichez le sélecteur aux yeux de l’utilisateur.
// 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;
Remarque Vous pouvez ajouter d‘autres extensions au filtre de type de fichier. Pour plus d’informations, voir Windows.Storage.Pickers.
Remarque Vous pouvez aussi vous procurer une liste des encodeurs et des extensions de fichiers pris en charge au moyen de Windows.Graphics.Imaging.BitmapEncoder.getEncoderinfoEnumerator.
Étape 2: Créer un objet encodeur pour une nouvelle image
Une fois le fichier de destination à votre disposition, procurez-vous une interface IRandomAccessStream avec des privilèges d’accès ReadWrite à partir du fichier. C’est ce qui vous permettra d’instancier l’objet BitmapEncoder. Il vous faut également déterminer l’ID d’encodeur adapté au type de fichier choisi par l’utilisateur. Cet exemple admet uniquement les images JPEG de sorte que si vous autorisez plusieurs types de fichiers, vous devrez changer en fonction du paramètre FileType.
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) {
Remarque Les ID d’encodeur intégrés sont disponibles en tant que membres statiques de BitmapEncoder.
Si l’utilisateur choisit un fichier déjà existant pour l’enregistrement, vous devez définir IRandomAccessStream.size sur 0 puisque BitmapEncoder exige que le flux de sortie soit vide.
Vous disposez à présent d’un objet BitmapEncoder représentant une image JPEG vide.
Étape 3: Définir quelques données dans l’encodeur
L’objet BitmapEncoder étant maintenant à votre disposition, vous pouvez définir des métadonnées et des données de pixels, ainsi que des miniatures de contrôle et des transformations, notamment pour la rotation et la mise à l’échelle.
Le code présenté ici définit un simple tableau de données de pixels. Pour plus d’informations sur les propriétés et les métadonnées d’image, voir Comment écrire des métadonnées d’image.
// 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
);
Remarque Si vous créez un objet BitmapEncoder à l’aide de la méthode CreateAsync, les informations minimum à fournir pour créer une image valide sont des données de pixels avec la méthode SetPixelData.
Étape 4: Enregistrer les changements dans le fichier
Une fois vos modifications de l’objet BitmapEncoder terminées, vous devez vider l’encodeur et fermer le flux sous-jacent avant d’utiliser le fichier, sans quoi l’image ne sera pas enregistrée et vous perdrez vos données.
Pour finir, traitez toutes les erreurs. Si vous tentez une action de codage qui n’est pas prise en charge par le format de fichier ou qui n’est pas valide, vous obtiendrez une erreur jusqu’à ce que vous appeliez la fonction FlushAsync. Cela signifie que FlushAsync échoue si vous tentez d’enregistrer une miniature en définissant IsThumbnailGenerated sur True dans un format de type BMP (qui ne prend pas en charge les miniatures).
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();
});
}
Remarque Lorsque vous appelez la fonction FlushAsync, l’encodeur enregistre et vous devez recréer l’encodeur pour d’autres tâches ultérieures. Si vous envisagez d’utiliser l’encodeur par la suite, n’appelez pas la fonction FlushAsync avant d’en avoir terminé avec l’encodeur.