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

Article
07/13/2023

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 de manière dynamique.

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 des noms de chemin et de fichier.

Versions logicielles utilisées dans le tutoriel

pages Web ASP.NET (Razor) 2

WebMatrix 2

Ce tutoriel 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 des tâches telles que leur permettre d’ajouter un 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" />

Toutefois, vous devez parfois être en mesure d’afficher des images dynamiquement, c’est-à-dire que vous ne savez pas quelle image afficher tant que la page n’est pas en cours d’exécution.

La procédure de cette section montre comment afficher une image à la volée dans laquelle 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 qu’ils ont sélectionnée s’affiche.

[Capture d’écran montrant une image affichée après avoir été sélectionnée dans une liste déroulante.]

Dans WebMatrix, créez un site web.
Ajoutez une nouvelle page nommée DynamicImage.cshtml.
Dans le dossier racine du site web, ajoutez un nouveau dossier et nommez-le images.
Ajoutez quatre images au dossier images que vous venez de créer. (Toutes les images que vous avez à portée de main le feront, mais elles doivent tenir sur 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.)
Vérifiez que les quatre images ne sont pas marquées en lecture seule.
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 comporte une liste déroulante (un <select> élément) nommée photoChoice. La liste comporte 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 transmettre le nom de fichier.jpg lors de l’envoi de la page.

Dans le code, vous pouvez obtenir la sélection de l’utilisateur (en d’autres termes, le nom du fichier image) à partir de la liste en lisant Request["photoChoice"]. Vous voyez d’abord s’il y a une sélection. Si tel est le cas, vous construisez 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 d’accès mais qu’il n’y avait rien dans Request["photoChoice"], vous obtenez une erreur.) Il en résulte un chemin d’accès relatif semblable à celui-ci :

images/Photo1.jpg

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

Dans le corps, il y a également un <img> élément qui est 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 faisiez pour afficher un élément statique. Au lieu de cela, il est défini sur @imagePath, 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, il n’y a pas d’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 pour voir si la imagePath variable contient quelque chose. Si l’utilisateur a effectué une sélection, imagePath contient le chemin d’accès. Si l’utilisateur n’a pas choisi d’image ou s’il s’agit de la première fois que la page s’affiche, l’élément <img> n’est même pas rendu.
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.)
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 de manière dynamique, mais il fonctionnait uniquement avec des images qui se trouvaient 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’assistance WebImage , qui dispose de méthodes qui vous permettent de créer, manipuler et enregistrer des images. L’assistance WebImage prend en charge tous les types de fichiers d’image web courants, notamment .jpg, .pnget .bmp. Tout au long de cet article, vous allez utiliser .jpg images, mais vous pouvez utiliser n’importe quel type d’image.

[Capture d’écran montrant la page Charger une image.]

Ajoutez une nouvelle page et nommez-la UploadImage.cshtml.
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 comporte un <input type="file"> élément qui permet aux utilisateurs de sélectionner un fichier à charger. Lorsqu’ils cliquent sur Envoyer, le fichier qu’ils ont choisi est envoyé avec le formulaire.

Pour obtenir l’image chargée, vous utilisez l’assistance WebImage , qui propose toutes sortes de méthodes utiles pour travailler avec des 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.

