Bildvektorisierung – Arbeitsablauf – .NET

In diesem Artikel wird erläutert, wie Sie Bitmaps mithilfe der Aspose.SVG-API in Vektorgrafiken konvertieren. Sie finden eine Beschreibung des Bildvektorisierungsprozesses; Verwendung von Vektorisierungsalgorithmen und -optionen. Erfahren Sie, wie Sie Rasterbilder wie PNG, JPG, BMP, TIFF, GIF, ICO in ein SVG-Dokument vektorisieren.

Aspose.SVG bietet einen kostenlosen Online- Bild-Vektorisierer, der browserbasiert ist und auf jeder Plattform funktioniert. Mit dieser App können Sie eine Reihe von Optionen anwenden, um das perfekte Ergebnis zu erzielen. Sparen Sie Zeit und testen Sie diesen kostenlosen Image Vectorizer, um alle Vorteile von Vektorgrafiken zu nutzen!

Was ist Bildvektorisierung (Image Stencil)?

Die Aufgabe bei der Vektorisierung besteht darin, ein 2D-Bild in eine 2D-Vektordarstellung des Bildes umzuwandeln. Bei den zweidimensionalen Vektorgrafiken handelt es sich um Computergrafikbilder, die als mathematische Kurven dargestellt werden. Solche Vektorbilder werden als kartesische Punkte definiert, die durch Linien und Kurven verbunden sind, um die erforderlichen Formen zu bilden. Ein Rasterbild ist eine Reihe von Pixeln. Wenn es sich um ein RGB-Bild handelt, kann es als Tabelle mit Farbpixeln dargestellt werden. Jedes Pixel ist ein Triplett aus 8-Bit-Ganzzahlwerten, wobei jeder Wert eine Menge an roter, grüner und blauer Farbe darstellt.

Bei der Bildvektorisierung handelt es sich um den Prozess der Umwandlung von Rasterbildern in Vektorgrafiken – Bezier-Kurven, Splines und Linien.

Das Quellbild für die Raster-zu-Vektor-Konvertierung akzeptiert möglicherweise Bitmap-Formate wie JPG, TIFF, BMP, GIF und PNG. Das Ausgabebild ist ein Vektordateiformat, beispielsweise das SVG-Dateiformat. Für die Vektorisierung eignen sich Bilder wie Karten, Icons, Logos, technische Zeichnungen und Cliparts. Diese Bilder basieren auf geometrischen Formen und werden mit einfachen Kurven gezeichnet.

Wozu dient die Bildvektorisierung?

Skalierung und Größe. Rasterbilder sind pixelbasiert und daher auflösungsabhängig. Die Bildqualität hängt von der Anzahl der Pixel ab, aus denen das Bild besteht, und vom Wert der Auflösung, der bestimmt, wie viele Pixel pro Zoll angezeigt werden. Je mehr Pixel das Bild enthält und je höher die Auflösung, desto höher ist die Bildqualität. Wenn Sie beispielsweise eine Bitmap skalieren, um sie zu vergrößern, ohne die Auflösung zu ändern, führt dies zu Qualitätsverlusten und erscheint verschwommen oder pixelig. Dies liegt daran, dass Pixel über einen größeren Bereich gestreckt werden und dadurch weniger scharf sind. Im Gegensatz zu Bitmap-Grafiken können Vektorbilder ohne Qualitätsverlust in der Größe geändert und skaliert werden und werden dennoch genauso klar angezeigt. Mit anderen Worten: Vektorgrafiken haben gegenüber Rastergrafiken den einzigartigen Vorteil, dass Punkte, Linien und Kurven ohne Qualitätsverlust vergrößert oder verkleinert werden können.

Sicherheit und Privatsphäre. Manchmal ist es notwendig, Bilder vor Bilderkennungstechniken wie der Gesichtserkennung zu schützen. Vektorisierte Bilder sind widerstandsfähiger gegen solche Angriffe, da Bilderkennungsprogramme in der Regel pixelorientiert sind.

Wiederherstellung von Bildern. Mithilfe der Vektorisierung können Bilder aktualisiert oder wiederhergestellt werden.

Bildvektorisierungsprozess

Der Bildvektorisierungsprozess umfasst die nächsten Schritte:

Farbquantisierung und Größenänderung. Bei der Farbquantisierung oder Farbbildquantisierung handelt es sich um eine auf Farbräume angewendete Quantisierung. Dabei handelt es sich um einen Prozess, der die Anzahl der in einem Bild verwendeten unterschiedlichen Farben reduziert, mit der Absicht, dass das neue Bild dem Originalbild optisch so ähnlich wie möglich ist. In unserem Bildvektorisierungsprozess spielt die Farbquantisierung eine wichtige Rolle, da sie die Anzahl der verwendeten Farben reduziert, die sich erheblich auf die Größe und Qualität der vektorisierten SVG-Datei auswirken. Wenn das Bild riesig ist oder viele kleine gleichfarbige Punkte oder Pixel enthält, ändern wir die Größe, um zu verhindern, dass das SVG-Dokument zu groß wird.

