Partager via

Guide pas à pas pour le redimensionnement d'image

Ce bref tutoriel vous guidera dans un exemple qui utilise l’échelle d’image dans une application .NET MAUI. Pour commencer, vérifiez que vous avez effectué les étapes de la page Prise en main. pour .NET MAUI.

Présentation

Cet exemple illustre l’utilisation de certaines API Windows AI, notamment LanguageModel pour la génération de texte et ImageScaler pour la super résolution d’images afin de mettre à l’échelle et d’affiner les images. Cliquez sur l’un des boutons « Mettre à l’échelle » pour mettre à l’échelle l’image (ou afficher à nouveau l’image d’origine, non mise à l’échelle), ou entrez une invite de texte, puis cliquez sur le bouton « Générer » pour générer une réponse de texte.

Les modifications apportées au modèle .NET MAUI App » sont réparties sur quatre fichiers :

  1. MauiWindowsAISample.csproj : ajoute la référence du package sdk d’application Windows requis pour les API d’IA Windows. Cette référence ne doit être conditionnée que lors de la génération pour Windows (voir les notes supplémentaires ci-dessous pour plus d’informations). Ce fichier définit également le TargetFramework nécessaire pour Windows.
  2. Plateformes/Windows/MainPage.cs : implémente des méthodes partielles de la classe MainPage partagée pour afficher et gérer les fonctionnalités de génération de texte et de mise à l’échelle d’images.
  3. MainPage.xaml : définit les contrôles pour afficher la génération de texte et la mise à l’échelle d’images.
  4. MainPage.xaml.cs : définit les méthodes partielles que le MainPage.cs spécifique à Windows implémente.

Dans le deuxième fichier répertorié ci-dessus, vous trouverez la fonction suivante, qui illustre certaines fonctionnalités de base pour la méthode ImageScaler :

private async void DoScaleImage(double scale)
{
    // Load the original image
    var resourceManager = new Microsoft.Windows.ApplicationModel.Resources.ResourceManager();
    var resource = resourceManager.MainResourceMap.GetValue("ms-resource:///Files/enhance.png");
    if (resource.Kind == Microsoft.Windows.ApplicationModel.Resources.ResourceCandidateKind.FilePath)
    {
        // Load as a SoftwareBitmap
        var file = await Windows.Storage.StorageFile.GetFileFromPathAsync(resource.ValueAsString);
        var fileStream = await file.OpenStreamForReadAsync();

        var decoder = await BitmapDecoder.CreateAsync(fileStream.AsRandomAccessStream());
        var softwareBitmap = await decoder.GetSoftwareBitmapAsync();
        int origWidth = softwareBitmap.PixelWidth;
        int origHeight = softwareBitmap.PixelHeight;

        SoftwareBitmap finalImage;
        if (scale == 0.0)
        {
            // just show the original image
            finalImage = softwareBitmap;
        }
        else
        {
            // Scale the image to be the exact pixel size of the element displaying it
            if (ImageScaler.GetReadyState() == AIFeatureReadyState.NotReady)
            {
                var op = await ImageScaler.EnsureReadyAsync();
                if (op.Status != AIFeatureReadyResultState.Success)
                {
                    throw new Exception(op.ExtendedError.Message);
                }
            }

            ImageScaler imageScaler = await ImageScaler.CreateAsync();

            double imageScale = scale;
            if (imageScale > imageScaler.MaxSupportedScaleFactor)
            {
                imageScale = imageScaler.MaxSupportedScaleFactor;
            }
            System.Diagnostics.Debug.WriteLine($"Scaling to {imageScale}x...");

            int newHeight = (int)(origHeight * imageScale);
            int newWidth = (int)(origWidth * imageScale);
            finalImage = imageScaler.ScaleSoftwareBitmap(softwareBitmap, newWidth, newHeight);
        }

        // Display the scaled image. The if/else here shows two different approaches to do this.
        var mauiContext = scaledImage.Handler?.MauiContext;
        if (mauiContext != null)
        {
            // set the SoftwareBitmap as the source of the Image control
            var imageToShow = finalImage;
            if (imageToShow.BitmapPixelFormat != BitmapPixelFormat.Bgra8 ||
                imageToShow.BitmapAlphaMode == BitmapAlphaMode.Straight)
            {
                // SoftwareBitmapSource only supports Bgra8 and doesn't support Straight alpha mode, so convert
                imageToShow = SoftwareBitmap.Convert(imageToShow, BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied);
            }
            var softwareBitmapSource = new SoftwareBitmapSource();
            _ = softwareBitmapSource.SetBitmapAsync(imageToShow);
            var nativeScaledImageView = (Microsoft.UI.Xaml.Controls.Image)scaledImage.ToPlatform(mauiContext);
            nativeScaledImageView.Source = softwareBitmapSource;
        }
        else
        {
            // An alternative approach is to encode the image so a stream can be handed
            // to the Maui ImageSource.

            // Note: There's no "using(...)" here, since this stream needs to be kept alive for the image to be displayed
            var scaledStream = new InMemoryRandomAccessStream();
            {
                BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, scaledStream);
                encoder.SetSoftwareBitmap(finalImage);
                await encoder.FlushAsync();
                scaledImage.Source = ImageSource.FromStream(() => scaledStream.AsStream());
            }
        }
    }
}

Création et exécution de l’exemple

  1. Clonez le référentiel WindowsAppSDK-Samples .
  2. Passez à la branche « release/experimental ».
  3. Accédez au dossier Samples/WindowsAIFoundry/cs-maui .
  4. Ouvrez MauiWindowsAISample.sln dans Visual Studio 2022.
  5. Vérifiez que la barre d’outils de débogage a défini « Machine Windows » comme appareil cible.
  6. Appuyez sur F5 ou sélectionnez « Démarrer le débogage » dans le menu Débogage pour exécuter l’exemple (l’exemple peut également être exécuté sans débogage en sélectionnant « Démarrer sans débogage » dans le menu Débogage ou Ctrl+F5).

Voir aussi

  • Last updated on