Ceci est une documentation préliminaire, traduite par Christine Dubois (Agilcom) et sujette à changement

Transcription

1 Gestion des images Ceci est une documentation préliminaire, traduite par Christine Dubois (Agilcom) et sujette à changement Ce chapitre vous montre comment ajouter et afficher des images dans un site Web et comment les manipuler (les redimensionner, les faire pivoter, leur ajouter un filigrane) avant de les enregistrer. A la fin de ce chapitre, vous saurez : Comment ajouter une image à une page dynamique. Comment permettre aux utilisateurs de charger une image. Comment redimensionner une image. Comment faire pivoter une image. Comment ajouter un filigrane à une image. Comment utiliser une image en filigrane d une autre image. Les fonctionnalités de programmation ASP.NET suivantes vous seront présentées dans ce chapitre : L'assistant WebImage. L'objet Path, qui fournit des méthodes pour manipuler les noms de chemin et les noms de fichier. Ajouter une image à une page Web dynamique Il est possible d ajouter des images à un site et sur des pages individuelles lorsque vous développez un site Web. Vous pouvez également permettre aux utilisateurs de charger des images sur le site, comme par exemple leur photo dans leur profil utilisateur. Pour afficher une image, déjà disponible sur votre site, sur une page web, utilisez un élément HTML <img> comme ceci: <img src="images/photo1.jpg" alt="sample Photo" /> Si vous ne savez pas quelle image afficher avant que la page ne s exécute, cela revient à afficher l image de manière dynamique. La procédure de cette section montre comment afficher une image à la volée. L utilisateur spécifie le nom du fichier image à afficher à partir d'une liste de noms d'images dans une liste déroulante, et après avoir soumis la page, l'image qu il a choisie s affiche.