Une grande partie du travail de cet exemple implique l’obtention et la définition de noms de fichiers et de chemins d’accès. Le problème est que vous souhaitez obtenir le nom (et uniquement 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

Vous ne voulez pas toutes ces informations de chemin d’accès, mais vous voulez simplement le nom de fichier réel (SamplePhoto1.jpg). Vous pouvez supprimer uniquement le fichier d’un chemin d’accès à 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, voir À 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, case activée avec 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é à @"~\", qui est l’emplacement actuel du site web. (Pour plus d’informations sur l’opérateur ~ , consultez Présentation de la programmation web ASP.NET à 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 a été défini, l’élément <img> est rendu et son src attribut est défini sur la imagePath valeur .
Exécutez la page dans un navigateur.
Chargez une image et assurez-vous qu’elle est affichée dans la page.
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éfixé au nom. (Votre propre fichier aura un GUID différent et est probablement nommé autre chose que MyPhoto.png.)

Conseil

À propos des GUID

Un GUID (ID global unique) est un identificateur qui est généralement rendu dans un format comme celui-ci : 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-4-12 caractères. (Techniquement, un GUID est un nombre 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 l’énorme taille du nombre (3,4 x 10³⁸) et l’algorithme pour le générer, le nombre résultant est pratiquement garanti comme étant unique en son genre. Les GUID sont donc un bon moyen de générer des noms pour des choses quand 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 conviviaux, de sorte qu’ils ont tendance à être utilisés lorsque le nom est utilisé uniquement dans le code.

Redimensionnement d'une image

Si votre site web accepte les images d’un utilisateur, vous pouvez les redimensionner 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 sur la page et utilisez un lien hypertexte pour rediriger les utilisateurs vers l’image de taille réelle.

[Capture d’écran montrant la page Image miniature.]

Ajoutez une nouvelle page nommée Thumbnail.cshtml.
Dans le dossier images , créez un sous-dossier nommé thumbs.
Remplacez le contenu existant dans la page par ce qui suit :
```
@{  
    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 réellement 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 les proportions et comment empêcher l’agrandissement de l’image (au cas où la nouvelle taille agrandirait l’image). 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 <a> élément pour créer un lien hypertexte vers la version volumineuse de l’image. Comme avec l’attribut de l’élément<img>, vous définissez dynamiquement l’attribut href de l’élément <a> sur ce qui se trouve dans imagePath.src Pour vous assurer que le chemin d’accès peut fonctionner en tant qu’URL, vous passez imagePath à la Html.AttributeEncode méthode , qui convertit les caractères réservés dans le chemin d’accès en caractères qui sont corrects dans une URL.
Exécutez la page dans un navigateur.
Chargez une photo et vérifiez que la miniature est affichée.
Cliquez sur la miniature pour afficher l’image en taille réelle.
Dans les images et les images/pouces, notez que de nouveaux fichiers ont été ajoutés.

Rotation et glissement 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 retourneriez probablement une image dont vous obtenez le nom de manière dynamique, comme vous l’avez fait dans les exemples précédents.

[Capture d’écran montrant la page Retourner l’image verticale.]

Ajoutez une nouvelle page nommée FlipImage.cshtml.
Remplacez le contenu existant dans la page par ce qui suit :
```
@{  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 utilisée dans les exemples précédents pour enregistrer des images, et vous passez ce chemin lorsque vous créez une image à l’aide de WebImage:
```
WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
```
Si une image est trouvée, vous construisez un nouveau chemin d’accès et un nouveau 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 imagePathsur .
Exécutez la page dans un navigateur. L’image de Photo2.jpg est affichée à l’envers.
Actualisez la page ou demandez à nouveau la page pour voir l’image retournée à droite vers le haut.

Pour faire pivoter une image, vous utilisez le même code, sauf qu’au lieu d’appeler ou FlipVerticalFlipHorizontal, 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. Personnes utilisent souvent des filigranes pour ajouter des informations de copyright à une image ou pour publier leur nom commercial.

[Capture d’écran montrant la page Ajout d’un filigrane à une image.]

Ajoutez une nouvelle page nommée Watermark.cshtml.
Remplacez le contenu existant dans la page par ce qui suit :
```
@{  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 précédemment (bien que cette fois, il utilise le fichier Photo3.jpg ). Pour ajouter le filigrane, appelez la méthode de l’assistance WebImage avant d’enregistrer AddTextWatermark 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 en 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 @imagePathsur .
Exécutez la page dans un navigateur. Notez le texte « Mon filigrane » dans le coin inférieur droit de l’image.

Utilisation d’une image comme filigrane

Au lieu d’utiliser du texte pour un filigrane, vous pouvez utiliser une autre image. Personnes parfois utiliser des images comme un logo d’entreprise comme filigrane, ou ils utilisent une image en filigrane au lieu de texte pour les informations de copyright.

[Capture d’écran montrant la page Utilisation d’une image en tant que filigrane.]

Ajoutez une nouvelle page nommée ImageWatermark.cshtml.
Ajoutez une image au dossier images que vous pouvez utiliser comme logo et renommez l’image MyCompanyLogo.jpg. Cette image doit être une image que vous pouvez voir clairement lorsqu’elle est définie sur 80 pixels de large et 20 pixels de haut.
Remplacez le contenu existant dans la page par ce qui suit :
```
@{  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 sa hauteur sur 20 pixels. L’imageMyCompanyLogo.jpg est alignée horizontalement au centre et verticalement alignée 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 en filigrane est plus grande que l’image cible, rien ne se produit. Si l’image en 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 .
Exécutez la page dans un navigateur. Notez que l’image en filigrane apparaît en bas de l’image main.

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

Partager via

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

Versions logicielles utilisées dans le tutoriel

Ajout dynamique d’une image à une page web

Chargement d’une image

À propos des GUID

Redimensionnement d'une image

Rotation et glissement d’une image

Ajout d’un filigrane à une image

Utilisation d’une image comme filigrane

Ressources supplémentaires

Commentaires

Ressources supplémentaires