Utilisation d’images dans un site pages Web ASP.NET (Razor)

par Tom FitzMacken

Cet article vous montre comment ajouter, afficher et manipuler des images (redimensionner, retourner et ajouter des filigranes) dans un site web pages Web ASP.NET (Razor).

Ce que vous allez apprendre :

  • Comment ajouter une image à une page dynamiquement.
  • Comment permettre aux utilisateurs de charger une image.
  • Comment redimensionner une image.
  • Comment retourner ou faire pivoter une image.
  • Comment ajouter un filigrane à une image.
  • Comment utiliser une image comme filigrane.

Voici les fonctionnalités de programmation ASP.NET introduites dans l’article :

  • L’assistance WebImage .
  • Objet Path , qui fournit des méthodes qui vous permettent de manipuler le chemin d’accès et les noms de fichiers.

Versions logicielles utilisées dans le tutoriel

  • pages Web ASP.NET (Razor) 2
  • WebMatrix 2

Ce didacticiel fonctionne également avec WebMatrix 3.

Ajout dynamique d’une image à une page web

Vous pouvez ajouter des images à votre site web et à des pages individuelles pendant que vous développez le site web. Vous pouvez également permettre aux utilisateurs de charger des images, ce qui peut être utile pour les tâches telles que leur permettre d’ajouter une photo de profil.

Si une image est déjà disponible sur votre site et que vous souhaitez simplement l’afficher sur une page, vous utilisez un élément HTML <img> comme suit :

<img src="images/Photo1.jpg" alt="Sample Photo" />

Parfois, cependant, vous devez être en mesure d’afficher des images dynamiquement, autrement dit, vous ne savez pas quelle image afficher tant que la page n’est pas en cours d’exécution.

La procédure décrite dans cette section montre comment afficher une image à la volée où les utilisateurs spécifient le nom du fichier image à partir d’une liste de noms d’images. Ils sélectionnent le nom de l’image dans une liste déroulante et, lorsqu’ils envoient la page, l’image sélectionnée s’affiche.

