Load ảnh vào PictureBox trong C#

Cập nhật lần cuối: 20 Tháng Hai 2018

4,691 Lượt xem

Lưu trữ dữ liệu hình ảnh là một trong những công việc quan trọng trong lập trình các ứng dụng sử dụng dữ liệu bên ngoài. Có nhiều hình thức lưu trữ dữ liệu hình ảnh khác nhau: như lưu trữ theo các tệp riêng biệt và sử dụng tên hình ảnh kèm đường dẫn tương đối làm đích truy cập, lưu trữ dưới dạng byte,… mỗi kiểu lưu trữ có ưu và nhược điểm khác nhau, tùy theo mục đích mà bạn có thể sử dụng một phương thức lưu trữ phù hợp.

Nếu lưu trữ hình ảnh công khai, mục đích chỉ là lưu trữ như các hình ảnh trên website thì việc lựa chọn lưu trữ theo các tệp file riêng biệt sẽ giúp việc truy vấn trở nên dễ dàng, các hình ảnh có thể được sao chép và sử dụng trở lại nhanh chóng hơn. Nếu bạn cần lưu trữ hình ảnh chỉ để bảo mật thì bạn nên lưu ở dạng thứ hai là chuyển nó thành dạng byte và mã hóa nó để lưu trữ an toàn hơn. Lưu trữ hình ảnh thông qua các tệp bên ngoài thì đã có rất nhiều bài viết nói về nó, trong bài viết này mình sẽ hướng dẫn làm thế nào để chuyển đổi hình ảnh sang dạng byte để lưu vào CSDL, đồng thời hướng dẫn chuyển đổi một chuỗi byte hình ảnh thành hình ảnh hiển thị trên Winform bằng ngôn ngữ C#.

Thiết kế giao diện

Mục đích của bài viết này là để hướng dẫn bạn cách để chuyển đổi hình ảnh thành dạng byte và ngược lại một cách trực quan nhất. nên mình sẽ thiết kế một giao diện winform để dễ dàng hình dung hơn.

Giao diện phần mềm thiết kế để thử nghiệm công việc

Giao diện mình thiết kế sử dụng bao gồm:1 textbox để lưu trữ đường dẫn hình ảnh, 1 Richbox để lưu trữ đoạn byte của hình ảnh sau khi chuyển, 1 listview để hiển thị hình ảnh được chuyển từ byte, và các button thao tác.

Bây giờ chúng ta sẽ viết các đoạn mã để mô tả từng bước của thao tác chuyển đổi.

Lấy đường dẫn hình vào Textbox bằng Open File Dialog

Nhấn đôi vào nút chọn hình ảnh (để tạo sự kiện click cho nút này) sau đó code đoạn sau sự kiện đó.

 OpenFileDialog openFile = new OpenFileDialog();
 openFile.Filter = "Pictures files (*.jpg, *.jpeg, *.jpe, *.jfif, *.png)|*.jpg; *.jpeg; *.jpe; *.jfif; *.png|All files (*.*)|*.*";
 openFile.FilterIndex = 1;
 openFile.RestoreDirectory = true;
 if (openFile.ShowDialog() == DialogResult.OK)
 {
   textBox1.Text = openFile.FileName;
 }

Và kết quả là lấy được đường dẫn đầy đủ đến file hình ảnh đã chọn.

Kết quả là lấy được đường dẫn hình ảnh bằng Open File Dialog

Bây giờ mình sẽ tiến hành chuyển đổi nó thành dạng byte để lưu vào CSDL.

Viết hàm chuyển đổi hình ảnh sang dạng byte

Tại phần code-behind và sao chép đoạn hàm sau vào.

private byte[] converImgToByte()
 {
  FileStream fs;
  fs = new FileStream(textBox1.Text,FileMode.Open,FileAccess.Read);
  byte[] picbyte = new byte[fs.Length];
  fs.Read(picbyte, 0, System.Convert.ToInt32(fs.Length));
  fs.Close();
  return picbyte;
 }

Lưu ý một số điều sau:

