C#で簡易画像編集ソフトをつくる(その1)

2020年5月2日

簡易画像編集ソフト

Contents

1 簡易画像編集ソフトをつくる

簡易画像編集ソフトをつくる

これまで

画像の拡大と縮小
色の置換と反転
上下左右の反転
文字を入れる

といった処理をするアプリを作成してきました。

今回はこれらを総合的にできるアプリの作成を目指します。Windowsに付属しているペイントで充分ではないのかと思われるかもしれませんが、自分自身のスキル向上のために作成します。

画像を表示させるユーザーコントロールを作成する

画像を編集する以上、画像ファイルを開く処理が必要です。

デザイナでユーザーコントロールを作成します。ピクチャーボックスにスクロールバーがくっついています。

public partial class UserControlImage : UserControl
{
    public UserControlImage()
    {
        InitializeComponent();

        // スクロールバーがスクロールされたときのイベントハンドラ
        this.vScrollBar1.Scroll += VScrollBar1_Scroll;
        this.hScrollBar1.Scroll += HScrollBar1_Scroll;

        // コントロールがリサイズされたときのイベントハンドラ
        this.Resize += UserControlImage_Resize;

        this.pictureBox1.Paint += PictureBox1_Paint;
    }
}

public partial class UserControlImage : UserControl

{

public UserControlImage()

{

InitializeComponent();

// スクロールバーがスクロールされたときのイベントハンドラ

this.vScrollBar1.Scroll += VScrollBar1_Scroll;

this.hScrollBar1.Scroll += HScrollBar1_Scroll;

// コントロールがリサイズされたときのイベントハンドラ

this.Resize += UserControlImage_Resize;

this.pictureBox1.Paint += PictureBox1_Paint;

}

コントロールがリサイズされたとき、ピクチャーボックスになにかが描画されたときはスクロールバーの状態も変更しなければならない場合があります。OptimizationScrloolBarはそのためのメソッドです。

ShowBitmapメソッドはスクロールバーの状態から元画像のトリミングすべき領域をトリミングしてこれを表示させるメソッドです。

public partial class UserControlImage : UserControl
{
    void OptimizationScrloolBar()
    {
        // 横スクロールバーの初期位置、最小値、最大値を設定
        hScrollBar1.Minimum = 0;
        if(Bitmap.Width - pictureBox1.Width >= 0)
        {
            int largeChange = pictureBox1.Width * pictureBox1.Width / Bitmap.Width;
            hScrollBar1.LargeChange = largeChange;
            hScrollBar1.Maximum = Bitmap.Width - pictureBox1.Width + largeChange;
        }
        else
            hScrollBar1.Maximum = 0;

        // 縦スクロールバーと横スクロールバーの初期位置、最小値、最大値を設定する
        vScrollBar1.Minimum = 0;
        if(Bitmap.Height - pictureBox1.Height >= 0)
        {
            int largeChange = pictureBox1.Height * pictureBox1.Height / Bitmap.Height;
            vScrollBar1.LargeChange = largeChange;
            vScrollBar1.Maximum = Bitmap.Height - pictureBox1.Height + largeChange;
        }
        else
            vScrollBar1.Maximum = 0;
    }

    private void UserControlImage_Resize(object sender, EventArgs e)
    {
        if(Bitmap == null)
            return;

        // 最小化した場合、pictureBox1のサイズもゼロになる。
        // そのときShowBitmapメソッドを実行すると例外が発生するので注意が必要
        if(pictureBox1.Width != 0)
            ShowBitmap(Bitmap);
    }

    public void ShowBitmap(Bitmap bitmap)
    {
        OptimizationScrloolBar();
 
       // スクロールバー位置より元画像をトリミングして表示する
        Bitmap bitmap1 = GetBitmapDrawPictureBox(bitmap);
        pictureBox1.SizeMode = PictureBoxSizeMode.Normal;
        pictureBox1.Image = bitmap1;
    }