[image]

  1. Dans WebMatrix, créez un site web.

  2. Ajoutez une nouvelle page nommée DynamicImage.cshtml.

  3. Dans le dossier racine du site web, ajoutez un nouveau dossier et nommez-le.

  4. Ajoutez quatre images au dossier images que vous venez de créer. (Toutes les images que vous avez pratiques feront, mais elles doivent s’adapter à une page.) Renommez les images Photo1.jpg, Photo2.jpg, Photo3.jpget Photo4.jpg. (Vous n’utiliserez pas Photo4.jpg dans cette procédure, mais vous l’utiliserez plus loin dans l’article.)

  5. Vérifiez que les quatre images ne sont pas marquées en lecture seule.

  6. Remplacez le contenu existant dans la page par ce qui suit :

    @{  var imagePath= "";
        if( Request["photoChoice"] != null){
            imagePath = @"images\" + Request["photoChoice"];
       }
    }
    <!DOCTYPE html>
    <html>
    <head>
      <title>Display Image on the Fly</title>
    </head>
    <body>
    <h1>Displaying an Image On the Fly</h1>
    <form method="post" action="">
        <div>
            I want to see:
            <select name="photoChoice">
                <option value="Photo1.jpg">Photo 1</option>
                <option value="Photo2.jpg">Photo 2</option>
                <option value="Photo3.jpg">Photo 3</option>
            </select>
            &nbsp;
            <input type="submit" value="Submit" />
        </div>
        <div style="padding:10px;">
            @if(imagePath != ""){
                <img src="@imagePath" alt="Sample Image" width="300px" />
            }
        </div>
    </form>
    </body>
    </html>
    

    Le corps de la page a une liste déroulante (un <select> élément) nommée photoChoice. La liste a trois options et l’attribut value de chaque option de liste a le nom de l’une des images que vous avez placées dans le dossier images . Essentiellement, la liste permet à l’utilisateur de sélectionner un nom convivial comme « Photo 1 », puis de passer le nom de fichier.jpglorsque la page est envoyée.

    Dans le code, vous pouvez obtenir la sélection de l’utilisateur (en d’autres termes, le nom du fichier image) dans la liste en lisant Request["photoChoice"]. Vous voyez d’abord s’il y a une sélection du tout. S’il en existe, vous créez un chemin d’accès pour l’image qui se compose du nom du dossier pour les images et du nom du fichier image de l’utilisateur. (Si vous avez essayé de construire un chemin mais qu’il n’y avait rien dans Request["photoChoice"], vous obtiendriez une erreur.) Cela entraîne un chemin relatif comme suit :

    images/Photo1.jpg

    Le chemin d’accès est stocké dans une variable nommée imagePath dont vous aurez besoin ultérieurement dans la page.

    Dans le corps, il existe également un <img> élément utilisé pour afficher l’image que l’utilisateur a choisie. L’attribut src n’est pas défini sur un nom de fichier ou une URL, comme vous le souhaitez pour afficher un élément statique. Au lieu de cela, il est défini @imagePathsur , ce qui signifie qu’il obtient sa valeur à partir du chemin que vous avez défini dans le code.

    La première fois que la page s’exécute, cependant, il n’y a aucune image à afficher, car l’utilisateur n’a rien sélectionné. Cela signifie normalement que l’attribut src est vide et que l’image s’affiche sous la forme d’un « x » rouge (ou tout ce que le navigateur affiche lorsqu’il ne trouve pas d’image). Pour éviter cela, vous placez l’élément <img> dans un if bloc qui teste si la imagePath variable contient quoi que ce soit. Si l’utilisateur a effectué une sélection, imagePath contient le chemin d’accès. Si l’utilisateur n’a pas sélectionné d’image ou s’il s’agit de la première fois que la page est affichée, l’élément <img> n’est même pas rendu.

  7. Enregistrez le fichier et exécutez la page dans un navigateur. (Vérifiez que la page est sélectionnée dans l’espace de travail Fichiers avant de l’exécuter.)

  8. Sélectionnez une image dans la liste déroulante, puis cliquez sur Exemple d’image. Assurez-vous que vous voyez différentes images pour différents choix.

Chargement d’une image

L’exemple précédent vous a montré comment afficher une image dynamiquement, mais elle fonctionnait uniquement avec des images qui étaient déjà sur votre site web. Cette procédure montre comment permettre aux utilisateurs de charger une image, qui est ensuite affichée sur la page. Dans ASP.NET, vous pouvez manipuler des images à la volée à l’aide de l’assistanceWebImage, qui a des méthodes qui vous permettent de créer, manipuler et enregistrer des images. L’assistance WebImage prend en charge tous les types de fichiers image web courants, notamment .jpg, .pnget .bmp. Dans cet article, vous allez utiliser .jpg images, mais vous pouvez utiliser n’importe quel type d’image.

