画像にテキストを追加する

画像にテキストを書き込むための .NET API ソリューション

 

Aspose.Font for .NET は、.NET アプリケーションでフォントを扱う開発者向けの包括的なソリューションです。これにより、フォントの読み込み、編集、変換、さまざまな目的での使用などのタスクが簡素化されます。そのような目的の 1 つはテキストのレンダリングです。このソリューションは、特定のフォントを使用して画像上にテキストをレンダリングするカスタム方法を提供し、カーニングを考慮し、背景色、テキストの色、テキスト サイズなどのさまざまな側面の制御を提供します。

画像にテキストを追加できる便利な機能を備えたアプリは、さまざまな目的に応じて数多くあります。以下にいくつかのカテゴリを示します。

  • 写真編集アプリ - Canva、Adobe Express、PicLab などを使用すると、さまざまな方法で写真を編集できます。テキストの追加は中核的な機能です。
  • ソーシャル メディア アプリ - Instagram や Facebook などには、写真用のテキスト編集ツールが組み込まれています。これにより、共有する前にアプリ内でキャプション、引用、その他のメッセージを直接追加できます。
  • チラシ、ポスター、プレゼンテーションなどのより複雑なデザインを作成している場合は、Photoshop や GIMP などのグラフィック デザイン アプリが高度なテキスト編集機能を提供します。これらにより、テキストの配置、書式設定、効果を正確に制御できます。
  • ミーム文化は、画像にテキストを重ねたユーモアで栄えます。 Imgflip や Meme Generator などの ミーム作成アプリ は、面白い画像やキャプション付きの画像を作成するために設計されたテンプレートと編集ツールを提供します。
  • マーケティング キャンペーン用に目を引くビジュアルを作成するには、多くの場合、画像にテキストを追加する必要があります。 Spark Post や Stencil などの マーケティングおよび広告ツール を使用すると、テキストを効果的に組み込んだソーシャル メディアの投稿、チラシ、広告をデザインできます。
  • 教育アプリ - 画像上のテキストを使用して、インフォグラフィック、学習ガイド、またはその他の視覚的な学習教材を作成します。

画像にコンテキストを追加する、ユーザーの注意を引く、メッセージを作成するなど、画像にテキストを追加する理由はたくさんあります。Aspose.Font を使用すると、この機能を C# コードベースのアプリに簡単に実装できます。

サンプルを実行するには以下が必要です。

  • Aspose.Font for .NET API は、C# プラットフォーム用の機能が豊富で強力で使いやすいドキュメント操作および変換 API です。

  • NuGet パッケージ マネージャーを開き、Aspose.Font を検索してインストールします。パッケージ マネージャー コンソールから次のコマンドを使用することもできます。

Package Manager Console Command


    PM> Install-Package Aspose.Font

画像上にテキストを表示する手順 C#:

提供されたコード スニペットは、さまざまな引数を受け取り、指定されたフォントを使用してビットマップ上にテキストをレンダリングする CustomDrawText という関数を定義します。機能の内訳は次のとおりです。

  1. フォント内の特定の文字形状を表すグリフ ID を取得します。
  2. 出力ビットマップの解像度を設定します。
  3. 提供されたブラシでビットマップの背景を塗りつぶします。
  4. テキストのレンダリングをよりスムーズにするためにアンチエイリアスを設定し、グリフの位置を設定するための変数を初期化します。
  5. レンダラーを使用して、指定されたグリフを使用してテキストをレンダリングします。
  6. 描画されたテキストを含む最終ビットマップを指定されたファイルに保存します。

画像にテキストを書き込む C# コード

    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. テキストを書き込むのにどのような画像を使用できますか?

API は、鮮明で高解像度の画像で最もうまく機能します。ぼやけた写真や複雑な背景の画像は、テキストの配置の精度に影響する可能性があるため、避けてください。

2. テキストのフォントとスタイルをカスタマイズできますか?

はい。Aspose.Font では、テキスト オーバーレイのフォント スタイル、サイズ、さらには色を指定できます。たとえば、テキストを圧縮、引き伸ばし、角度を付けて回転する場合など、テキストのカスタマイズされた出力を提供します。

3. API はテキストの配置をどのように処理しますか?

中央揃えや下揃えなどの定義済みの配置が提供されますが、GlyphOutlineRenderer クラス*の RenderGlyph() メソッドの 1 つを使用してテキストを画像に変換する、より高度な (カスタム) 方法も提供されます。