Rehber C# ile Image Processing yapımı

Merhaba 😇

Bugün sizlere, C# dili ile görüntü işleme, yani Image Processing nasıl yapılır anlatmaya ve göstermeye çalışacağım.

Yazımız 3 ana maddeden oluşuyor;
  • Image Processing nedir?
  • Hangi alanlarda kullanılır?
  • Görüntü işleme nasıl yapılır?
Image Processing (görüntü işleme) nedir?

Image Processing
, ölçülmüş veya kaydedilmiş olan elektronik (dijital) görüntü verilerini, elektronik ortamda (bilgisayar ve yazılımlar yardımı ile) amaca uygun şekilde değiştirmeye yönelik yapılan bilgisayar işlemine denir. Görüntü işleme, verilerin, yakalanıp ölçme ve değerlendirme işleminden sonra, başka bir aygıtta okunabilir bir biçime dönüştürülmesi ya da bir elektronik ortamdan başka bir elektronik ortama aktarmasına yönelik bir çalışma olan "Sinyal işlemeden" farklı bir işlemdir.

Hangi alanlarda kullanılır?

Image Prosessing
, başta yapay zeka olmak üzere, Photoshop, oyunlar, nesne tespit etme sistemleri, güvenlik işlemleri, yüz tanıma sistemleri gibi alanlarda yaygın olarak kullanılmaktadır.

Görüntü işleme nasıl yapılır?

Bugün sizlere bir resim dönüştürme, efekt ekleme gibi işlemlerin olduğu bir yazılım yaparak uygulamalı olarak göstereceğim.

Öncelikle bir resim üzerinde renk işlemi yaparken ColorMatrix ve Bitmap kullanılır.

1679495156418.png


Color Matrix Nedir?

Color Matrix, Bir Renk Matrisi, yakalama için doğru bir temsil oluşturmak amacıyla renk spektrumunun farklı bölümlerinin dengelenmesini açıklar. Yalnızca üç ana rengi değil, birbirleriyle olan ilişkilerini de tanımlar.

Kod:
    R G B A W            R G B A W             R   G   B   A   W
 R  [1 0 0 0 0]       R  [c 0 0 0 0]       R  [sr+s sr  sr  0   0]
 G  [0 1 0 0 0]       G  [0 c 0 0 0]       G  [ sg sg+s sg  0   0]
 B  [0 0 1 0 0]    X  B  [0 0 c 0 0]    X  B  [ sb  sb sb+s 0   0]
 A  [0 0 0 1 0]       A  [0 0 0 1 0]       A  [ 0   0   0   1   0]
 W  [b b b 0 1]       W  [t t t 0 1]       W  [ 0   0   0   0   1]
 
Brightness Matrix     Contrast Matrix          Saturation Matrix

                        R      G      B      A      W
                 R  [c(sr+s) c(sr)  c(sr)    0      0   ]
                 G  [ c(sg) c(sg+s) c(sg)    0      0   ]
         ===>    B  [ c(sb)  c(sb) c(sb+s)   0      0   ]
                 A  [   0      0      0      1      0   ]
                 W  [  t+b    t+b    t+b     0      1   ]
        
                           Transformation Matrix


1679495114587.png


Bitmap nedir?

Bitmap
, genellikle belirli bir bitmap uygulamasına atıfta bulunmak için kullanılır: her birinin ikiden fazla renk depolayabildiği, dolayısıyla birden fazla bit kullandığı bir piksel haritasına atıfta bulunan pix-map piksel başına. Böyle bir durumda söz konusu alan, bir dijital grafik çıktı cihazını (ekran veya monitör) oluşturan piksel dizisidir. Bazı bağlamlarda, bitmap terimi, piksel başına bir bit anlamına gelirken, Pixmap, piksel başına birden çok bit içeren görüntüler için kullanılır.

Şimdi bir uygulama yapalım.