• Để sử dụng FileStream đầu tiên bạn phải thêm thư viện IO vào (using System.IO;)
• textBox1 là tên textbox chứa đường dẫn hình ảnh đã được chọn.
• Đoạn code này sẽ trả về một giá trị kiểu byte được covert từ hình ảnh.

Sau đó nhấn đôi vào nút “Chuyển đổi hình ảnh thành byte” để vào phần code sự kiện click của nút này và gọi đến hàm trên như sau:

richTextBox1.Text = Convert.ToBase64String(converImgToByte());

Đoạn trên là để cover kiểu byte thành chuỗi để hiển thị trên RichTextBox. Bạn cũng có thể cover chuỗi này và lưu vào CSDL sau này thì chỉ load lại và cover ngược lại thôi. Để cover đoạn chuỗi trên trở lại kiểu Byte hình ảnh thì dùng đoạn code sau:

Convert.FromBase64String(Đoạn_String_đã_cover);

Kết quả sau khi chuyển đổi.

Một đoạn chuỗi byte được chuyển từ hình ảnh

Viết hàm chuyển đổi byte sang hình ảnh

Trong phần Code-behindm thêm hàm sau vào, hàm này có nhiệm vụ tiếp nhận đoạn chuỗi đã chuyển đổi từ byte hình ảnh sang kiểu hình ảnh.

private Image ByteToImg (string byteString)
 {
   byte[] imgBytes = Convert.FromBase64String(byteString);
   MemoryStream ms = new MemoryStream(imgBytes , 0, imgBytes .Length);
   ms.Write(imgBytes , 0, imgBytes.Length);
   Image image = Image.FromStream(ms, true);
   return image;
 }

Bây giờ bạn sẽ có lại hình ảnh như bình thường, có nhiều cách bạn có thể hiển thị hình ảnh này trở lại, như hiển thị trên pictureBox, ở đây mình sẽ hiển thị trên ListView, với cách này, bạn có thể cho hiển thị được nhiều hình ảnh hơn.

Bạn trở lại phần Tool, tìm và kéo thả công cụ ImageList vào Form.

Sau đó chọn ImageList cho ListView, bạn có thể chọn ở phần Small ImageList (hiển thị hình nhỏ) hoặc Large ImageList (hiển thị hình ảnh lớn).

Nhấn đôi vào nút “Chuyển đổi byte thành hình ảnh” và thêm đoạn sau vào sự kiện Click.

 imageList1.Images.Add(ByteToImg(richTextBox1.Text));
 imageList1.ImageSize = new Size(132, 132);
 this.listView1.View = View.LargeIcon;
 for (int counter = 0; counter < imageList1.Images.Count; counter++)
 {
    ListViewItem item = new ListViewItem();
    item.ImageIndex = counter;
    this.listView1.Items.Add(item);
 }
 this.listView1.LargeImageList = imageList1;

Giải thích một chút:

• Đoạn đầu tiên sẽ thực hiện thêm hình được chuyển từ đoạn chuỗi Byte vài ImageList.
• Đoạn thứ hai là đoạn set kích thước sẽ hiển thị trên ListView (tính theo pixel).
• Đoạn tiếp theo là chọn kiểu hiển thị cho ListView là LargeIcon.
• Hàm lặp for dùng để tạo ra các Items cho ListView.
• Đoạn cuối cùng là Add ImageList vào ListView lại.

Sau khi hoàn thành thì bạn có thể text thử.

Kết quả chuyển đổi dữ liệu

Bạn có thể sử dụng chuỗi đã được chuyển đổi để lưu vào CSDL bình thường, sau đó lấy ra và chuyển đổi để có hình ảnh như cũ. Bạn có thể tham khảo bài viết Thêm, đọc, sửa, xóa (CRUD) cơ sở dữ liệu SQL Server trong C# để biết cách thêm xóa sửa dữ liệu SQL server trong lập trình C# hoặc nếu sử dụng XML bạn tham khảo bài viết Đọc ghi dữ liệu xml trong C#.

Chúc bạn thành công !