[image]

  1. Ajoutez une nouvelle page et nommez-la UploadImage.cshtml.

  2. Remplacez le contenu existant dans la page par ce qui suit :

    @{  WebImage photo = null;
        var newFileName = "";
        var imagePath = "";
    
        if(IsPost){
            photo = WebImage.GetImageFromRequest();
            if(photo != null){
                newFileName = Guid.NewGuid().ToString() + "_" +
                    Path.GetFileName(photo.FileName);
                imagePath = @"images\" + newFileName;
    
                photo.Save(@"~\" + imagePath);
            }
        }
    }
    <!DOCTYPE html>
    <html>
    <head>
      <title>Image Upload</title>
    </head>
    <body>
      <form action="" method="post" enctype="multipart/form-data">
        <fieldset>
          <legend> Upload Image </legend>
          <label for="Image">Image</label>
          <input type="file" name="Image" />
          <br/>
          <input type="submit" value="Upload" />
        </fieldset>
      </form>
      <h1>Uploaded Image</h1>
        @if(imagePath != ""){
        <div class="result">
            <img src="@imagePath" alt="image" />
    
        </div>
        }
    </body>
    </html>
    

    Le corps du texte a un <input type="file"> élément, qui permet aux utilisateurs de sélectionner un fichier à charger. Quand ils cliquent sur Envoyer, le fichier sélectionné est envoyé avec le formulaire.

    Pour obtenir l’image chargée, vous utilisez l’assistance WebImage , qui a toutes sortes de méthodes utiles pour l’utilisation d’images. Plus précisément, vous utilisez WebImage.GetImageFromRequest pour obtenir l’image chargée (le cas échéant) et la stocker dans une variable nommée photo.

    Un grand nombre de travaux de cet exemple implique l’obtention et la définition des noms de fichier et de chemin d’accès. Le problème est que vous souhaitez obtenir le nom (et simplement le nom) de l’image que l’utilisateur a chargée, puis créer un chemin d’accès pour l’emplacement où vous allez stocker l’image. Étant donné que les utilisateurs peuvent éventuellement charger plusieurs images portant le même nom, vous utilisez un peu de code supplémentaire pour créer des noms uniques et vous assurer que les utilisateurs ne remplacent pas les images existantes.

    Si une image a réellement été chargée (le test if (photo != null)), vous obtenez le nom de l’image à partir de la propriété de l’image FileName . Lorsque l’utilisateur charge l’image, FileName contient le nom d’origine de l’utilisateur, qui inclut le chemin d’accès de l’ordinateur de l’utilisateur. Il peut se présenter comme suit :

    C:\Users\Joe\Pictures\SamplePhoto1.jpg

    Toutefois, vous ne souhaitez pas toutes ces informations de chemin d’accès : vous voulez simplement le nom de fichier réel (SamplePhoto1.jpg). Vous pouvez supprimer uniquement le fichier d’un chemin à l’aide de la Path.GetFileName méthode, comme suit :

    Path.GetFileName(photo.FileName)
    

    Vous créez ensuite un nom de fichier unique en ajoutant un GUID au nom d’origine. (Pour plus d’informations sur les GUID, consultez À propos des GUID plus loin dans cet article.) Ensuite, vous construisez un chemin d’accès complet que vous pouvez utiliser pour enregistrer l’image. Le chemin d’accès d’enregistrement est constitué du nouveau nom de fichier, du dossier (images) et de l’emplacement actuel du site web.

    Notes

    Pour que votre code enregistre des fichiers dans le dossier images , l’application a besoin d’autorisations en lecture-écriture pour ce dossier. Sur votre ordinateur de développement, ce n’est généralement pas un problème. Toutefois, lorsque vous publiez votre site sur le serveur web d’un fournisseur d’hébergement, vous devrez peut-être définir explicitement ces autorisations. Si vous exécutez ce code sur le serveur d’un fournisseur d’hébergement et obtenez des erreurs, consultez le fournisseur d’hébergement pour savoir comment définir ces autorisations.

    Enfin, vous passez le chemin d’enregistrement à la Save méthode de l’assistance WebImage . Cette opération stocke l’image chargée sous son nouveau nom. La méthode save ressemble à ceci : photo.Save(@"~\" + imagePath). Le chemin d’accès complet est ajouté à @"~\"l’emplacement actuel du site web. (Pour plus d’informations sur l’opérateur~, consultez Présentation de ASP.NET programmation web à l’aide de la syntaxe Razor.)

    Comme dans l’exemple précédent, le corps de la page contient un <img> élément pour afficher l’image. Si imagePath elle a été définie, l’élément <img> est rendu et son src attribut est défini sur la imagePath valeur.

  3. Exécutez la page dans un navigateur.

  4. Télécharger une image et vérifiez qu’elle est affichée dans la page.

  5. Dans votre site, ouvrez le dossier images . Vous voyez qu’un nouveau fichier a été ajouté dont le nom de fichier ressemble à ceci :

    45ea4527-7ddd-4965-b9ca-c6444982b342_MyPhoto.png

    Il s’agit de l’image que vous avez chargée avec un GUID précédé du nom. (Votre propre fichier aura un GUID différent et est probablement nommé quelque chose de différent de MyPhoto.png.)

Conseil

À propos des GUID

Un GUID (ID global unique) est un identificateur qui est généralement affiché dans un format comme ceci : 936DA01F-9ABD-4d9d-80C7-02AF85C822A8 Les chiffres et les lettres (de A-F) diffèrent pour chaque GUID, mais ils suivent tous le modèle d’utilisation de groupes de 8-4-4-4-12 caractères. (Techniquement, un GUID est un numéro de 16 octets/128 bits.) Lorsque vous avez besoin d’un GUID, vous pouvez appeler du code spécialisé qui génère un GUID pour vous. L’idée derrière les GUID est qu’entre la taille énorme du nombre (3,4 x 1038) et l’algorithme pour la générer, le nombre résultant est pratiquement garanti comme un type. Les GUID sont donc un bon moyen de générer des noms pour les choses lorsque vous devez garantir que vous n’utiliserez pas le même nom deux fois. L’inconvénient, bien sûr, est que les GUID ne sont pas particulièrement convivial, donc ils ont tendance à être utilisés lorsque le nom est utilisé uniquement dans le code.

Redimensionnement d'une image

Si votre site web accepte des images d’un utilisateur, vous pouvez redimensionner les images avant de les afficher ou de les enregistrer. Vous pouvez à nouveau utiliser l’assistance WebImage pour cela.

Cette procédure montre comment redimensionner une image chargée pour créer une miniature, puis enregistrer la miniature et l’image d’origine dans le site web. Vous affichez la miniature de la page et utilisez un lien hypertexte pour rediriger les utilisateurs vers l’image de taille complète.

[image]

  1. Ajoutez une nouvelle page nommée Miniature.cshtml.

  2. Dans le dossier images , créez un sous-dossier nommé pouces.

  3. Remplacez le contenu existant dans la page par les éléments suivants :

    @{  
        WebImage photo = null;
        var newFileName = "";
        var imagePath = "";
        var imageThumbPath  = "";
    
        if(IsPost){
            photo = WebImage.GetImageFromRequest();
            if(photo != null){
                 newFileName = Guid.NewGuid().ToString() + "_" +
                     Path.GetFileName(photo.FileName);
                 imagePath = @"images\" + newFileName;
                 photo.Save(@"~\" + imagePath);
    
                imageThumbPath = @"images\thumbs\" + newFileName;
                photo.Resize(width: 60, height: 60, preserveAspectRatio: true,
                   preventEnlarge: true);
                photo.Save(@"~\" + imageThumbPath);        }
        }
    }
    <!DOCTYPE html>
    <html>
    <head>
      <title>Resizing Image</title>
    </head>
    <body>
    <h1>Thumbnail Image</h1>
      <form action="" method="post" enctype="multipart/form-data">
        <fieldset>
          <legend> Creating Thumbnail Image </legend>
          <label for="Image">Image</label>
          <input type="file" name="Image" />
          <br/>
          <input type="submit" value="Submit" />
        </fieldset>
      </form>
        @if(imagePath != ""){
        <div class="result">
            <img src="@imageThumbPath" alt="Thumbnail image" />
            <a href="@Html.AttributeEncode(imagePath)" target="_Self">
                View full size
            </a>
        </div>
    
        }
    </body>
    </html>
    

    Ce code est similaire au code de l’exemple précédent. La différence est que ce code enregistre l’image deux fois, une fois normalement et une fois après avoir créé une copie miniature de l’image. Tout d’abord, vous obtenez l’image chargée et enregistrez-la dans le dossier images . Vous construisez ensuite un nouveau chemin d’accès pour l’image miniature. Pour créer la miniature, vous appelez la méthode de Resize l’assistance WebImage pour créer une image de 60 pixels par 60 pixels. L’exemple montre comment conserver le rapport d’aspect et comment vous pouvez empêcher l’agrandissement de l’image (dans le cas où la nouvelle taille rend l’image plus grande). L’image redimensionnée est ensuite enregistrée dans le sous-dossier des pouces .

    À la fin du balisage, vous utilisez le même <img> élément avec l’attribut dynamique src que vous avez vu dans les exemples précédents pour afficher l’image de manière conditionnelle. Dans ce cas, vous affichez la miniature. Vous utilisez également un élément pour créer un <a> lien hypertexte vers la version volumineuse de l’image. Comme avec l’attribut de l’élément<img>, vous définissez l’attribut href de l’élément <a> de manière dynamique sur ce qui se trouveimagePath.src Pour vous assurer que le chemin d’accès peut fonctionner en tant qu’URL, vous passez à la Html.AttributeEncode méthode, ce qui convertit les caractères réservés imagePath dans le chemin d’accès en caractères ok dans une URL.

  4. Exécutez la page dans un navigateur.

  5. Télécharger une photo et vérifier que la miniature est affichée.

  6. Cliquez sur la miniature pour afficher l’image de taille complète.

  7. Dans les images et les images/pouces, notez que de nouveaux fichiers ont été ajoutés.

Rotation et découpage d’une image

L’assistance WebImage vous permet également de retourner et de faire pivoter des images. Cette procédure montre comment obtenir une image à partir du serveur, retourner l’image à l’envers (verticalement), l’enregistrer, puis afficher l’image retournée sur la page. Dans cet exemple, vous utilisez simplement un fichier que vous avez déjà sur le serveur (Photo2.jpg). Dans une application réelle, vous retournez probablement une image dont vous obtenez le nom dynamiquement, comme vous l’avez fait dans les exemples précédents.

[image]

  1. Ajoutez une nouvelle page nommée FlipImage.cshtml.

  2. Remplacez le contenu existant dans la page par les éléments suivants :

    @{  var imagePath= "";
        WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
        if(photo != null){
            imagePath = @"images\Photo2.jpg";
            photo.FlipVertical();
            photo.Save(@"~\" + imagePath);
         }
    }
    <!DOCTYPE html>
    <html>
    <head>
      <title>Get Image From File</title>
      <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    </head>
    <body>
    <h1>Flip Image Vertically</h1>
    @if(imagePath != ""){
      <div class="result">
        <img src="@imagePath" alt="Image" />
      </div>
    }
    </body>
    </html>
    

    Le code utilise l’assistance WebImage pour obtenir une image à partir du serveur. Vous créez le chemin d’accès à l’image à l’aide de la même technique que celle que vous avez utilisée dans les exemples précédents pour enregistrer des images, et vous transmettez ce chemin lorsque vous créez une image à l’aide WebImagede :

    WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
    

    Si une image est trouvée, vous construisez un nouveau chemin d’accès et un nom de fichier, comme vous l’avez fait dans les exemples précédents. Pour retourner l’image, vous appelez la FlipVertical méthode, puis vous enregistrez à nouveau l’image.

    L’image est à nouveau affichée sur la page à l’aide de l’élément <img> avec l’attribut src défini sur imagePath.

  3. Exécutez la page dans un navigateur. L’image de Photo2.jpg est affichée à l’envers.

  4. Actualisez la page ou demandez à nouveau à la page d’afficher que l’image est retournée vers le haut vers le haut.

Pour faire pivoter une image, vous utilisez le même code, sauf qu’au lieu d’appeler le FlipVertical ou FlipHorizontal, vous appelez RotateLeft ou RotateRight.

Ajout d’un filigrane à une image

Lorsque vous ajoutez des images à votre site web, vous pouvez ajouter un filigrane à l’image avant de l’enregistrer ou de l’afficher sur une page. Les personnes utilisent souvent des filigranes pour ajouter des informations sur le droit d’auteur à une image ou pour publier leur nom d’entreprise.

[image]

  1. Ajoutez une nouvelle page nommée Watermark.cshtml.

  2. Remplacez le contenu existant dans la page par les éléments suivants :

    @{  var imagePath= "";
        WebImage photo = new WebImage(@"~\Images\Photo3.jpg");
        if(photo != null){
            imagePath = @"images\Photo3.jpg";
            photo.AddTextWatermark("My Watermark", fontColor:"Yellow", fontFamily:
                "Arial");
            photo.Save(@"~\" + imagePath);    }
    }
    <!DOCTYPE html>
    <html>
    <head>
      <title>Water Mark</title>
      <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    </head>
    <body>
    <h1>Adding a Watermark to an Image</h1>
    @if(imagePath != ""){
      <div class="result">
        <img src="@imagePath" alt="Image" />
      </div>
    }
    </body>
    </html>
    

    Ce code est semblable au code de la page FlipImage.cshtml à partir d’une version antérieure (bien que cette fois-ci utilise le fichier Photo3.jpg ). Pour ajouter le filigrane, vous appelez la méthode de AddTextWatermark l’assistance WebImage avant d’enregistrer l’image. Dans l’appel à AddTextWatermark, vous passez le texte « Mon filigrane », définissez la couleur de police sur jaune et définissez la famille de polices sur Arial. (Bien qu’il ne s’affiche pas ici, l’assistance WebImage vous permet également de spécifier l’opacité, la famille de polices et la taille de police, ainsi que la position du texte de filigrane.) Lorsque vous enregistrez l’image, elle ne doit pas être en lecture seule.

    Comme vous l’avez vu précédemment, l’image s’affiche sur la page à l’aide de l’élément <img> avec l’attribut src défini sur @imagePath.

  3. Exécutez la page dans un navigateur. Notez le texte « Mon filigrane » en bas à droite de l’image.

Utilisation d’une image en tant que filigrane

Au lieu d’utiliser du texte pour un filigrane, vous pouvez utiliser une autre image. Les personnes utilisent parfois des images comme un logo d’entreprise comme filigrane, ou elles utilisent une image de filigrane au lieu de texte pour obtenir des informations sur le droit d’auteur.

[image]

  1. Ajoutez une nouvelle page nommée ImageWatermark.cshtml.

  2. Ajoutez une image au dossier images que vous pouvez utiliser en tant que logo et renommez l’imageMyCompanyLogo.jpg. Cette image doit être une image que vous pouvez voir clairement lorsqu’elle est définie sur 80 pixels de large et de 20 pixels.

  3. Remplacez le contenu existant dans la page par les éléments suivants :

    @{  var imagePath = "";
       WebImage WatermarkPhoto = new WebImage(@"~\" +
            @"\Images\MyCompanyLogo.jpg");
        WebImage photo = new WebImage(@"~\Images\Photo4.jpg");
        if(photo != null){
            imagePath = @"images\Photo4.jpg";
            photo.AddImageWatermark(WatermarkPhoto, width: 80, height: 20,
               horizontalAlign:"Center", verticalAlign:"Bottom",
               opacity:100,  padding:10);
          photo.Save(@"~\" + imagePath);
       }
    }
    <!DOCTYPE html>
    <html>
    <head>
      <title>Image Watermark</title>
      <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    </head>
    <body>
      <h1>Using an Image as a Watermark</h1>
      @if(imagePath != ""){
        <div class="result">
          <img src="@imagePath" alt="Image" />
        </div>
      }
    </body>
    </html>
    

    Il s’agit d’une autre variante du code des exemples précédents. Dans ce cas, vous appelez AddImageWatermark pour ajouter l’image de filigrane à l’image cible (Photo3.jpg) avant d’enregistrer l’image. Lorsque vous appelez AddImageWatermark, vous définissez sa largeur sur 80 pixels et la hauteur sur 20 pixels. L’imageMyCompanyLogo.jpg est alignée horizontalement dans le centre et alignée verticalement en bas de l’image cible. L’opacité est définie sur 100 % et le remplissage est défini sur 10 pixels. Si l’image de filigrane est plus grande que l’image cible, rien ne se produit. Si l’image de filigrane est plus grande que l’image cible et que vous définissez le remplissage de l’image sur zéro, le filigrane est ignoré.

    Comme précédemment, vous affichez l’image à l’aide de l’élément <img> et d’un attribut dynamique src .

  4. Exécutez la page dans un navigateur. Notez que l’image de filigrane apparaît en bas de l’image principale.

Ressources supplémentaires

Utilisation de fichiers dans un site pages Web ASP.NET

Présentation de la programmation pages Web ASP.NET à l’aide de la syntaxe Razor