Agregar el texto a una imagen

Solución API .NET para escribir texto en imágenes

 

Aspose.Font para .NET es una solución integral para desarrolladores que trabajan con fuentes en sus aplicaciones .NET. Simplifica tareas como cargar, editar, convertir y usar fuentes para diferentes propósitos. Uno de esos propósitos es la representación de texto. La solución proporciona una forma personalizada de representar texto en una imagen usando una fuente particular, considerando el interletraje y ofreciendo control sobre varios aspectos como el color de fondo, el color del texto y el tamaño del texto.

Hay muchas aplicaciones en las que agregar texto a imágenes es una funcionalidad útil que sirve para diversos propósitos. Aquí hay algunas categorías:

  • Aplicaciones de edición de fotografías: como Canva, Adobe Express y PicLab, te permiten editar fotografías de varias maneras y agregar texto es una característica principal.
  • Aplicaciones de redes sociales: como Instagram y Facebook, tienen herramientas de edición de texto integradas para fotografías. Esto le permite agregar subtítulos, citas u otros mensajes directamente dentro de la aplicación antes de compartirlos.
  • Si estás creando diseños más complejos como folletos, carteles o presentaciones, aplicaciones de diseño gráfico como Photoshop o GIMP ofrecen funciones avanzadas de edición de texto. Estos permiten un control preciso sobre la ubicación, el formato y los efectos del texto.
  • La cultura de los memes se nutre del humor de texto sobre imagen. aplicaciones de creación de memes como Imgflip o Meme Generator proporcionan plantillas y herramientas de edición diseñadas para crear imágenes divertidas o con subtítulos.
  • Crear imágenes llamativas para campañas de marketing a menudo implica agregar texto a las imágenes. Las herramientas de marketing y publicidad como Spark Post o Stencil te permiten diseñar publicaciones, folletos o anuncios en redes sociales que incorporan texto de forma eficaz.
  • Aplicaciones educativas: utilice texto en imágenes para crear infografías, guías de estudio u otros materiales de aprendizaje visual.

Hay muchas razones para agregar texto a las imágenes, como agregar contexto a una imagen, captar la atención del usuario, crear un mensaje, etc. Con Aspose.Font, esta funcionalidad se puede implementar fácilmente en sus aplicaciones basadas en código C#.

Para ejecutar los ejemplos necesita:

  • Aspose.Font para .NET API, que es una API de conversión y manipulación de documentos rica en funciones, potente y fácil de usar para la plataforma C#.

  • Abra el administrador de paquetes NuGet, busque Aspose.Font e instálelo. También puede utilizar el siguiente comando desde la Consola del Administrador de paquetes.

Package Manager Console Command


    PM> Install-Package Aspose.Font

Pasos para mostrar texto en imágenes C#:

El fragmento de código proporcionado define una función llamada CustomDrawText que toma varios argumentos para representar texto en un mapa de bits usando una fuente específica. Aquí hay un desglose de la funcionalidad:

  1. Recupere los ID de los glifos para representar una forma de carácter específica dentro de la fuente.
  2. Establezca la resolución del mapa de bits de salida.
  3. Rellene el fondo del mapa de bits con el pincel proporcionado.
  4. Configure el suavizado para una representación del texto más fluida e inicialice las variables para el posicionamiento de los glifos.
  5. Renderice textos usando los glifos especificados usando el renderizador.
  6. Guarde el mapa de bits final con el texto dibujado en el archivo especificado.

Código C# para escribir texto en imágenes

    public static void CustomDrawText(string text, IFont font, double fontSize, Brush backgroundBrush, Brush textBrush, string outFile, Bitmap bitmap, double kerningCoefficient = 1, double coordinateX = 0, double coordinateY = 0)
    {
        //Get glyph identifiers for every symbol in the text line
        GlyphId[] gids = new GlyphId[text.Length];

        for (int i = 0; i < text.Length; i++)
            gids[i] = font.Encoding.DecodeToGid(text[i]);

        // Set common drawing settings
        double dpi = 300;
        double resolutionCorrection = dpi / 72; // 72 is font's internal dpi

        // Prepare the output bitmap                
        Bitmap outBitmap = bitmap;

        outBitmap.SetResolution((float)dpi, (float)dpi);

        Graphics outGraphics = Graphics.FromImage(outBitmap);
        outGraphics.FillRectangle(backgroundBrush, 0, 0, outBitmap.Width, outBitmap.Height);
        outGraphics.SmoothingMode = SmoothingMode.HighQuality;

        //Declare coordinate variables and the previous gid
        GlyphId previousGid = null;
        double glyphXCoordinate = coordinateX;
        double glyphYCoordinate = coordinateY;

        glyphYCoordinate += fontSize * resolutionCorrection;

        //The loop paints every glyph in gids
        foreach (GlyphId gid in gids)
        {
            // if the font contains the gid
            if (gid != null)
            {
                Glyph glyph = font.GlyphAccessor.GetGlyphById(gid);
                if (glyph == null)
                    continue;

                // The path that accepts drawing instructions
                GraphicsPath path = new GraphicsPath();

                // Create the IGlyphOutlinePainter implementation
                GlyphOutlinePainter outlinePainter = new GlyphOutlinePainter(path);

                // Create the renderer
                Aspose.Font.Renderers.IGlyphRenderer renderer = new Aspose.Font.Renderers.GlyphOutlineRenderer(outlinePainter);

                // Get common glyph properties
                double kerning = 0;

                // Get the kerning value

                if (previousGid != null)
                {
                    kerning = (font.Metrics.GetKerningValue(previousGid, gid) / glyph.SourceResolution) * fontSize * resolutionCorrection;
                    kerning += FontWidthToImageWith(font.Metrics.GetGlyphWidth(previousGid), glyph.SourceResolution, fontSize);
                }

                // Glyph positioning - increase the glyph X coordinate according to the kerning distance
                glyphXCoordinate += kerning * kerningCoefficient;

                // Glyph placement matrix
                TransformationMatrix glyphMatrix = new TransformationMatrix(
                        new double[]
                                { fontSize * resolutionCorrection,
                            0,
                            0,
                        // negative because of the bitmap coordinate system begins from the top
                            - fontSize*resolutionCorrection,
                            glyphXCoordinate,
                            glyphYCoordinate
                                });

                // Render the current glyph
                renderer.RenderGlyph(font, gid, glyphMatrix);

                // Fill the path
                path.FillMode = FillMode.Winding;

                outGraphics.FillPath(textBrush, path);
            }

            //Set the current gid as previous to get the correct kerning for the next glyph
            previousGid = gid;
        }

        //Save the results
        outBitmap.Save(outFile);
    }



FAQ

1. ¿Qué tipo de imágenes puedo usar para escribir texto en él?

Las API funcionan mejor con imágenes claras y de alta resolución. Evite fotografías borrosas o imágenes con fondos complejos, ya que pueden afectar la precisión de la ubicación del texto.

2. ¿Puedo personalizar la fuente y el estilo del texto?

Sí, Aspose.Font le permite especificar estilos de fuente, tamaños e incluso colores para su superposición de texto. Ofrece una salida personalizada del texto, por ejemplo, cuando desea comprimir, estirar, rotar el texto a un ángulo, o algo más.

3. ¿Cómo maneja la API la ubicación del texto?

Ofrece ubicaciones predefinidas como alineación central o inferior, pero también ofrece una forma más avanzada (personalizada) de convertir texto en una imagen usando uno de los métodos RenderGlyph() de la clase GlyphOutlineRenderer.