Konturverfolgung. Konturverfolgung oder Grenzverfolgung ist eine Technik, die auf digitale Bilder angewendet wird, um deren Grenze(n) für nicht-monochrome Bilder zu extrahieren. Es gibt mehrere solcher Techniken wie Suzuki-Abe, Moore-Neighbor, Square Tracing-Algorithmus, Theo Pavlidis-Algorithmus usw. Leider funktionieren diese Algorithmen mit monochromen Bildern und funktionieren nicht optimal mit mehrfarbigen Bildern. Deshalb haben wir einen neuen Konturverfolgungsalgorithmus entwickelt, der mit mehrfarbigen Bildern schnell und präzise arbeitet und die Anzahl der Konturen deutlich reduziert.

Spurglättung (dieser Schritt ist optional). Manchmal sehen Konturfragmente wie Sägezahnwellen aus, weil die Auflösung der vektorisierten Bilder nicht hoch genug ist oder das Bild verrauscht ist. Zur Glättung dieser Kurven können viele Ansätze wie lokale lineare Regression, lokale Polynomregression, Gaußscher Kernel usw. verwendet werden. Wir haben festgestellt, dass mit Hilfe des Nearest Neighbor-Ansatzes, der im ImageTraceSmoother Klasse.

Trace-Vereinfachung (optional). In diesem Schritt muss die aus Liniensegmenten bestehende Spurkurve auf eine ähnliche Kurve mit weniger Punkten reduziert werden. Es gibt verschiedene Algorithmen wie Ramer-Douglas-Peucker, Visvalingam-Whyatt, Reumann-Witkam usw., die zur Lösung dieser Aufgabe verwendet werden können. Wir haben den Ramer-Douglas-Peucker-Ansatz in der Klasse ImageTraceSimplifier implementiert, weil er in unseren Experimenten ein besseres Ergebnis als andere zeigte, aber wir haben die Schnittstelle IImageTraceSimplifier für die Implementierung anderer Ansätze deklariert.

SVG-Pfadelemente aus den Spuren erstellen. Der letzte Schritt besteht darin, die Verfolgungspunkte in SVG-Pfadlinien und Bezier-Kurven umzuwandeln und sie dem SVG-Dokument hinzuzufügen. Um die durch jeden Verfolgungspunkt verlaufenden Kurven anzupassen, verwenden wir einen Catmull-Roma-Spline, der in Bezier-Kurven umgewandelt wird.

Vektorisierungsoptionen

Sie können ein Rasterbild mithilfe von Standard- oder benutzerdefinierten Konfigurationsoptionen in eine Vektorgrafik konvertieren. Sie können benutzerdefinierte Einstellungen anwenden, um das beste Ergebnis der Bild-zu-Vektor-Konvertierung zu erzielen, und die ausgegebene SVG-Datei auf Ihrem Computer speichern. Die Verarbeitung übernimmt die Kontrolle über folgende Eigenschaften:

Property	Description
ColorsLimit	This property gets or sets the maximum number of colors used to quantize an image. The default value is 25.
ImageSizeLimit	Gets or sets maximal dimension of an image determined by multiplication image width and height. The size of the image will be scaled based on this property. The default value is 1800000.
PathBuilder	This property sets the SVG path segments builder and affects how sharply the curve bends at the control points.
TraceSimplifier	The property sets the trace simplified. As a result, the trace curve will be built composed of line segments with fewer (or bigger) points.
TraceSmoother	This property sets the trace smoother. It is used to smooth out fragments of contours.

C#-Beispiel

Die Aspose.HTML-API stellt den Namespace ImageVectorization bereit, der verschiedene Klassen realisiert, die die Implementierung einer Reihe von Algorithmen für den Bildvektorisierungsprozess ermöglichen. Mit den bereitgestellten Klassen und Methoden können Sie mit mehreren Vektorisierungsoptionen arbeiten, um Bilder vorzuverarbeiten, bevor Sie sie im Vektorformat speichern.

Hinweis: Die Aspose.SVG-API zielt darauf ab, Bildvektorisierungsaufgaben zu implementieren, sodass das Quellbild für die Raster-zu-Vektor-Konvertierung möglicherweise Bitmap-Formate wie JPG, PNG, BMP, TIFF, GIF usw. Das Ausgabebild ist ein Vektordateiformat SVG.

Um ein Bild mit Aspose.SVG zu vektorisieren, sollten Sie einige Schritte befolgen:

