Einleitung

ImageSharp ist eine leistungsstarke Bildverarbeitungsbibliothek, die es Ihnen ermöglicht, Bilder auf verschiedene Weise zu manipulieren. ImageSharp.Web ist eine Erweiterung von ImageSharp, die zusätzliche Funktionalität für das Arbeiten mit Bildern in ASP.NET Core-Anwendungen bietet. In diesem Tutorial werden wir untersuchen, wie Sie ImageSharp.Web verwenden, um Bilder in dieser Anwendung zu formatieren, zu schneiden und zu formatieren.

ImageSharp.Web Installation

Um mit ImageSharp.Web zu beginnen, müssen Sie die folgenden NuGet-Pakete installieren:

dotnet add package SixLabors.ImageSharp
dotnet add package SixLabors.ImageSharp.Web

ImageSharp.Web-Konfiguration

In unserer Program.cs Datei richten wir dann ImageSharp.Web ein. In unserem Fall beziehen wir uns auf und speichern unsere Bilder in einem Ordner namens "Bilder" im wwwroot unseres Projekts. Anschließend richten wir die ImageSharp.Web Middleware ein, um diesen Ordner als Quelle unserer Bilder zu verwenden.

ImageSharp.Web verwendet auch einen 'Cache'-Ordner, um verarbeitete Dateien zu speichern (dadurch wird verhindert, dass Dateien jedes Mal wieder rückgängig gemacht werden).

services.AddImageSharp().Configure<PhysicalFileSystemCacheOptions>(options => options.CacheFolder = "cache");

Diese Ordner sind relativ zum wwwroot, so dass wir die folgende Struktur haben:

ImageSharp.Web hat mehrere Optionen, wo Sie Ihre Dateien und Caching speichern (siehe hier für alle Details: Veröffentlichungen der Europäischen Gemeinschaften, 2001.)

Zum Beispiel, um Ihre Bilder in einem Azure-Blob-Container zu speichern (handlich zur Skalierung) würden Sie den Azure-Provider mit AzureBlobCacheOptionen verwenden:

dotnet add SixLabors.ImageSharp.Web.Providers.Azure

// Configure and register the containers.  
// Alteratively use `appsettings.json` to represent the class and bind those settings.
.Configure<AzureBlobStorageImageProviderOptions>(options =>
{
    // The "BlobContainers" collection allows registration of multiple containers.
    options.BlobContainers.Add(new AzureBlobContainerClientOptions
    {
        ConnectionString = {AZURE_CONNECTION_STRING},
        ContainerName = {AZURE_CONTAINER_NAME}
    });
})
.AddProvider<AzureBlobStorageImageProvider>()

ImageSharp.Web-Nutzung

Jetzt, da wir diese Einrichtung haben, ist es wirklich einfach, es in unserer Anwendung zu verwenden. Zum Beispiel, wenn wir ein vergrößertes Bild dienen wollen, könnten wir entweder der TagHelper oder die URL direkt angeben.

TagHelper:

<img
    src="sixlabors.imagesharp.web.png"
    imagesharp-width="300"
    imagesharp-height="200"
    imagesharp-rmode="ResizeMode.Pad"
    imagesharp-rcolor="Color.LimeGreen" />

Beachten Sie, dass wir damit das Bild verändern, Breite und Höhe einstellen und auch die Größe ändern und das Bild umfärben.

In dieser App gehen wir den einfacheren Weg und verwenden einfach Querystring-Parameter. Für den Markdown verwenden wir eine Erweiterung, mit der wir die Bildgröße und das Format angeben können.

    public void ChangeImgPath(MarkdownDocument document)
    {
        foreach (var link in document.Descendants<LinkInline>())
            if (link.IsImage)
            {
                if(link.Url.StartsWith("http")) continue;
                
                if (!link.Url.Contains("?"))
                {
                   link.Url += "?format=webp&quality=50";
                }

                link.Url = "/articleimages/" + link.Url;
            }
               
    }

Dies gibt uns die Möglichkeit, entweder diese in den Stellen wie

![image](/image.jpg?format=webp&quality=50)

Wo dieses Bild herkommt wwwroot/articleimages/image.jpg und auf 50% Qualität und im Webp-Format verkleinert werden.

Oder wir können einfach das Bild so verwenden, wie es ist und es wird wie im Querystring angegeben verkleinert und formatiert werden.

Schwanzlutscher

Bemerken Sie die cache forlder Ich habe oben verwendet, muss durch die Anwendung beschreibbar sein. Wenn Sie Docker verwenden, müssen Sie sicherstellen, dass dies der Fall ist. Siehe mein früherer Beitrag für wie ich dies mit einem kartierten Volumen zu verwalten.

Schlußfolgerung

Wie Sie gesehen haben ImageSharp.Web gibt uns eine große Fähigkeit, die Größe und Formatierung von Bildern in unseren ASP.NET Core-Anwendungen. Es ist einfach einzurichten und zu verwenden und bietet viel Flexibilität, wie wir Bilder in unseren Anwendungen manipulieren können.