Comment créer un rédacteur de code HTML ASP.NET avec des capacités de redimensionnement d'image

La résolution de l'image est quelque chose que nous négligeons parfois en tant que développeurs. Après tout, les fonctionnalités de base, la gestion des erreurs et l’intuitivité passent avant tout. Cependant, cela ne signifie pas que la gestion de la résolution ou de la taille de l’image n’est pas importante.

En fait, une mauvaise gestion des images peut ralentir les sites Web et les applications, consommer une bande passante excessive ou ruiner l'interface utilisateur ou l'UX. Un bon moyen d’éviter cela consiste à redimensionner les images téléchargées avant qu’elles ne soient stockées. Découvrons donc comment créer un rédacteur de code HTML avec redimensionnement d'image à l'aide d'ASP.NET, ImageMagick et d'un éditeur HTML WYSIWYG.

Points clés à retenir

• Le redimensionnement de l'image améliore les performances en réduisant les temps de chargement et l'utilisation de la bande passante.

• ASP.NET, Froala et ImageMagick sont combinés pour créer une application Web avec redimensionnement d'image.

• Froala Editor permet de télécharger facilement des images et d'éditer du texte enrichi.

• ImageMagick simplifie le redimensionnement, garantissant que les images correspondent aux dimensions définies.

• Solution personnalisable avec des options de validation, d'amélioration et plus encore.

Voici une petite démonstration de la capacité de redimensionnement d'image de notre rédacteur de code HTML :

Remarquez comment les 2 exemples d'images avaient une orientation paysage avant d'être téléchargés et comment ils ont tous deux changé par la suite. Maintenant, lisez la suite pour utiliser un rédacteur de code HTML basé sur ASP.NET avec des capacités de redimensionnement d'image. Pour plus de détails, n'hésitez pas à consulter notre documentation sur le redimensionnement d'image .NET. Maintenant, configurons l'application.

Configuration de l'application

Avant de passer à la partie développement, voyons les outils que nous utiliserons :

• ASP.NET Core : un framework d'application Web open source fourni avec Visual Studio

• ImageMagick : Une suite logicielle open source complète pour améliorer les images

• Froala : un puissant éditeur HTML WYSIWYG qui prend en charge l'édition de code HTML, le téléchargement d'images, le Markdown et bien plus encore

Maintenant que nous savons ce dont nous avons besoin, procédons comme suit pour créer notre projet :

1. Ouvrez Visual Studio et créez un nouveau projet.

2. Sélectionnez le modèle « ASP.NET Core Web App (Razor Pages). Dans notre cas, le nom du projet est FroalaImageResizeDemo.

3. Sélectionnez « .NET 8.0 (Support à long terme) » comme framework.

4. Cliquez sur « Créer ».

Ensuite, ajoutons l'éditeur Froala via CDN :

1. Ouvrez le fichier « _Layout.cshtml » sous le dossier Pages > Répertoire partagé.

2. Ajoutez les liens Froala CDN dans la section .
   

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.3.0/css/froala_editor.pkgd.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.3.0/js/froala_editor.pkgd.min.js"></script>Once we’ve included Froala in our project, we will be installing ImageMagick via NuGet Package Manager.

1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet et sélectionnez « Gérer les packages NuGet. »

2. Sous l'onglet « Parcourir », recherchez « Magick.NET-Q8-AnyCPU » et cliquez sur le bouton d'installation.

Enfin, créons un dossier dans lequel nous pouvons stocker les images. Dans l'Explorateur de solutions, recherchez le dossier « wwwroot ». Créez un nouveau dossier à l’intérieur nommé « images ». Maintenant que nous avons configuré la configuration de notre projet, il est temps de créer notre rédacteur de code HTML de redimensionnement d'image.

Créer le rédacteur de code HTML

Tout d'abord, créons une nouvelle page sur laquelle nous pouvons initialiser et charger Froala Editor.

1. Cliquez avec le bouton droit sur le dossier Pages.

2. Sélectionnez Ajouter > Nouvel article > Page Rasoir.

3. Nommons-le « Editor.cshtml. »

Insérez le code suivant dans la page nouvellement créée :

@page
@model FroalaImageResizeDemo.Pages.EditorModel
@{
    ViewData["Title"] = "Froala Image Resize Demo";
}

<h2 class="mt-5 mb-3">@ViewData["Title"]</h2>