1. Initialisieren Sie eine Instanz der Klasse ImageVectorizer. Verwenden Sie einen der ImageVectorizer()-Konstruktoren und geben Sie Konfigurationseigenschaften an.
2. Vektorisieren Sie das Rasterbild aus der angegebenen Datei. Verwenden Sie die Methode Vectorize(), die ein SVGDocument zurückgibt.
3. Speichern Sie das SVG-Dokument (vektorisiertes Bild) als SVG-Datei.

Hier ist ein C#-Beispiel für die Vektorisierung von PNG-Bildern mithilfe der Aspose.SVG-API.

using System.IO;
using Aspose.Svg.ImageVectorization;
using Aspose.Svg.Saving;
...

	var vectorizer = new ImageVectorizer
        {
            Configuration =
            {
                PathBuilder = new SplinePathBuilder
                {
                    TraceSmoother =   new ImageTraceSmoother(2),
                    TraceSimplifier = new ImageTraceSimplifier(0.1f),
                },
                ColorsLimit = 2
            }
        };

        using var document = vectorizer.Vectorize(Path.Combine(DataDir, "png-to-svg.png"));
        
        document.Save(Path.Combine(OutputDir, "png-to-svg.svg"));

Sie können die Quelldatei und das Endergebnis anzeigen, indem Sie den Links folgen – png-to-svg.png, png-to-svg.svg.

Die Beschreibung und C#-Beispiele der anwendbaren Vektorisierungsoptionen finden Sie im Artikel Beispiele zur Bildvektorisierung.

Beispiel für die IImageTraceSimplifier-Implementierung

Der Namespace ImageVectorization umfasst die Schnittstellen IImageTraceSimplifier, IImageTraceSmoother und IPathBuilder zur Realisierung beliebiger Ihrer Ansätze und Algorithmen. Betrachten wir die Implementierung von IImageTraceSimplifier basierend auf dem Viswalingam-Algorithmus:

	struct Point3
    {
        public float X { get; set; }
        public float Y { get; set; }
        public float? Z { get; set; }
        public Point3(float x, float y, float? z)
        {
            X = x;
            Y = y;
            Z = z;
        }
    }

    internal class Visvalingam: IImageTraceSimplifier
    {
        Point3[] line;
        List<int> indizes;
        bool enriched;
        float tolerance;

        public Visvalingam(float tolerance)
        {
            this.tolerance = tolerance;
        }

        // Calculate the area of one triangle
        private float GetTriangleArea(Point3 a, Point3 b, Point3 c)
		{
            return Math.Abs((a.X * (b.Y - c.Y) + b.X * (c.Y - a.Y) + c.X * (a.Y - b.Y)) / 2f);
        }

        // Add the area of the triangle to each point
        private float EnrichPoints()
		{
            var minArea = float.PositiveInfinity;

            for (var i = 1; i < indizes.Count() - 1; i++)
            {
                var @this = indizes[i];
                var prev = indizes[i - 1];
                var next = indizes[i + 1];
				
                var area = GetTriangleArea(line[prev], line[@this], line[next]);

                // Reset minim value for area, if current is smaller than all previous
                if (area < minArea)

                    minArea = area;

                // Save the area of the triangle as 3rd coordinate
                // Replace if it does exist already
                line[@this].Z = area;
            }
            return minArea;
        }

        // Check for the smallest triangles and remove corresponding points from the index
        private void RemoveSmallestAreaIndex(float minArea)
        {
            var newIndizes = new List<int>();
            newIndizes.Add(indizes[0]);
			
            for (var i = 1; i < indizes.Count - 1; i++)
            {
                var index = indizes[i];

                if (line[index].Z > minArea)

                    newIndizes.Add(index);
            }

            newIndizes.Add(indizes[indizes.Count - 1]);
            indizes = newIndizes;

            // Return newIndizes
        }

        // Do Visvalingam-Calculations until only start-& endpoint are left
        private void EnrichLineString()
        {
            while (indizes.Count > 2)

                RemoveSmallestAreaIndex(EnrichPoints());

            enriched = true;
        }

        // Simplify a linestring corresponding to a given tolerance (depends on projection of data)

        public IEnumerable<PointF> Simplify(IEnumerable<PointF> trace)
        {
            line = trace.Select(pt => new Point3(pt.X, pt.Y, null)).ToArray();
            indizes = line.Select((v, i) => i).ToList();
            enriched = false;

            // It is enough to enrich the line once
            if (enriched == false)
			
                EnrichLineString();

            // Build the new line
            return line.Where(p => p.Z != null && (p.Z > tolerance) || p.Z == null)

                .Select(p => new PointF(p.X, p.Y));
        }
    }

Sie können die vollständigen C#-Beispiele und Datendateien von GitHub herunterladen. Informationen zum Herunterladen von GitHub und zum Ausführen von Beispielen finden Sie im Abschnitt So führen Sie die Beispiele aus.