WPFで画像にテキストと線を描画

今回はC#のWPFで画像にテキストと線を描画するプログラムにポンコツ2人組が挑戦してみました。 sample1.jpgにテキストと線を描画した後、sample2.jpgというファイル名で保存するプログラムです。 (このプログラムを試してみる場合は画像ファイルをご自身でご用意ください。) 開発環境はVisualStudio2019でライブラリはSystem.Drawing.Common(バージョン 7.0.0)を使用しています。 NuGetでインストールしてください。また、参照でSystem.Drawingを追加してあります。 C#初心者が制作したものなのでいろいろとおかしい部分が多いと思います。プログラムを流用する際は適宜修正してください。

※この記事は2023/09/07時点の情報です。

MainWindow.xaml
テキストと線を合成した後の画像を表示するImageコントロールと 合成処理を開始するボタンを配置しています。

<Window x:Class="WpfApp5.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Image Drawing App" Height="400" Width="600">
    <Grid>
        <Image Name="imageControl" Stretch="None"/>
        <Button Content="Draw and Save Image" HorizontalAlignment="Right" VerticalAlignment="Bottom" Click="DrawAndSave_Click"/>
    </Grid>
</Window>

MainWindow.xaml.cs
ボタンをクリックした時の処理を実装しています。 既存の画像(sample1.jpg)を読み込み、テキストと線を描画してファイルに保存します。 保存した画像は画面に表示しています。

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Windows;
using System.Windows.Interop;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace WpfApp5
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void DrawAndSave_Click(object sender, RoutedEventArgs e)
        {
            // 既存の画像を読み込み
            string inputImagePath = "E:\\VisualStudioProject\\Images\\sample.jpg";
            Bitmap inputBitmap = new Bitmap(inputImagePath);

            // 新しい画像を作成
            Bitmap outputBitmap = new Bitmap(inputBitmap.Width, inputBitmap.Height);
            using (Graphics graphics = Graphics.FromImage(outputBitmap))
            {
                graphics.DrawImage(inputBitmap, 0, 0);

                // テキストを描画
                using (Font font = new Font("Arial", 16))
                using (SolidBrush brush = new SolidBrush(System.Drawing.Color.White))
                {
                    graphics.DrawString("Sample Text", font, brush, new PointF(10, 10));
                }

                // 線を描画(正方形)
                using (System.Drawing.Pen pen = new System.Drawing.Pen(System.Drawing.Color.White, 2))
                {
                    int squareSize = 100; // 正方形の一辺の長さ
                    int x = 20;
                    int y = 20;
                    graphics.DrawRectangle(pen, x, y, squareSize, squareSize);
                }
            }

            // 新しい画像をファイルに保存
            string outputImagePath = "E:\\VisualStudioProject\\Images\\sample2.jpg";
            outputBitmap.Save(outputImagePath, ImageFormat.Jpeg);
            MessageBox.Show("画像が保存されました: " + outputImagePath);

            // 画像を表示
            BitmapImage bitmapImage = new BitmapImage(new Uri(outputImagePath));
            imageControl.Source = bitmapImage;
        }
    }
}

以下がアプリケーションを実行した画面です。

C#のWPFで画像にテキストと線を描画

管理人情報