    // 編集中のビットマップ
    public Bitmap Bitmap
    {
        get;
        set;
    }
}

public partial class UserControlImage : UserControl

{

void OptimizationScrloolBar()

{

// 横スクロールバーの初期位置、最小値、最大値を設定

hScrollBar1.Minimum = 0;

if(Bitmap.Width - pictureBox1.Width >= 0)

{

int largeChange = pictureBox1.Width * pictureBox1.Width / Bitmap.Width;

hScrollBar1.LargeChange = largeChange;

hScrollBar1.Maximum = Bitmap.Width - pictureBox1.Width + largeChange;

}

else

hScrollBar1.Maximum = 0;

// 縦スクロールバーと横スクロールバーの初期位置、最小値、最大値を設定する

vScrollBar1.Minimum = 0;

if(Bitmap.Height - pictureBox1.Height >= 0)

{

int largeChange = pictureBox1.Height * pictureBox1.Height / Bitmap.Height;

vScrollBar1.LargeChange = largeChange;

vScrollBar1.Maximum = Bitmap.Height - pictureBox1.Height + largeChange;

}

else

vScrollBar1.Maximum = 0;

}

private void UserControlImage_Resize(object sender, EventArgs e)

{

if(Bitmap == null)

return;

// 最小化した場合、pictureBox1のサイズもゼロになる。

// そのときShowBitmapメソッドを実行すると例外が発生するので注意が必要

if(pictureBox1.Width != 0)

ShowBitmap(Bitmap);

}

public void ShowBitmap(Bitmap bitmap)

{

OptimizationScrloolBar();

// スクロールバー位置より元画像をトリミングして表示する

Bitmap bitmap1 = GetBitmapDrawPictureBox(bitmap);

pictureBox1.SizeMode = PictureBoxSizeMode.Normal;

pictureBox1.Image = bitmap1;

}

// 編集中のビットマップ

public Bitmap Bitmap

{

get;

set;

}

縦横のスクロールバーでスクロールがおこなわれた場合、ピクチャーボックスに描画される画像を変更する必要があります。そのためShowBitmapメソッドで描画しなおしています。

GetBitmapDrawPictureBoxメソッドはスクロールバー位置より元画像をトリミングして取得するためのものです。以下のようになっています。

public partial class UserControlImage : UserControl
{
    Bitmap GetBitmapDrawPictureBox(Bitmap bitmap)
    {
        Bitmap newBitmap = new Bitmap(pictureBox1.Width, pictureBox1.Height);
        RectangleF rectSrc = new RectangleF(
            this.hScrollBar1.Value,
            this.vScrollBar1.Value,
            this.pictureBox1.Width,
            this.pictureBox1.Height);

        Graphics g = Graphics.FromImage(newBitmap);
        g.DrawImage(bitmap, 0, 0, rectSrc, GraphicsUnit.Pixel);
        g.Dispose();

        return newBitmap;
    }

    private void VScrollBar1_Scroll(object sender, ScrollEventArgs e)
    {
        ShowBitmap(bitmap);
    }

    private void HScrollBar1_Scroll(object sender, ScrollEventArgs e)
    {
        ShowBitmap(bitmap);
    }
}

public partial class UserControlImage : UserControl

{

Bitmap GetBitmapDrawPictureBox(Bitmap bitmap)

{

Bitmap newBitmap = new Bitmap(pictureBox1.Width, pictureBox1.Height);

RectangleF rectSrc = new RectangleF(

this.hScrollBar1.Value,

this.vScrollBar1.Value,

this.pictureBox1.Width,

this.pictureBox1.Height);

Graphics g = Graphics.FromImage(newBitmap);

g.DrawImage(bitmap, 0, 0, rectSrc, GraphicsUnit.Pixel);

g.Dispose();

return newBitmap;

}

private void VScrollBar1_Scroll(object sender, ScrollEventArgs e)

{

ShowBitmap(bitmap);

}

private void HScrollBar1_Scroll(object sender, ScrollEventArgs e)

{

ShowBitmap(bitmap);

}

次にメインフォームですが・・・

こんな感じにしました。

画像ファイルを開く処理

[ファイルを開く]がクリックされたらこれで画像ファイルを開くことができます。

public partial class Form1 : Form
{
    // 現在編集中の画像ファイルのパス
    // 上書き保存するときに必要になる
    string filePath = "";

