[WPF] Canvas 이미지를 MySQL DB에 저장하기

[스토리]

요즘은 사용자 체험 동의서를 만들어서 개인정보를 입력하고, 서명까지 받아 저장하는 기능을 구현하고 있다.

일반적인 Input은 WPF Window에서 입력받고, Content 혹은 Text를 변수로 저장하여 DB 쿼리를 통해 전송하지만,

서명같이 이미지로 저장되어 전송하기 위해선 다른 방법을 사용해야 한다.

 

보통 2가지 방법을 사용하는데,

1. 이미지는 로컬에 저장한 후, 그 경로를 DataBase에 저장하는 방식

2. MySQL에서 제공하는 BLOB 자료형으로 이미지를 저장하는 방식

 

오늘 포스팅에서는 2번 방식을 사용하여 이미지를 직접 DataBase에 저장하는 방식을 활용하겠다.

1. 설계

Step 1) Wpf Control의 Canvas를 활용하여 사용자로부터 그려진 이미지를 받는다.

Step 2) Wpf Control중 Canvas의 이미지를 받아 byte[] 자료형으로 변환시킨다.

Step 3) byte[] 자료형으로 변환된 이미지를 쿼리문을 통해 MySql DataBase에 저장한다.

 

* 이번 포스팅은 DB로 image를 저장하는 방법을 다루기 때문에 Canvas에 그림을 그려내는 방법은 추후에 포스팅 하겠다.

 

2. 소스코드

▶ Wpf Control중 Canvas의 이미지를 받아 byte[] 자료형으로 변환시킨다.

        public byte[] ConvertImageToByte(Canvas canvas)
        {
            RenderTargetBitmap rtb = new RenderTargetBitmap((int)canvas.RenderSize.Width, (int)canvas.RenderSize.Height, 96d, 96d, PixelFormats.Default);
            rtb.Render(canvas);

            var crop = new CroppedBitmap(rtb, new Int32Rect());

            MemoryStream memoryStream = new MemoryStream();
            
            JpegBitmapEncoder jpegEncoder = new JpegBitmapEncoder();
            jpegEncoder.Frames.Add(BitmapFrame.Create(crop));
            jpegEncoder.Save(memoryStream);

            return memoryStream.ToArray();
        }

 

▶ byte[] 자료형으로 변환된 이미지를 쿼리문을 통해 MySql DataBase에 저장한다.

// 아래 using을 추가해 라이브러리를 사용
using MySql.Data.MySqlClient;

class SQLDataBase
{
	public MySqlConnection connection;
        
	// 생성자
	public SQLDataBase()
	{
		Initialize();
	}

	// MySQL DB셋팅 초기화
	private void Initialize()
	{
		Console.WriteLine("DataBse Initialize");

		string connectionString;
		connectionString = $"SERVER=/*서버명*/;DATABASE=/*데이터베이스명*/;UID=/*유저 아이디*/;PASSWORD=/*유저 비밀번호*/;";

		connection = new MySqlConnection(connectionString);
	}

	// 데이터베이스 연결을 Open
	private bool OpenConnection()
	{
		try
		{
			connection.Open();
			Console.WriteLine("DataBase연동 성공");
			return true;
		}
		catch (MySqlException ex)
		{
			switch (ex.Number)
			{
				case 0:
					MessageBox.Show("데이터베이스 서버에 연결할 수 없습니다.");
					break;

				case 1045:
					MessageBox.Show("유저 ID 또는 Password를 확인해주세요.");
					break;
			}
			return false;
		}
	}

        // 데이터베이스 연결을 Close
	private bool CloseConnection()
	{
		try
		{
			connection.Close();
			return true;
		}
		catch (MySqlException ex)
		{
			MessageBox.Show(ex.Message);
			return false;
		}
	}

	// DataBase에 Image를 저장
	public void InsertImage(byte[] imageData)
	{
		string imgQuery = $"INSERT INTO /*테이블 명*/ (/*BLOB형식의 Column명*/)" +
                    $" VALUES(@/*BLOB형식의 Column명*/)";

		if (this.OpenConnection() == true)
		{
			MySqlCommand cmd = new MySqlCommand(imgQuery, connection);

			cmd.Parameters.Add($"@/*BLOB형식의 Column명*/", MySqlDbType.Blob);
			cmd.Parameters[$"@/*BLOB형식의 Column명*/"].Value = imageData;

			cmd.ExecuteNonQuery();

			this.CloseConnection();
		}
	}
}


	

→ InsertImage 함수를 호출하여 사용한다.

 

// 윗 코드의 사용 예제
sqlDataBase.InsertImage(ConvertImageToByte());

 

* 코드 참조

https://stackoverflow.com/questions/553611/wpf-image-to-byte

https://stackoverflow.com/questions/8881865/saving-a-wpf-canvas-as-an-image