<div id="editor">For this demo, we're resizing all uploaded images to 600 px by 300 px.</div>


<script>
    new FroalaEditor('#editor', {
        imageUploadURL: '',
        heightMin: 600
    });
</script>

Cette page contiendra l'éditeur Froala ainsi qu'un en-tête. Le

avec l’ID « éditeur » est le conteneur dans lequel nous chargerons Froala. D'autre part, imageUploadURL est une option de téléchargement d'image Froala qui détermine où la demande de téléchargement est effectuée. Pour l’instant, laissons cette option vide, mais nous y reviendrons plus tard.

Nous avons désormais une page dédiée à notre rédacteur de code HTML. Cependant, il n'est toujours pas accessible via la navigation, alors corrigeons ce problème en ajoutant un lien :

1. Ouvrez à nouveau « _Layout.cshtml ».

2. Ajoutez l'extrait de code suivant au

   dans la section de la barre de navigation :
   

<li class="nav-item">
    <a class="nav-link text-dark" asp-page="/Editor">Froala Editor</a>
</li>

Ensuite, essayez de lancer l'application en appuyant sur F5 ou sur le bouton de lecture. Vous devriez maintenant avoir un aperçu de l'application ASP.NET Core par défaut avec un lien « Froala Editor » sur la barre de navigation. Cliquez dessus et vous verrez Froala en action. Vous pouvez désormais modifier du texte, télécharger des images et effectuer d'autres actions de texte enrichi. Il ne reste plus qu'à combiner notre rédacteur de code HTML avec ImageMagick pour le redimensionnement des images.

Intégrer ImageMagick pour redimensionner les images

Pour inclure la fonctionnalité de redimensionnement d'ImageMagick, nous devons d'abord créer un nouveau contrôleur :

1. Cliquez avec le bouton droit sur le dossier Controllers (créez-en un s'il n'a pas été généré par l'EDI).

2. Sélectionnez Ajouter > Nouvel article.

3. Sous la catégorie ASP.NET Core, choisissez « Contrôleur API — Vide. »

4. Nommez-le « FroalaApiController.cs » et cliquez sur le bouton Ajouter.

Ensuite, ajoutez le code suivant au contrôleur nouvellement créé :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.3.0/css/froala_editor.pkgd.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.3.0/js/froala_editor.pkgd.min.js"></script>Once we’ve included Froala in our project, we will be installing ImageMagick via NuGet Package Manager.

Tout d’abord, assurez-vous d’inclure « utilisation d’ImageMagick » pour l’activer. Nous vérifions ensuite si un fichier a été téléchargé avec succès à partir de la demande ou non. Ensuite, nous définissons le chemin du fichier où nous stockons nos images (dans notre cas, sous wwwroot > images). Ensuite, nous redimensionnons l'image en déclarant un nouvel objet MagickImage avec nos dimensions souhaitées (600×600 pixels). Enfin, nous renvoyons un code d'état HTTP 200 ainsi que le JSON contenant l'URL de l'image en cas de succès. Froala affichera ensuite l'image dans l'éditeur, et c'est terminé !

Conclusion

Le redimensionnement des images est une tâche vitale pour toute application. Par exemple, nous devrons peut-être limiter la résolution des images à des fins d'affichage (par exemple, images de courrier électronique ou de blog). Nous devrons peut-être également minimiser la taille de l’image pour plus d’efficacité et de réduction des coûts. Cependant, la gestion des images peut parfois être pénible. Heureusement, il existe des dizaines d'outils comme ImageMagick qui peuvent nous aider à y parvenir facilement, comme je vous l'ai montré dans cette démo de l'auteur de code HTML.

En combinant .NET, Froala et ImageMagick, vous pouvez rationaliser l'ensemble du processus de mise en œuvre du redimensionnement d'image dans vos applications. Pour vos propres projets, en utilisant les mêmes outils, vous pouvez même monter d'un cran. Par exemple, vous pouvez ajouter une amélioration de la qualité de l'image, une validation du type et de la taille du fichier, une sauvegarde automatique, etc. pour rendre votre application plus robuste. Maintenant, c'est à votre tour de saupoudrer un peu de (Image)magie(K) sur vos projets !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

json html Object define if for select include try Directory Error using finally default this display ul ide visual studio web app http ux ui

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn