Vectorización de imágenes – Flujo de trabajo – Aspose.SVG for .NET

Este artículo explica cómo convertir mapas de bits en gráficos vectoriales usando Aspose.SVG for .NET API. Encontrarás una descripción del proceso de vectorización de imágenes; uso de algoritmos y opciones de vectorización, aprenda a vectorizar imágenes rasterizadas como PNG, JPG, BMP, TIFF, GIF, ICO en un documento SVG.

Aspose.SVG ofrece un Vectorizador de imágenes gratuito en línea que se basa en el navegador y funciona en cualquier plataforma. Al utilizar esta aplicación, puede aplicar un conjunto de opciones para obtener el resultado perfecto. ¡Ahorre tiempo y consulte este Vectorizador de imágenes gratuito para obtener todos los beneficios de los gráficos vectoriales!

¿Qué es la vectorización de imágenes?

La tarea de la vectorización es convertir una imagen 2D en una representación vectorial 2D de la imagen. Los gráficos vectoriales bidimensionales son imágenes gráficas por computadora representadas como curvas matemáticas. Estas imágenes vectoriales se definen como puntos cartesianos conectados por líneas y curvas para formar las formas requeridas. Una imagen rasterizada es un conjunto de píxeles. Si es una imagen RGB, se puede representar como una tabla de píxeles de color. Cada píxel es un triplete de valores enteros de 8 bits, donde cada valor representa una cantidad de color rojo, verde y azul.

La vectorización de imágenes es el proceso de convertir imágenes rasterizadas en gráficos vectoriales: las curvas, splines y líneas de Bézier.

La imagen de origen para la conversión de trama a vector puede aceptar formatos de mapa de bits como JPG, TIFF, BMP, GIF y PNG. La imagen de salida es un formato de archivo vectorial, por ejemplo, formato de archivo SVG. Imágenes como mapas, iconos, logotipos, dibujos técnicos e imágenes prediseñadas son adecuadas para la vectorización. Estas imágenes se basan en formas geométricas y están dibujadas con curvas simples.

¿Para qué sirve la Vectorización de Imágenes?

Escala y tamaño. Las imágenes rasterizadas se basan en píxeles, por lo que dependen de la resolución. La calidad de la imagen depende de la cantidad de píxeles que componen la imagen y del valor de resolución que determina cuántos píxeles se muestran por pulgada. Por lo tanto, cuantos más píxeles haya en la imagen y mayor sea la resolución, mayor será la calidad de la imagen. Por ejemplo, escalar un mapa de bits para ampliarlo sin cambiar la resolución perderá calidad y aparecerá borroso o pixelado. Esto se debe a que los píxeles se extienden sobre un área más grande, lo que los hace menos nítidos.

A diferencia de los gráficos de mapa de bits, las imágenes vectoriales son redimensionables y escalables sin perder calidad, y aún así se mostrarán con la misma claridad. En otras palabras, los gráficos vectoriales tienen una ventaja única sobre los gráficos rasterizados en el sentido de que los puntos, líneas y curvas se pueden ampliar o reducir sin pérdida de calidad.

Seguridad y privacidad. A veces es necesario proteger las imágenes de técnicas de reconocimiento de imágenes como el reconocimiento facial. Las imágenes vectorizadas son más resistentes a este tipo de ataques porque los reconocedores de imágenes suelen estar orientados a píxeles.

Recuperación de imágenes. La vectorización se puede utilizar para actualizar o recuperar imágenes.

Proceso de vectorización de imágenes

El proceso de vectorización de imágenes incluye los siguientes pasos:

Cuantización de color y cambio de tamaño. La cuantificación de color o la cuantificación de imágenes en color es la cuantificación aplicada a espacios de color. Es un proceso que reduce la cantidad de colores diferentes utilizados en una imagen, con la intención de que la nueva imagen sea lo más similar visualmente posible a la imagen original. En nuestro proceso de vectorización de imágenes, la cuantificación del color juega un papel importante porque reduce la cantidad de colores utilizados que afectan significativamente el tamaño y la calidad del SVG vectorizado. Cuando la imagen es enorme o contiene muchos puntos pequeños o píxeles del mismo color, cambiamos su tamaño para evitar que el documento SVG sea demasiado grande.

Trazado de contorno. El rastreo de contornos o rastreo de límites es una técnica que se aplica a imágenes digitales para extraer su límite o límites en el caso de imágenes no monocromáticas. Existen varias técnicas como Suzuki-Abe, Moore-neighbor, Square Tracing Algorithm, Theo Pavlidis’ Algorithm, etc… Desafortunadamente, esos algoritmos funcionan con imágenes monocromáticas y no lo hacen de manera óptima con imágenes multicolores. Por eso hemos desarrollado un nuevo algoritmo de seguimiento de contornos que funciona de forma rápida y precisa con imágenes multicolores y reduce significativamente la cantidad de contornos.

Suavizado de trazo (este paso es opcional). A veces, los fragmentos de contornos parecen ondas en dientes de sierra porque la resolución de las imágenes vectorizadas no es lo suficientemente alta o hay ruido en la imagen. Para suavizar, estas curvas se pueden usar muchos enfoques como regresión lineal local, regresión polinómica local, núcleo gaussiano, etc. Descubrimos que se pueden lograr resultados perfectos con la ayuda del enfoque del vecino más cercano, que se implementó en ImageTraceSmoother clase.

Simplificación de seguimiento (opcional). En este paso es necesario diezmar la traza de la curva compuesta de segmentos de línea a una curva similar con menos puntos. Existen diferentes algoritmos como Ramer–Douglas–Peucker, Visvalingam–Whyatt, Reumann–Witkam, etc. que pueden utilizarse para resolver esta tarea. Implementamos el enfoque Ramer–Douglas–Peucker en la clase ImageTraceSimplifier porque mostró un mejor resultado que otros en nuestros experimentos, pero declaramos la interfaz IImageTraceSimplifier para implementar cualquier otro enfoque.

Construyendo elementos de ruta SVG a partir de las trazas. El último paso es convertir los puntos de trazado en líneas de ruta SVG y curvas Bézier y agregarlas al documento SVG. Para ajustar las curvas que pasan por cada punto de trazado, utilizamos una spline de Catmull-Roma, que se convierte en curvas de Bézier.

Opciones de vectorización

Puede convertir una imagen rasterizada en un gráfico vectorial utilizando opciones de configuración predeterminadas o personalizadas. Podrá aplicar configuraciones personalizadas para obtener el mejor resultado de la conversión de imagen a vector y guardar el archivo SVG de salida en su computadora. El procesamiento asume el control de las siguientes propiedades:

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.

Ejemplo de C#

Aspose.HTML API proporciona ImageVectorization Namespace que realiza varias clases que permiten implementar un conjunto de algoritmos para el proceso de vectorización de imágenes. Las clases y métodos proporcionados le permiten trabajar con múltiples opciones de vectorización para preprocesar imágenes antes de guardarlas en formato vectorial.

Nota: Aspose.SVG for .NET API tiene como objetivo implementar tareas de vectorización de imágenes, por lo que la imagen de origen para la conversión de ráster a vector puede aceptar formatos de mapa de bits como JPG, PNG, BMP, TIFF, GIF, etc. La imagen de salida es un formato de archivo vectorial SVG.

Para vectorizar una imagen con Aspose.SVG for .NET, debes seguir algunos pasos:

1. Inicialice una instancia de la clase ImageVectorizer. Utilice uno de los constructores ImageVectorizer() y especifique las propiedades de configuración.
2. Vectorice la imagen rasterizada del archivo especificado. Utilice el método Vectorize() que devuelve un SVGDocument.
3. Guarde el SVGDocument (imagen vectorizada) como un archivo SVG.

Aquí hay un ejemplo de C# de cómo vectorizar una imagen PNG usando Aspose.SVG for .NET.

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"));

Puede ver el archivo fuente y el resultado final siguiendo los enlaces: png-to-svg.png, png-to-svg.svg.

Encontrará la descripción y los ejemplos de C# de las opciones de vectorización que se aplican en el artículo Ejemplos de vectorización de imágenes.

Ejemplo de implementación de IImageTraceSimplifier

El espacio de nombres ImageVectorization incluye las interfaces IImageTraceSimplifier, IImageTraceSmoother e IPathBuilder para realizar cualquiera de sus enfoques y algoritmos. Consideremos la implementación IImageTraceSimplifier basada en el algoritmo Viswalingam:

	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));
        }
    }

Puede descargar los ejemplos completos de C# y los archivos de datos desde GitHub. Encontrará información sobre la descarga desde GitHub y la ejecución de ejemplos en la sección Cómo ejecutar los ejemplos.