Bir Form oluşturdum.

  • 1 adet PictureBox.
  • 12 adet Button.
  • 1 adet TextBox.
1679494759718.png


Gerekeli kütüphaneler;
C#:
using System;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
using System.Windows.Forms;

Gerekli kodlar;
C#:
 // Program laod eventi
        private void Form1_Load(object sender, EventArgs e){
            buttons_deactive();
        }

        // Resim seçilmezse butonları devre dışı bırakır
        private void buttons_deactive(){
            bool button_mode = false;

            MirrorEffectBtn.Enabled = button_mode;
            FlashEffectBtn.Enabled = button_mode;
            FrozenEffectBtn.Enabled = button_mode;
            WinterEffectBtn.Enabled = button_mode;
            GrayEffectBtn.Enabled = button_mode;
            OldEffectBtn.Enabled = button_mode;
            CherryEffectBtn.Enabled = button_mode;
            BrightnessEffectBtn.Enabled = button_mode;
            PurpleEffectBtn.Enabled = button_mode;
            FogEffectBtn.Enabled = button_mode;
            SaveImageBtn.Enabled = button_mode;
        }

        // Resim seçilirse butonları aktif eder
        private void button_active(){
            bool button_mode = true;

            MirrorEffectBtn.Enabled = button_mode;
            FlashEffectBtn.Enabled = button_mode;
            FrozenEffectBtn.Enabled = button_mode;
            WinterEffectBtn.Enabled = button_mode;
            GrayEffectBtn.Enabled = button_mode;
            OldEffectBtn.Enabled = button_mode;
            CherryEffectBtn.Enabled = button_mode;
            BrightnessEffectBtn.Enabled = button_mode;
            PurpleEffectBtn.Enabled = button_mode;
            FogEffectBtn.Enabled = button_mode;
            SaveImageBtn.Enabled = button_mode;
        }

        // Select Image
        // =================================
        private void ImageSelectBtn_Click(object sender, EventArgs e){
            OpenFileDialog ofd = new OpenFileDialog{
                Title = "Resim Dosyası Seçiniz",
                Filter = "Resim Dosyası |*.jpg;*.jpeg;*.png;*.gif;*.tif;"
            };
            if (ofd.ShowDialog() == DialogResult.OK){
                ImagePathTextBox.Text = ofd.FileName.Trim();
                ImageBox.BackgroundImage = Image.FromFile(ofd.FileName.Trim());
                button_active();
            }
        }

        // Buttons Click
        // =================================

        // Ayna Efekti (Mirror)
        private void MirrorEffectBtn_Click(object sender, EventArgs e){
            mirror_effect();
        }

        // Flaş Efekti
        private void FlashEffectBtn_Click(object sender, EventArgs e){
            flash_effect();
        }

        // Donma Efekti
        private void FrozenEffectBtn_Click(object sender, EventArgs e){
            frozen_effect();
        }

        // Kış Efekti
        private void WinterEffectBtn_Click(object sender, EventArgs e){
            winter_effect();
        }

        // Gri Tonlama Efekti
        private void GrayEffectBtn_Click(object sender, EventArgs e){
            gray_effect();
        }

        // Eski Efekti
        private void OldEffectBtn_Click(object sender, EventArgs e){
            old_effect();
        }

        // Vişne Efekti
        private void CherryEffectBtn_Click(object sender, EventArgs e){
            cherry_effect();
        }

        // Parlaklık Arttırma Efekti
        private void BrightnessEffectBtn_Click(object sender, EventArgs e){
            light_add_effect();
        }

        // Pembe Tonlama Efekti
        private void PurpleEffectBtn_Click(object sender, EventArgs e){
            purple_effect();
        }

        // Sis Efekti
        private void FogEffectBtn_Click(object sender, EventArgs e){
            fog_effect();
        }

        // Effects
        // =================================

        // Ayna Efekti (Mirror)
        private void mirror_effect(){
            // Resim dosyasını veriyoruz
            Bitmap image1 = new Bitmap(ImageBox.BackgroundImage);
            // Resimi klonluyoruz
            Bitmap image2 = (Bitmap)image1.Clone();
            // Ayna efekti veriyoruz
            image2.RotateFlip(RotateFlipType.RotateNoneFlipX);
            // Bitmap'a dönüştürüyoruz
            Bitmap bitmap = new Bitmap(image1.Width + image2.Width, Math.Max(image1.Height, image2.Height));
            using (Graphics g = Graphics.FromImage(bitmap)){
                g.DrawImage(image1, 0, 0);
                g.DrawImage(image2, image1.Width, 0);
            }
            // Çıktı
            ImageBox.BackgroundImage = bitmap;
        }

        // Flash Efekti
        private void flash_effect(){
            // Resim dosyasını veriyoruz ve bitmap ile genişliğini ve yüksekliğini alıyoruz
            Image img = ImageBox.BackgroundImage;                 
            Bitmap bmpInverted = new Bitmap(img.Width, img.Height);
                                                    
            // Renk değişimi için ColorMatrix kullanıyoruz
            ImageAttributes ia = new ImageAttributes();
            ColorMatrix cmPicture = new ColorMatrix(new float[][]{
                new float[]{ 1+0.9f, 0, 0, 0, 0 },
                new float[]{ 0, 1+1.5f, 0, 0, 0 },
                new float[]{ 0, 0, 1+1.3f, 0, 0 },
                new float[]{ 0, 0, 0, 1, 0 },
                new float[]{ 0, 0, 0, 0, 1 }
            });
            ia.SetColorMatrix(cmPicture); 
            Graphics g = Graphics.FromImage(bmpInverted);
                                                  
            // Görseli ColorMatrix Ayarı ile yeniden çiziyoruz
            g.DrawImage(img, new Rectangle(0, 0, img.Width, img.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, ia);

            // Fazlalık yükü bellekten atıyoruz
            g.Dispose();

            // Çıktı
            ImageBox.BackgroundImage = bmpInverted;
        }

        // Donma Efekti
        private void frozen_effect(){
            // Resim dosyasını veriyoruz ve bitmap ile genişliğini ve yüksekliğini alıyoruz
            Image img = ImageBox.BackgroundImage;                   
            Bitmap bmpInverted = new Bitmap(img.Width, img.Height);

            // Renk değişimi için ColorMatrix kullanıyoruz
            ImageAttributes ia = new ImageAttributes();         
            ColorMatrix cmPicture = new ColorMatrix(new float[][]{
                new float[]{ 1+0.3f, 0, 0, 0, 0 },
                new float[]{ 0, 1+0f, 0, 0, 0 },
                new float[]{ 0, 0, 1+5f, 0, 0 },
                new float[]{ 0, 0, 0, 1, 0 },
                new float[]{ 0, 0, 0, 0, 1 }
            });
            ia.SetColorMatrix(cmPicture);   
            Graphics g = Graphics.FromImage(bmpInverted);

            // Görseli ColorMatrix Ayarı ile yeniden çiziyoruz   
            g.DrawImage(img, new Rectangle(0, 0, img.Width, img.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, ia);

            // Fazlalık yükü bellekten atıyoruz
            g.Dispose();

            // Çıktı
            ImageBox.BackgroundImage = bmpInverted;
        }

        // Kış Efekti
        private void winter_effect(){
            // Resim dosyasını veriyoruz ve bitmap ile genişliğini ve yüksekliğini alıyoruz
            Image img = ImageBox.BackgroundImage;                   
            Bitmap bmpInverted = new Bitmap(img.Width, img.Height);

            // Renk değişimi için ColorMatrix kullanıyoruz
            ImageAttributes ia = new ImageAttributes();       
            ColorMatrix cmPicture = new ColorMatrix(new float[][]{
                new float[]{ 1,0,0,0,0 },
                new float[]{ 0,1,0,0,0 },
                new float[]{ 0,0,1,0,0 },
                new float[]{ 0, 0, 0, 1, 0 },
                new float[]{ 0, 0, 1, 0, 1 }
            });
            ia.SetColorMatrix(cmPicture); 
            Graphics g = Graphics.FromImage(bmpInverted);

            // Görseli ColorMatrix Ayarı ile yeniden çiziyoruz
            g.DrawImage(img, new Rectangle(0, 0, img.Width, img.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, ia);

            // Fazlalık yükü bellekten atıyoruz
            g.Dispose();

            // Çıktı
            ImageBox.BackgroundImage = bmpInverted;
        }

        // Gri Tonlama Efekti
        private  void gray_effect(){
            // Resim dosyasını veriyoruz ve bitmap ile genişliğini ve yüksekliğini alıyoruz
            Image img = ImageBox.BackgroundImage;                     
            Bitmap bmpInverted = new Bitmap(img.Width, img.Height);

            // Renk değişimi için ColorMatrix kullanıyoruz
            ImageAttributes ia = new ImageAttributes();       
            ColorMatrix cmPicture = new ColorMatrix(new float[][]{
                new float[]{ 0.299f, 0.299f, 0.299f, 0, 0 },
                new float[]{ 0.587f, 0.587f, 0.587f, 0, 0 },
                new float[]{ 0.114f, 0.114f, 0.114f, 0, 0 },
                new float[]{ 0, 0, 0, 1, 0 },
                new float[]{ 0, 0, 0, 0, 0 }
            });
            ia.SetColorMatrix(cmPicture);   
            Graphics g = Graphics.FromImage(bmpInverted);

            // Görseli ColorMatrix Ayarı ile yeniden çiziyoruz
            g.DrawImage(img, new Rectangle(0, 0, img.Width, img.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, ia);

            // Fazlalık yükü bellekten atıyoruz
            g.Dispose();

            // Çıktı
            ImageBox.BackgroundImage = bmpInverted;
        }

        // Eski Tonlama
        private  void old_effect(){
            // Resim dosyasını veriyoruz ve bitmap ile genişliğini ve yüksekliğini alıyoruz
            Image img = ImageBox.BackgroundImage;                   
            Bitmap bmpInverted = new Bitmap(img.Width, img.Height);

            // Renk değişimi için ColorMatrix kullanıyoruz
            ImageAttributes ia = new ImageAttributes();       
            ColorMatrix cmPicture = new ColorMatrix(new float[][]{
                new float[]{ .393f, .349f, .272f, 0, 0 },
                new float[]{ .769f, .686f, .534f, 0, 0 },
                new float[]{ .189f, .168f, .131f, 0, 0 },
                new float[]{ 0, 0, 0, 1, 0 },
                new float[]{ 0, 0, 0, 0, 1 }
            });
            ia.SetColorMatrix(cmPicture); 
            Graphics g = Graphics.FromImage(bmpInverted);

            // Görseli ColorMatrix Ayarı ile yeniden çiziyoruz
            g.DrawImage(img, new Rectangle(0, 0, img.Width, img.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, ia);

            // Fazlalık yükü bellekten atıyoruz
            g.Dispose();

            // Çıktı
            ImageBox.BackgroundImage = bmpInverted;
        }

        // Vişne Efekti
        private void cherry_effect(){
            // Resim dosyasını veriyoruz ve bitmap ile genişliğini ve yüksekliğini alıyoruz
            Image img = ImageBox.BackgroundImage;                     
            Bitmap bmpInverted = new Bitmap(img.Width, img.Height);

            // Renk değişimi için ColorMatrix kullanıyoruz
            ImageAttributes ia = new ImageAttributes();       
            ColorMatrix cmPicture = new ColorMatrix(new float[][]{
                new float[]{ .393f, .349f, .272f+1.3f, 0, 0 },
                new float[]{ .769f, .686f+0.5f, .534f, 0, 0 },
                new float[]{ .189f+2.3f, .168f, .131f, 0, 0 },
                new float[]{ 0, 0, 0, 1, 0 },
                new float[]{ 0, 0, 0, 0, 1 }
            });
            ia.SetColorMatrix(cmPicture); 
            Graphics g = Graphics.FromImage(bmpInverted);

            // Görseli ColorMatrix Ayarı ile yeniden çiziyoruz
            g.DrawImage(img, new Rectangle(0, 0, img.Width, img.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, ia);

            // Fazlalık yükü bellekten atıyoruz
            g.Dispose();

            // Çıktı
            ImageBox.BackgroundImage = bmpInverted;
        }

        private void light_add_effect(){
            // Resim dosyasını veriyoruz ve bitmap ile genişliğini ve yüksekliğini alıyoruz
            Image img = ImageBox.BackgroundImage;                     
            Bitmap bmpInverted = new Bitmap(img.Width, img.Height);

            // Renk değişimi için ColorMatrix kullanıyoruz
            ImageAttributes ia = new ImageAttributes();       
            ColorMatrix cmPicture = new ColorMatrix(new float[][]{
                new float[]{ .393f, .349f+0.5f, .272f, 0, 0 },
                new float[]{ .769f+0.3f, .686f, .534f, 0, 0 },
                new float[]{ .189f, .168f, .131f+0.5f, 0, 0 },
                new float[]{ 0, 0, 0, 1, 0 },
                new float[]{ 0, 0, 0, 0, 1 }
            });
            ia.SetColorMatrix(cmPicture); 
            Graphics g = Graphics.FromImage(bmpInverted);

            // Görseli ColorMatrix Ayarı ile yeniden çiziyoruz
            g.DrawImage(img, new Rectangle(0, 0, img.Width, img.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, ia);

            // Fazlalık yükü bellekten atıyoruz
            g.Dispose();

            // Çıktı
            ImageBox.BackgroundImage = bmpInverted;
        }

        // Mor Tonlama
        void purple_effect(){
            // Resim dosyasını veriyoruz ve bitmap ile genişliğini ve yüksekliğini alıyoruz
            Image img = ImageBox.BackgroundImage;                     
            Bitmap bmpInverted = new Bitmap(img.Width, img.Height);

            // Renk değişimi için ColorMatrix kullanıyoruz
            ImageAttributes ia = new ImageAttributes();     
            ColorMatrix cmPicture = new ColorMatrix(new float[][]{
                new float[]{ .393f+0.3f, .349f, .272f, 0, 0 },
                new float[]{ .769f, .686f+0.2f, .534f, 0, 0 },
                new float[]{ .189f, .168f, .131f+0.9f, 0, 0 },
                new float[]{ 0, 0, 0, 1, 0 },
                new float[]{ 0, 0, 0, 0, 1 }
            });
            ia.SetColorMatrix(cmPicture); 
            Graphics g = Graphics.FromImage(bmpInverted);

            // Görseli ColorMatrix Ayarı ile yeniden çiziyoruz
            g.DrawImage(img, new Rectangle(0, 0, img.Width, img.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, ia);

            // Fazlalık yükü bellekten atıyoruz
            g.Dispose();

            // Çıktı
            ImageBox.BackgroundImage = bmpInverted;
        }

        // Sis Efekti
        private void fog_effect(){
            // Resim dosyasını veriyoruz ve bitmap ile genişliğini ve yüksekliğini alıyoruz
            Image img = ImageBox.BackgroundImage;
            Bitmap bmpInverted = new Bitmap(img.Width, img.Height);

            // Renk değişimi için ColorMatrix kullanıyoruz
            ImageAttributes ia = new ImageAttributes();
            ColorMatrix cmPicture = new ColorMatrix(new float[][]{
                new float[]{ 1+0.3f, 0, 0, 0, 0 },
                new float[]{ 0, 1+0.7f, 0, 0, 0 },
                new float[]{ 0, 0, 1+1.3f, 0, 0 },
                new float[]{ 0, 0, 0, 1, 0 },
                new float[]{ 0, 0, 0, 0, 1 }
            });
            ia.SetColorMatrix(cmPicture);
            Graphics g = Graphics.FromImage(bmpInverted);

            // Görseli ColorMatrix Ayarı ile yeniden çiziyoruz
            g.DrawImage(img, new Rectangle(0, 0, img.Width, img.Height), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel, ia);

            // Fazlalık yükü bellekten atıyoruz
            g.Dispose();

            // Çıktı
            ImageBox.BackgroundImage = bmpInverted;
        }

        private void SaveImageBtn_Click(object sender, EventArgs e){
            SaveFileDialog save_engine = new SaveFileDialog{
                InitialDirectory = @"C:\Users\" + SystemInformation.UserName + @"\Desktop\",
                Title = "Uzantı seçiniz",
                FileName = Path.GetFileNameWithoutExtension(ImagePathTextBox.Text.Trim()),
                DefaultExt = "png",
                Filter = "Bitmap Resimi (.bmp)|*.bmp|Gif Resimi (.gif)|*.gif |JPEG Resimi (.jpeg)|*.jpeg |Png Resimi (.png)|*.png |Tiff Resimi (.tiff)|*.tiff |Wmf Resimi (.wmf)|*.wmf"
            };
            if (save_engine.ShowDialog() == DialogResult.OK){
                Bitmap save_image = new Bitmap(ImageBox.BackgroundImage);
                save_image.Save(save_engine.FileName);
                MessageBox.Show($"Görsel başarıyla {save_engine.FileName} olarak yazdırıldı.", Application.ProductName, MessageBoxButtons.OK, MessageBoxIcon.Information);
            }
        }


Şimdi deneyelim;

Orijinal görüntü;


1679494912373.png


Mor tonlama;

1679494935648.png


Ayna efektli mor tonlama;

1679494948110.png


Gri tonlama;

1679497730711.png


Çıktı hali;

1679494972339.png


Gördüğünüz üzere kalite hiç düşmeden hem ayna efeketi yaptı hem de görüntü üzerine mor tonlama yaptı.

Program farklı resim formatlarını dönüştürme işlemi de yapıyor. PNG > JPEG veya JPEG > GIF gibi.

Rehberi hazırlamak 2.5 saatimi aldı.
Yazılım rehberlerimin devamı gelecek.

Buraya kadar okuyan herkese teşekkür ederim.
Umarım işinize yarar.

İyi çalışmalar, kolay gelsin
😎

İşine yarayacağını düşündüğüm kişiler;

@Deva Bulmam @Bora Dere @Enes3078 @Mithat Berhan @Disty @Vavien. @Beroski @Oreki @mazzanti @MisakiTaro @user.cs
 
Son düzenleme:
Hocam bu RAM kullanımı halis mi be?

1679500537741.png


Peak olarak 6 GB gördü ve yaptığımız işlemi geri alabilme özeliği olsa çok iyi olurdu ama böyle bile harika olmuş ellerine sağlık yetni gelecek rehberleri heyecanla bekliyor olacağım 🥳

1679500668777.png


7GB 💀
 
Son düzenleme:

Dosya Ekleri

  • Ekran Görüntüsü (34).png
    Ekran Görüntüsü (34).png
    83 KB · Görüntüleme: 22
Tüm yazdığım rehberler içindeki dosyalar tek bir link olarak birleştirildi arkadaşlar. İstediğiniz dosyayı bu link üzerinden indirebilirsiniz:

 
Çok güzel. Ben de bunu javascript ile websitede yapmaya çalışacağım
 
Eline sağlık. Kodlarını github veya benzer platformlara atmak daha faydalı olacağını düşünüyorum. Ayrıca .exe çıktılarını release olarak GitHub üzerinden paylaşmak mümkün.
 

Geri
Yukarı