Die Bildauflösung ist etwas, das wir als Entwickler manchmal übersehen. Grundfunktionalität, Fehlerbehandlung und Intuitivität stehen schließlich an erster Stelle. Das bedeutet jedoch nicht, dass der Umgang mit der Bildauflösung oder -größe nicht wichtig ist.
Tatsächlich kann eine unsachgemäße Bildverarbeitung Websites und Anwendungen verlangsamen, übermäßige Bandbreite verbrauchen oder die Benutzeroberfläche bzw. UX ruinieren. Eine gute Möglichkeit, dies zu verhindern, besteht darin, die Größe hochgeladener Bilder vor dem Speichern zu ändern. Lassen Sie uns also herausfinden, wie wir mit ASP.NET, ImageMagick und einem WYSIWYG-HTML-Editor einen HTML-Code-Writer mit Bildgrößenänderung erstellen können.
Wichtige Erkenntnisse
Die Größenänderung von Bildern steigert die Leistung durch Reduzierung der Ladezeiten und der Bandbreitennutzung.
ASP.NET, Froala und ImageMagick werden kombiniert, um eine Web-App mit Bildgrößenänderung zu erstellen.
Froala Editor ermöglicht das einfache Hochladen von Bildern und die Rich-Text-Bearbeitung.
ImageMagick vereinfacht die Größenänderung und stellt sicher, dass Bilder den festgelegten Abmessungen entsprechen.
Anpassbare Lösung mit Optionen zur Validierung, Verbesserung und mehr.
Hier ist eine kleine Demonstration der Bildgrößenänderungsfunktion unseres HTML-Code-Autors:
Beachten Sie, dass die beiden Beispielbilder vor dem Hochladen im Querformat waren und sich danach beide veränderten. Lesen Sie jetzt weiter, um einen ASP.NET-basierten HTML-Code-Writer mit Bildgrößenänderungsfunktionen zu verwenden. Weitere Informationen finden Sie in unserer Dokumentation zur Größenänderung von .NET-Bildern. Jetzt richten wir die Anwendung ein.
Einrichten der Anwendung
Bevor wir zum Entwicklungsteil kommen, werfen wir einen Blick auf die Tools, die wir verwenden werden:
ASP.NET Core: Ein Open-Source-Webanwendungsframework, das mit Visual Studio geliefert wird
ImageMagick: Eine umfangreiche Open-Source-Software-Suite zur Verbesserung von Bildern
Froala: Ein leistungsstarker WYSIWYG-HTML-Editor, der die Bearbeitung von HTML-Code, Bild-Uploads, Markdown und mehr unterstützt
Da wir nun wissen, was wir brauchen, führen wir die folgenden Schritte aus, um unser Projekt zu erstellen:
Öffnen Sie Visual Studio und erstellen Sie ein neues Projekt.
Wählen Sie die Vorlage „ASP.NET Core Web App (Razor Pages)“ aus. In unserem Fall lautet der Projektname FroalaImageResizeDemo.
Wählen Sie „.NET 8.0 (Long Term Support)“ als Framework.
Klicken Sie auf „Erstellen“.
Als nächstes fügen wir den Froala-Editor über CDN hinzu:
Öffnen Sie die Datei „_Layout.cshtml“ unter Seiten > FreigegebenesVerzeichnis.
Fügen Sie die Froala-CDN-Links im Abschnitt hinzu.
<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.
Nach dem Login kopieren
Nach dem Login kopieren
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen und wählen Sie „NuGet-Pakete verwalten.“
Suchen Sie auf der Registerkarte „Durchsuchen“ nach „Magick.NET-Q8-AnyCPU“ und klicken Sie auf die Schaltfläche „Installieren“.
Schließlich erstellen wir einen Ordner, in dem wir die Bilder speichern können. Suchen Sie im Projektmappen-Explorer den Ordner „wwwroot“. Erstellen Sie darin einen neuen Ordner mit dem Namen „images“. Nachdem wir nun unser Projekt-Setup konfiguriert haben, ist es an der Zeit, unseren HTML-Code-Writer für die Größenänderung von Bildern zu erstellen.
Erstellung des HTML-Code-Writers
Erstellen wir zunächst eine neue Seite, auf der wir den Froala-Editor initialisieren und laden können.
Klicken Sie mit der rechten Maustaste auf den Ordner Seiten.
Wählen Sie Hinzufügen > Neuer Artikel > Razor-Seite.
Nennen wir es „Editor.cshtml.“
Fügen Sie den folgenden Code in die neu erstellte Seite ein:
@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>
Nach dem Login kopieren
Diese Seite enthält den Froala-Editor sowie eine Kopfzeile. Der mit der „
editor“-ID ist der Container, in den wir Froala laden. Andererseits ist
imageUploadURL eine Froala-Bild-Upload-Option, die bestimmt, wo die Upload-Anfrage gestellt wird. Lassen wir diese Option vorerst leer, aber wir kommen später darauf zurück.
Wir haben jetzt eine eigene Seite für unseren HTML-Code-Writer. Allerdings ist es immer noch nicht über die Navigation erreichbar, also beheben wir das, indem wir einen Link hinzufügen:
Öffnen Sie „_Layout.cshtml“ erneut.
Fügen Sie den folgenden Codeausschnitt zum im Navigationsleistenabschnitt hinzu:
<li class="nav-item">
<a class="nav-link text-dark" asp-page="/Editor">Froala Editor</a>
</li>
Nach dem Login kopieren
Versuchen Sie anschließend, die Anwendung auszuführen, indem Sie F5 oder die Wiedergabetaste drücken. Sie sollten nun einen Blick auf die Standardanwendung von ASP.NET Core mit einem „Froala Editor“-Link in der Navigationsleiste werfen. Klicken Sie darauf und Sie sehen Froala in Aktion. Sie können jetzt Text bearbeiten, Bilder hochladen und andere Rich-Text-Aktionen ausführen. Jetzt müssen Sie nur noch unseren HTML-Code-Writer mit ImageMagick kombinieren, um die Bildgröße zu ändern.
Integration von ImageMagick zur Größenänderung von Bildern
Um die Größenänderungsfunktion von ImageMagick einzubeziehen, müssen wir zunächst einen neuen Controller erstellen:
Klicken Sie mit der rechten Maustaste auf den Ordner Controller (erstellen Sie einen, wenn er nicht von der IDE generiert wurde).
Wählen Sie Hinzufügen > Neuer Artikel.
Wählen Sie unter der Kategorie ASP.NET Core „API-Controller – leer“ aus.
Nennen Sie es „FroalaApiController.cs“ und klicken Sie auf die Schaltfläche „Hinzufügen“.
Fügen Sie als Nächstes den folgenden Code zum neu erstellten Controller hinzu:
<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.
Nach dem Login kopieren
Nach dem Login kopieren
Stellen Sie zunächst sicher, dass Sie „ImageMagick verwenden“ angeben, um es zu aktivieren. Anschließend prüfen wir, ob eine Datei aus der Anfrage erfolgreich hochgeladen wurde oder nicht. Dann definieren wir den Dateipfad, in dem wir unsere Bilder speichern (in unserem Fall unter wwwroot > images). Anschließend ändern wir die Größe des Bildes, indem wir ein neues MagickImage-Objekt mit unseren gewünschten Abmessungen (600 x 600 Pixel) deklarieren. Abschließend geben wir bei Erfolg einen HTTP 200-Statuscode zusammen mit dem JSON zurück, der die URL des Bildes enthält. Froala zeigt das Bild dann im Editor an und fertig!
Fazit
Das Ändern der Bildgröße ist eine wichtige Aufgabe für jede Anwendung. Beispielsweise müssen wir möglicherweise die Bildauflösung für Anzeigezwecke begrenzen (z. B. E-Mail- oder Blog-Bilder). Möglicherweise müssen wir auch die Bildgröße minimieren, um die Effizienz zu steigern und Kosten zu senken. Allerdings kann die Bildbearbeitung manchmal mühsam sein. Glücklicherweise gibt es Dutzende Tools wie ImageMagick, die uns dabei helfen können, dies ganz einfach zu erreichen, wie ich Ihnen in dieser HTML-Code-Writer-Demo gezeigt habe.
Durch die Kombination von .NET, Froala und ImageMagick können Sie den gesamten Prozess der Implementierung der Bildgrößenänderung in Ihren Anwendungen optimieren. Bei Ihren eigenen Projekten können Sie mit denselben Tools sogar noch einen Schritt weiter gehen. Sie können beispielsweise eine Bildqualitätsverbesserung, Dateityp- und -größenvalidierung, automatische Speicherung und mehr hinzufügen, um Ihre Anwendung robuster zu machen. Jetzt sind Sie an der Reihe, Ihren Projekten etwas (Bild-)Magie(K) zu verleihen!
Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen ASP.NET-HTML-Code-Writer mit Funktionen zur Bildgrößenänderung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