2 1. Dans WebMatrix, créez un nouveau site web. 2. Ajoutez une nouvelle page nommée DynamicImage.cshtml. 3. A la racine du site, ajoutez un nouveau dossier et nommez-le images. 4. Ajoutez quatre images dans le dossier images que vous venez de créer. (n importe quelle images que vous avez sous la main peut convenir du moment qu elles tiennent sur une page.) Renommez les images en Photo1.jpg, Photo2.jpg, Photo3.jpg, et Photo4.jpg. (Vous n'utiliserez pas Photo4.jpg dans cette procédure, mais vous l'utiliserez plus tard dans ce chapitre.) 5. Remplacez le contenu du fichier par ce qui suit var imagepath= ""; if( Request["photoChoice"]!= null){ imagepath + Request["photoChoice"]; <title>display Image on the Fly</title> </head>x <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> <input type="submit" value="submit" /> <div style="padding:10px;"> <img src="@imagepath" alt="sample Image" width="300px" /> </form> </body>

3 Le corps de la page contient une liste déroulante (un élément <select>) nommé photochoice. Celle-ci comporte trois options dont l'attribut value correspond au nom de chacune des images que vous avez placées dans le dossier images. L utilisateur fait son choix parmi des noms conviviaux tels que «Photo 1», mais c est le nom complet du fichier (avec l extension.jpg) qui sera envoyé au serveur lors de la soumission de la page. Dans le code, on récupère la sélection de l'utilisateur (c est-à-dire, le nom du fichier image) dans la liste, en lisant le contenu de Request["photoChoice"]. Il faut vérifier au préalable qu une sélection a bien été faite. Si c est le cas, on construit un chemin pour l'image, composé du nom du dossier images et du nom du fichier de l utilisateur. (Si vous tentez de construire un chemin, alors qu il n y a rien dans Request[photoChoice"], vous obtiendrez une erreur.) Il en résulte un chemin relatif comme ceci: images\photo1.jpg Le chemin est stocké dans la variable nommée imagepath que l on utilise ensuite plus bas dans la page. Dans le corps de la page, on reconnait un élément <img> pour afficher l'image que l'utilisateur a choisie. L'attribut src n'est pas configuré avec un nom de fichier ou une URL, comme ce serait le cas pour afficher un élément statique. Au lieu de cela, il a la qui contient la valeur du chemin que vous avez récupérée dans le code. La première fois que la page s'exécute, l'utilisateur n'ayant rien sélectionné, aucune image ne s affiche. L attribut src aura donc une valeur vide, et donc en lieu et place de l'image apparaîtra une croix rouge «x» (ou selon votre navigateur, ce qui est restitué quand il ne trouve pas d image). Pour éviter cela, on encadre l'élément <img> dans un bloc conditionnel if qui vérifie le contenu de la variable imagepath. Si l'utilisateur sélectionne une image, imagepath contient un chemin valide. Si l'utilisateur n'a pas choisi d image ou si c'est la première fois que la page est affichée, l'élément <img> n apparaît pas dans le rendu de la page. 6. Enregistrez le fichier et lancez la page dans un navigateur. Charger une image (Upload d une image) L exemple précédent vous a montré comment afficher dynamiquement une image, mais il fonctionne uniquement avec des images déjà présentes sur votre site web. La procédure suivante montre comment permettre aux utilisateurs de charger une image, qui est ensuite affichée sur la page. Dans ASP.NET, vous pouvez manipuler les images à la volée en utilisant l assistant WebImage, qui possède des méthodes pour créer, manipuler et sauvegarder des images. Cet assistant supporte tous les types usuels de fichier web image, y compris.jpg,.png et.bmp. Tout au long de ce chapitre, vous allez utiliser des images au format.jpg, mais vous pourriez utiliser n importe lequel de ces types d'image.

4 1. Ajoutez une nouvelle page et nommez-la UploadImage.cshtml. 2. Remplacez son contenu par le suivant WebImage photo = null; var newfilename = ""; var imagepath = ""; if(ispost){ photo = WebImage.GetImageFromRequest(); if(photo!= null){ newfilename = Guid.NewGuid().ToString() + "_" + Path.GetFileName(photo.FileName); imagepath + newfilename; photo.save(@"~\" + imagepath); <title>image Upload</title> </head> <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> <div class="result"> <img src="@imagepath" alt="image" /> </body>

5 Le corps de page comporte un élément <input type="file">, qui permet aux utilisateurs de sélectionner un fichier à charger. Quand ils cliquent Upload, le fichier qu ils ont choisi est soumis avec le formulaire. Pour récupérer l image à charger, on utilise l'assistant WebImage, qui a toutes sortes de méthodes utiles pour travailler avec des images. Plus particulièrement, la méthode WebImage.GetImageFromRequest nous permet ici de récupérer l'image à charger (s il y en a une à charger) et de la stocker dans une variable nommée photo. Une grande partie du travail dans cet exemple consiste à obtenir et définir les noms du fichier et du chemin d accès de l image. Il faut récupérer le nom (et seulement le nom) de l'image que l'utilisateur a soumise, puis créer un nouveau chemin dans lequel sera stockée l'image. Dans l exemple, le code fait plus que cela. En effet, il faut prévoir le cas où plusieurs utilisateurs voudraient charger des images de même nom, et s assurer que les images existantes ne soient pas écrasées. Si une image a été effectivement chargée (d où le test if(photo! = null)), le code récupère le nom de l'image à l aide de la propriété FileName de l'image. FileName contient le nom complet d origine de l image sur le poste de l'utilisateur. Il ressemble à ceci: C:\Users\Joe\Pictures\SamplePhoto1.jpg Seul le nom de fichier réel (SamplePhoto1.jpg) importe, le chemin complet du fichier sur l ordinateur ne présente aucun intérêt. Pour le récupérer, on utilise la méthode Path.GetFileName, comme ceci: Path.GetFileName(photo.FileName) On crée ensuite un nouveau nom de fichier unique en ajoutant un GUID au nom d'origine. (Pour en savoir plus sur les GUID, consultez la rubrique À propos des GUID plus loin dans ce chapitre.) Le chemin complet dans lequel sera sauvegardée l image peut alors être construit. Il est constitué du nouveau nom de fichier, du dossier (images), et de l'emplacement du site web. Remarque : Pour que votre code puisse enregistrer des fichiers dans le dossier images, l'application doit disposer des permissions de lecture-écriture sur ce dossier. Sur un ordinateur de développement ce n'est généralement pas un problème. Toutefois, lorsque vous publiez votre site vers le serveur Web d'un fournisseur d'hébergement, vous pourriez avoir besoin de définir explicitement les autorisations. Si vous exécutez ce code sur le serveur d'un fournisseur d'hébergement et que vous récupérez des erreurs, adressez-vous à votre fournisseur d'hébergement pour savoir comment définir ces autorisations. Enfin, il suffit de transmettre le chemin de sauvegarde à la méthode Save de l'assistant WebImage pour enregistrer l image sous son nouveau nom. La méthode Save s utilise comme ceci : photo.save (@"~ \" + imagepath). Le chemin d'accès complet est concaténé \", qui représente l'emplacement du site web en cours. (Pour plus d'informations sur l'opérateur ~, voir le chapitre 2 - Introduction à la programmation Web ASP.NET en utilisant la syntaxe Razor) Comme dans l'exemple précédent, le corps de la page contient un élément <img> pour afficher l'image. Si imagepath a été défini, l'élément <img> est affiché et son attribut src est fixé à la valeur de imagepath.

6 3. Exécutez la page dans un navigateur. A propos de GUID Un GUID (ID global unique) est un identificateur qui ressemble à ceci : 936DA01F-9ABD-4d9d-80C7-02AF85C822A8. (Techniquement, c'est un nombre de 16 octets /128 bit.) Lorsque vous avez besoin d'un GUID, vous pouvez appeler un code spécifique qui génère un GUID pour vous. L'idée est qu entre la taille énorme d un tel nombre (3,4 x ) et l'algorithme qui le génère, le nombre résultant a de grandes chances d être unique. Les GUID sont donc un bon moyen de générer des noms uniques et de 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 très conviviaux, si bien qu'ils ont tendance à être utilisé lorsque le nom est uniquement utilisé dans du code. Redimensionner une image Si votre site gère des images fournies par un utilisateur, vous pouvez avoir besoin de redimensionner celles-ci avant de les afficher ou de les enregistrer. L'assistant WebImage est également utilisable dans ce cas. La procédure suivante montre comment redimensionner une image chargée par l utilisateur pour créer une miniature puis enregistrer celle-ci et son image d origine sur le site. La miniature est affichée sur la page et l utilisateur peut cliquer sur un lien qui le redirige vers l image en taille réelle s il le souhaite. 1. Ajoutez une nouvelle page nommée Thumbnail.cshtml. 2. Dans le dossier images, créez un sous-dossier nommé thumbs (miniatures). 3. Remplacez le contenu de la page par le suivant WebImage photo = null; var newfilename = ""; var imagepath = ""; var imagethumbpath = ""; if(ispost){ photo = WebImage.GetImageFromRequest();

7 if(photo!= null){ newfilename = Guid.NewGuid().ToString() + "_" + Path.GetFileName(photo.FileName); imagepath + newfilename; photo.save(@"~\" + imagepath); imagethumbpath + newfilename; photo.resize(width: 60, height: 60, preserveaspectratio: true, preventenlarge: true); photo.save(@"~\" + imagethumbpath); <title>resizing Image</title> </head> <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> <div class="result"> <img src="@imagethumbpath" alt="thumbnail image" /> <a href="@html.attributeencode(imagepath)" target="_self"> View full size </a> </body> Ce code est similaire au code de l'exemple précédent. La différence est qu il enregistre l'image à deux reprises, une fois en taille normale, et une seconde fois en taille réduite. En premier lieu, on récupère l image et on l enregistre dans le dossier images. Un nouveau chemin est ensuite construit pour l image miniature. La méthode Resize de l assistant WebImage permet de créer une image réduite de 60 pixels par 60 pixels. L'exemple montre que les proportions de l image sont respectées et que l image n est pas déformée (ou élargie s il s agissait d agrandir l'image). L'image redimensionnée est alors enregistrée dans le sous-dossier thumbnails. Au bas de la page, on utilise toujours le même élément <img> avec l'attribut dynamique src que vous avez vu dans les exemples précédents pour afficher l'image. Ici, on affiche l image miniature. On utilise également un élément <a> pour créer un lien hypertexte vers la version en taille réelle de l'image. Comme pour l'attribut src de l'élément <img>, on définit l'attribut href de l'élément <a> de manière dynamique à la valeur contenue dans imagepath. Pour s assurer que le chemin d'accès est une URL correcte, on passe imagepath à la méthode Html.AttributeEncode, qui s occupe de convertir les caractères réservés dans le chemin d'accès en des caractères supportés par les URL.

8 4. Exécutez la page dans un navigateur. Faire pivoter et retourner une image L assistant WebImage permet également de faire pivoter et retourner les images. La procédure qui suit récupère une image à partir du serveur, la faire pivoter à l'envers (verticalement), l'enregistre, puis affiche le résultat sur la page. Dans cet exemple, nous allons simplement utiliser un fichier déjà présent sur le serveur (Photo2.jpg). Dans une application réelle, vous travailleriez probablement sur une image que vous auriez récupérer dynamiquement, comme vous l avez vu dans les exemples précédents. 1. Ajoutez une nouvelle page nommée Flip.cshtml. 2. Remplacez son contenu par ce qui suit var imagepath= ""; WebImage photo = new WebImage(@"~\Images\Photo2.jpg"); if(photo!= null){ imagepath photo.flipvertical(); photo.save(@"~\" + imagepath); <title>get Image From File</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <h1>flip Image Vertically</h1> <div class="result"> <img src="@imagepath" alt="image" /> </body>

9 Le code utilise l'assistant WebImage pour récupérer l image à partir du serveur. Le chemin de l image est défini avec la même technique que vous avez utilisée dans les exemples précédents pour enregistrer des images, puis il est transmis à l assistant : WebImage photo = new WebImage(@"~\Images\Photo2.jpg"); Si l image est trouvée, on construit un nouveau chemin de sauvegarde incluant le nom de fichier, comme vous l'avez fait dans les exemples précédents. Pour inverser l'image, on utilise la méthode FlipVertical. L image renversée est ensuite enregistrée. L'affichage de l image sur la page se fait à nouveau via l'élément <img> avec l'attribut src dont la valeur est imagepath. 3. Exécutez la page dans un navigateur. L'image de Photo2.jpg est représentée à l'envers. Si vous redemandez à nouveau la page, l'image est retournée une nouvelle fois. Pour faire pivoter une image, utilisez le même code, mais au lieu d'appeler la méthode FlipVertical ou FlipHorizontal, utilisez les méthodes RotateLeft ou RotateRight. Ajouter un filigrane à une image En ajoutant des images à votre site Web, vous pouvez avoir besoin d y ajouter un filigrane avant de les enregistrer ou de les afficher sur une page Web. On utilise par exemple des filigranes pour ajouter des informations de copyright à une image ou pour faire de la pub sur son business. 1. Ajoutez une nouvelle page nommée Watermark.cshtml. 2. Remplacez son contenu par le suivant var imagepath= ""; WebImage photo = new WebImage(@"~\Images\Photo3.jpg"); if(photo!= null){ imagepath photo.addtextwatermark("my Watermark", fontcolor:"yellow", fontfamily: "Arial"); photo.save(@"~\" + imagepath);

10 <title>water Mark</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <h1>adding a Watermark to an Image</h1> <div class="result"> <img src="@imagepath" alt="image" /> </body> Ce code est le même que dans la page Flip.cshtml (bien que cette fois il utilise le fichier Photo3.jpg). Pour ajouter le filigrane, il suffit d appeler la méthode AddTextWatermark de l assistant WebImage juste avant d'enregistrer l'image. On transmet à la méthode AddTextWatermark le texte du filigrane (ici, "My Watermark"), la couleur de la police (ici, jaune), et la famille de police (ici, Arial). (Même si cela n apparaît pas dans cet exemple, l assistant WebImage vous permet de spécifier aussi l'opacité, la famille et la taille de la police, et la position du texte en filigrane.) L'affichage de l image sur la page se fait à nouveau via l'élément <img> avec l'attribut src dont la valeur est imagepath. 3. Exécutez la page dans un navigateur. Utiliser une image en tant que filigrane Au lieu d'utiliser un texte pour le filigrane, vous pouvez utiliser une autre image. On utilise parfois des images telles qu un logo de société, ou une image, au lieu d un texte pour afficher des informations de copyright. 1. Ajoutez une nouvelle page nommée ImageWatermark.cshtml. 2. Ajoutez une image dans le dossier images, par exemple un logo, et renommez-la MyCompanyLogo.jpg. Cette image doit pouvoir contenir dans un rectangle de 80 pixels de large et 20 pixels de hauteur. 3. Remplacez son contenu par ce qui suit var imagepath = ""; WebImage WatermarkPhoto = new WebImage(@"~\" +

11 @"\Images\MyCompanyLogo.jpg"); WebImage photo = new WebImage(@"~\Images\Photo4.jpg"); if(photo!= null){ imagepath photo.addimagewatermark(watermarkphoto, width: 80, height: 20, horizontalalign:"center", verticalalign:"bottom", opacity:100, padding:10); photo.save(@"~\" + imagepath); <title>image Watermark</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <h1>using an Image as a Watermark</h1> <div class="result"> <img src="@imagepath" alt="image" /> /body> Il s agit encore d une autre variante du code des exemples précédents. On appelle la méthode AddImageWatermark pour ajouter un filigrane à l'image cible (Photo3.jpg) avant d'enregistrer l'image. On indique à la méthode AddImageWatermark, une largeur de 80 pixels et une hauteur de 20 pixels pour le filigrane. On demande aussi à ce que l'image MyCompanyLogo.jpg soit alignée horizontalement au milieu et verticalement au bas de l'image cible. L'opacité est réglée à 100% et le padding (l espace vide par rapport au bord du conteneur) est fixé à 10 pixels. Si l'image du filigrane est plus grande que l'image cible, rien ne se passera. Si l'image du filigrane est plus grande que l'image cible et que vous définissez le padding à zéro, le filigrane est ignoré. Comme précédemment, l'image est affichée en utilisant l'élément <img> et un attribut src dynamique. 4. Exécutez la page dans un navigateur.