    public Form1()
    {
        InitializeComponent();
        ShowInitBitmap();
    }

    // 最初は白色で200×200のビットマップを表示する
    void ShowInitBitmap()
    {
        Bitmap bmp = new Bitmap(200, 200);
        Graphics g = Graphics.FromImage(bmp);
        g.Clear(Color.White);
        g.Dispose();
        userControlImage1.Bitmap = bmp;
        userControlImage1.ShowBitmap(bmp);
    }

    private void OpenFileMenuItem_Click(object sender, EventArgs e)
    {
        OpenFile();
    }

    void OpenFile()
    {
        OpenFileDialog dlg = new OpenFileDialog();
        dlg.CheckFileExists = true;
        dlg.CheckPathExists = true;
        dlg.Filter = "画像ファイル(*.bmp; *.jpg; *.png)|*.bmp; *.jpg; *.png|すべてのファイル(*.*)|*.*";
        if(dlg.ShowDialog() == DialogResult.OK)
        {
            if(userControlImage1.LoadImageFile(dlg.FileName))
            {
                // 読み込みに成功したら上書き保存できるようにパスを保存しておく
                filePath = dlg.FileName;
                CheckMenu1(SelectionMenuItem);
            }
        }
        dlg.Dispose();
    }
}

public partial class Form1 : Form

{

// 現在編集中の画像ファイルのパス

// 上書き保存するときに必要になる

string filePath = "";

public Form1()

{

InitializeComponent();

ShowInitBitmap();

}

// 最初は白色で200×200のビットマップを表示する

void ShowInitBitmap()

{

Bitmap bmp = new Bitmap(200, 200);

Graphics g = Graphics.FromImage(bmp);

g.Clear(Color.White);

g.Dispose();

userControlImage1.Bitmap = bmp;

userControlImage1.ShowBitmap(bmp);

}

private void OpenFileMenuItem_Click(object sender, EventArgs e)

{

OpenFile();

}

void OpenFile()

{

OpenFileDialog dlg = new OpenFileDialog();

dlg.CheckFileExists = true;

dlg.CheckPathExists = true;

dlg.Filter = "画像ファイル(*.bmp; *.jpg; *.png)|*.bmp; *.jpg; *.png|すべてのファイル(*.*)|*.*";

if(dlg.ShowDialog() == DialogResult.OK)

{

if(userControlImage1.LoadImageFile(dlg.FileName))

{

// 読み込みに成功したら上書き保存できるようにパスを保存しておく

filePath = dlg.FileName;

CheckMenu1(SelectionMenuItem);

}

dlg.Dispose();

}

UserControlImageクラスのLoadImageFileメソッドはこのようになっています。

public partial class UserControlImage : UserControl
{
    public bool LoadImageFile(string filePath)
    {
        Image image;
        try
        {
            image = Image.FromFile(filePath);
        }
        catch
        {
            return false;
        }

        // 以前編集していたBitmapが存在するならDisposeする
        if(Bitmap != null)
        {
            Bitmap.Dispose();
            _bitmap = null;
        }

        // ファイルがロックされないようにする
        Bitmap = new Bitmap(image);
        image.Dispose();

        Init();

        ShowBitmap(Bitmap);

        return true;
    }

    public void Init()
    {
        // スクロールに関する値をリセット
        ClearScrollInfo();
    }
}

public partial class UserControlImage : UserControl

{

public bool LoadImageFile(string filePath)

{

Image image;

try

{

image = Image.FromFile(filePath);

}

catch

{

return false;

}

// 以前編集していたBitmapが存在するならDisposeする

if(Bitmap != null)

{

Bitmap.Dispose();

_bitmap = null;

}

// ファイルがロックされないようにする

Bitmap = new Bitmap(image);

image.Dispose();

Init();

ShowBitmap(Bitmap);

return true;

}

public void Init()

{

// スクロールに関する値をリセット

ClearScrollInfo();

}

ClearScrollInfoメソッドはスクロールをリセットするためのメソッドです。

public partial class UserControlImage : UserControl
{
    public void ClearScrollInfo()
    {
        ScrollBarPosX = 0;
        ScrollBarPosY = 0;
    }

    // スクロールバーのスクロールを変更するプロパティ
    public int ScrollBarPosX
    {
        get { return hScrollBar1.Value; }
        set { hScrollBar1.Value = value; }
    }

    public int ScrollBarPosY
    {
        get { return vScrollBar1.Value; }
        set { vScrollBar1.Value = value; }
    }
}

public partial class UserControlImage : UserControl

{

public void ClearScrollInfo()

{

ScrollBarPosX = 0;

ScrollBarPosY = 0;

}

// スクロールバーのスクロールを変更するプロパティ

public int ScrollBarPosX

{

get { return hScrollBar1.Value; }

set { hScrollBar1.Value = value; }

}

public int ScrollBarPosY

{

get { return vScrollBar1.Value; }

set { vScrollBar1.Value = value; }

}

画像を保存する処理

[別名で保存]がクリックされたら名前をつけて画像ファイルを保存することができます。

public partial class Form1 : Form
{
    private void SaveAsFileMenuItem_Click(object sender, EventArgs e)
    {
        SaveAsFile();
    }

    void SaveAsFile()
    {
        SaveFileDialog dlg = new SaveFileDialog();
            dlg.Filter = "画像ファイル(*.bmp)|*.bmp|画像ファイル(*.jpg)|*.jpg|画像ファイル(*.png)|*.png|すべてのファイル(*.*)|*.*";
        if(dlg.ShowDialog() == DialogResult.OK)
        {
            userControlImage1.Bitmap.Save(dlg.FileName);

            //上書き保存できるようにパスを保存しておく
            filePath = dlg.FileName;
        }
        dlg.Dispose();
    }
}

public partial class Form1 : Form

{

private void SaveAsFileMenuItem_Click(object sender, EventArgs e)

{

SaveAsFile();

}

void SaveAsFile()

{

SaveFileDialog dlg = new SaveFileDialog();

dlg.Filter = "画像ファイル(*.bmp)|*.bmp|画像ファイル(*.jpg)|*.jpg|画像ファイル(*.png)|*.png|すべてのファイル(*.*)|*.*";

if(dlg.ShowDialog() == DialogResult.OK)

{

userControlImage1.Bitmap.Save(dlg.FileName);

//上書き保存できるようにパスを保存しておく

filePath = dlg.FileName;

}

dlg.Dispose();

}

[上書き保存]がクリックされたら編集中のファイルを上書き保存することができます。

public partial class Form1 : Form
{
    private void SaveFileMenuItem_Click(object sender, EventArgs e)
    {
        SaveFile();
    }

    void SaveFile()
    {
        // filePathに格納されている文字列は
        // ファイルパスとして不適切な文字列かもしれないのでチェックする
        if(File.Exists(filePath))
        {
            userControlImage1.Bitmap.Save(filePath);
        }
        else
        {
            SaveAsFile();
        }
    }
}

public partial class Form1 : Form

{

private void SaveFileMenuItem_Click(object sender, EventArgs e)

{

SaveFile();

}

void SaveFile()

{

// filePathに格納されている文字列は

// ファイルパスとして不適切な文字列かもしれないのでチェックする

if(File.Exists(filePath))

{

userControlImage1.Bitmap.Save(filePath);

}

else

{

SaveAsFile();

}

よろしければ記事の拡散をお願いします。

自作ゲームリンク集

鳩でも分かるC#管理人からのお願い

できる仕事であれば請け負います。鳩でもわかるC#管理人はクラウドワークスに在宅ワーカーとして登録しています。お仕事の依頼もお待ちしております。

⇒ 仕事を依頼する

コメントについて

コメントで英語などの外国語でコメントをされる方がいますが、管理人は日本語以外はわからないので基本的に内容が理解できず、承認することもありません。それからへんな薬を売っているサイトやリンク先のサイトが存在しないというスパムコメントも多々あります。

Some people make comments in foreign languages such as English, but since the manager does not understand anything other than Japanese, he basically cannot understand the content and does not approve it. Please use Japanese when making comments.

そんななか日本語のコメントもいただけるようになりました。「○○という変数はどこで宣言されているのか？」「××というメソッドはどこにあるのか」「例外が発生する」「いっそのことソース丸ごとくれ」という質問ですが、管理人としては嬉しく思います。「自分が書いた記事は読まれているんだな」と。疑問点には可能な限り答えます。記事に問題があれば修正いたします。

そのうえでお願いがあります。「匿名」という味も素っ気もない名前ではなく、捨てハンでいいのでなにかハンドルネームをつくってほしいと思います。

管理人のモチベーションアップのために

よろしければご支援お願いします。

⇒ 管理人の物乞いリスト

「画像の拡大と縮小 C#で簡易画像編集ソフトをつくる(その2)」

“C#で簡易画像編集ソフトをつくる(その1)” への2件のフィードバック

さとるるる より:

2024年7月10日 15:30

はじめまして。

Formアプリケーションで
事前に指定しておいた2つのフォルダA,Bに、
それぞれ同じ名前のjpgファイルを格納する
ソフトを作成しました。

そのうえで、
指定したファイル名をA,B両方のフォルダから見つけ、
Aにあった画像を左側、Bにあった画像を右側に表示させ、
真ん中の上部にファイル名を記載したうえで
一枚の画像として保存できるようにしたいと思っています。

それぞれの画像はサイズも同じものである前提で、
掲載されているソフトをベースとして
Bにある画像をAの画像のすぐ右側に表示する方法と
ファイル名を追加する方法について教えていただけませんでしょうか。

これでどうでしょうか？

「事前に指定しておいた2つのフォルダ A, B」のパスを A, B とします。また「指定したファイル名」を fileName とします。

string A = @"C:\path1\1";
string B = @"C:\path2\2";
string fileName = "abc.jpg";

Bitmap CreateBitmap()
{
    // フォルダ A のなかのファイルのパス
    string pathA = "";
    if (A.Last() == '\\')
        pathA = A + fileName;
    else
        pathA = A + @"\" + fileName;

    // フォルダ B のなかのファイルのパス
    string pathB = "";
    if (A.Last() == '\\')
        pathB = B + fileName;
    else
        pathB = B + @"\" + fileName;

    // ファイルがふたつとも存在する場合だけ処理をおこなう
    if (System.IO.File.Exists(pathA) && System.IO.File.Exists(pathB))
    {
        // ファイルが存在しても画像ファイルかどうかはわからないので本当は例外処理が必要かも
        Bitmap bmpA = new Bitmap(pathA);
        Bitmap bmpB = new Bitmap(pathB);

        // ふたつの画像はサイズが同じなので両者を並べた画像の幅は元の 2 倍、高さは同じ
        Bitmap bmp = new Bitmap(bmpA.Width * 2, bmpA.Height);
        Graphics g = Graphics.FromImage(bmp);

        // ふたつの画像をコピーする
        g.DrawImage(bmpA, new Point(0, 0));
        g.DrawImage(bmpB, new Point(bmpA.Width, 0));

        // 生成した画像の上部にファイル名を描画する
        Font font = new Font(Font.FontFamily, 20); // 文字の大きさは 20 ピクセル
        SizeF stringSize = GetStringSize(fileName, font); // ファイル名の幅（と高さ）を取得する
        int x = (bmp.Width - (int)stringSize.Width) / 2; // 文字列の X 座標を x にすれば中央に描画される
        g.DrawString(fileName, font, Brushes.Black, new Point(x, 10));

        g.Dispose();
        return bmp;
    }
    else
    {
        // ファイルがふたつとも存在する場合以外はなにもしない（ null を返す）
        return null;
    }
}

// 文字列のサイズを実際に描画して調べる
SizeF GetStringSize(string str, Font font)
{
    Bitmap bmp = new Bitmap(1000, 100);
    Graphics g = Graphics.FromImage(bmp);
    StringFormat sf = new StringFormat();
    g.DrawString(str, font, Brushes.Black, new Point(0, 0));
    SizeF stringSize = g.MeasureString(str, font, 1000, sf);
    g.Dispose();
    bmp.Dispose();
    return stringSize;
}

string A = @"C:\path1\1";

string B = @"C:\path2\2";

string fileName = "abc.jpg";

Bitmap CreateBitmap()

{

// フォルダ A のなかのファイルのパス

string pathA = "";

if (A.Last() == '\\')

pathA = A + fileName;

else

pathA = A + @"\" + fileName;

// フォルダ B のなかのファイルのパス

string pathB = "";

if (A.Last() == '\\')

pathB = B + fileName;

else

pathB = B + @"\" + fileName;

// ファイルがふたつとも存在する場合だけ処理をおこなう

if (System.IO.File.Exists(pathA) && System.IO.File.Exists(pathB))

{

// ファイルが存在しても画像ファイルかどうかはわからないので本当は例外処理が必要かも

Bitmap bmpA = new Bitmap(pathA);

Bitmap bmpB = new Bitmap(pathB);

// ふたつの画像はサイズが同じなので両者を並べた画像の幅は元の 2 倍、高さは同じ

Bitmap bmp = new Bitmap(bmpA.Width * 2, bmpA.Height);

Graphics g = Graphics.FromImage(bmp);

// ふたつの画像をコピーする

g.DrawImage(bmpA, new Point(0, 0));

g.DrawImage(bmpB, new Point(bmpA.Width, 0));

// 生成した画像の上部にファイル名を描画する

Font font = new Font(Font.FontFamily, 20); // 文字の大きさは 20 ピクセル

SizeF stringSize = GetStringSize(fileName, font); // ファイル名の幅（と高さ）を取得する

int x = (bmp.Width - (int)stringSize.Width) / 2; // 文字列の X 座標を x にすれば中央に描画される

g.DrawString(fileName, font, Brushes.Black, new Point(x, 10));

g.Dispose();

return bmp;

}

else

{

// ファイルがふたつとも存在する場合以外はなにもしない（ null を返す）

return null;

}

// 文字列のサイズを実際に描画して調べる

SizeF GetStringSize(string str, Font font)

{

Bitmap bmp = new Bitmap(1000, 100);

Graphics g = Graphics.FromImage(bmp);

StringFormat sf = new StringFormat();

g.DrawString(str, font, Brushes.Black, new Point(0, 0));

SizeF stringSize = g.MeasureString(str, font, 1000, sf);

g.Dispose();

bmp.Dispose();

return stringSize;

}

C#で簡易画像編集ソフトをつくる(その1)

簡易画像編集ソフトをつくる

画像を表示させるユーザーコントロールを作成する

画像ファイルを開く処理

画像を保存する処理

関連記事

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

“C#で簡易画像編集ソフトをつくる(その1)” への2件のフィードバック

コメントをどうぞ