Makale Özeti

Resmin üzerine yazılan Watermark uygulamalarını hepimiz görmüşüzdür. Bilmeyenler için basitçe anlatayım, özellikle fotoğraf yayınlanan sitelerde fotoların üzerinde genellikle sitenin ismi yer alır, yazı genellikle transparan renkte ve resmin köşelerindedir.

Makale

Resmin üzerine yazılan Watermark uygulamalarını hepimiz görmüşüzdür. Bilmeyenler için basitçe anlatayım, özellikle fotoğraf yayınlanan sitelerde fotoların üzerinde genellikle sitenin ismi yer alır, yazı genellikle transparan renkte ve resmin köşelerindedir. Amacı, sitede yayınlanan fotoğrafın kopyalanarak farklı bir sitede yayınlanmasını engellemektir. Özellikle emlak, alım-satım gibi işlerle uğraşan sitelerde bolca örnekleri var. Buradaki resmin sol üst köşesinde olduğu gibi.

Basitçe biz bunu C# ile nasıl yaparız anlatmaya çalışacağım. Anlatacağım örneğin elimden geldiğince işlevselliğini ve kullanılabilirliğini yüksek tutmaya çalıştım ancak konu dışına çok fazla çıkıp amacından da uzaklaşmasını istemedim. Bu örneği daha fazla zenginleştirmek, ek özellikler eklemek sizin hayal gücünüze kalmış.

ImageFormat ve LinearGradientBrush sınıflarını kullanabilmemiz için formun namespace alınına aşağıdakileri ekliyoruz.

using System.Drawing.Drawing2D;
using System.Drawing.Imaging;

Formun genelinde kullanabilmek için üst tarafta bir Bitmap nesnesi tanımlıyoruz.

Resim seç butonun click de OpenFileDiaglog ile jpg türünde bir resim seçilmesini istiyoruz. Resim seçilmişse bunu yukarıda oluşturduğumuz Bitmap e yol olarak verip resim dosyamızın pictureBox1.Image özelliğine atıyoruz. Bu işlem sonunda seçtiğimiz resim dosyasını form üzerinde görebilmekteyiz.

private void button1_Click(object sender, EventArgs e)
    {
        OpenFileDialog fileDialog = new OpenFileDialog();
        fileDialog.Filter = "Resim (*.jpg)|*.jpg";
        fileDialog.ShowDialog();

        if (!String.IsNullOrEmpty(fileDialog.FileName))
        {
            bm = new Bitmap(fileDialog.FileName);
            pictureBox1.Image = bm;
        }          
    }
Sırası ile gittiğimizi düşünürsek, Renk1 butonunun click de renk seçimi yaptırıp picRenk1 in BackColor özelliğine seçilen renki atıyoruz aynı şekilde seçilen renki colorDialog1 un Color özelliğine veriyoruz. Böylelikle kullanıcıya seçtiği renki form üzerinde göstermiş oluyoruz aynı zamanda LinearGradientBrush içerisinde kullanacağımız renklerden de bir tanesi seçmiş oluyoruz.
private void btnRenk1_Click(object sender, EventArgs e)
{
    if (colorDialog1.ShowDialog() == DialogResult.OK)
    {
        picRenk1.BackColor = colorDialog1.Color;
    }
}
Renk2 butonunun clickinde de Renk1 clickin de yaptığımız işlemlerin aynısını yapıyoruz. Burada ikinci renki seçtiğimiz için colorDialog2  nin Color özelliğine veriyoruz bunu da aynı şekilde LinearGradientBrush içerisinde kullanacağız.
private void btnRenk2_Click(object sender, EventArgs e)
{
    if (colorDialog2.ShowDialog() == DialogResult.OK)
    {
        picRenk2.BackColor = colorDialog2.Color;
    }
}
Yazı tipi butonunun click de fontDialog1.ShowDialog() methodu ile kullanıcıdan yazı tipini ve boyutu gibi özellikleri seçmesini istiyoruz ayrıca seçtiği yazı tipinin adını görebilmesi için label4 ün Text özelliğine atıyoruz.
private void btnYaziTipi_Click(object sender, EventArgs e)
{
    fontDialog1.ShowColor = false;
    fontDialog1.ShowEffects = true;

    if (fontDialog1.ShowDialog()==DialogResult.OK)
    {
        label4.Text = fontDialog1.Font.Name;
    }
}
Şimdi sıra resim üzerine yazacağımız yazının yüksekliğini ve genişliğini belirlemeye geldi. Ben TextBox yerine NumericUpDown nesnesini tercih ettim. Burada girilen değerleri alıp resmin üzerine ekleyeceğimiz sırada kullanacağız.

Görselliğin bozulmaması ve korunması adına resim üzerindeki yazının saydam olmasını isteriz. 0 ile 255 arasında bir değer belirleyerek resim üzerine yazacağız yazının saydamlığını-tranparanlığını ayarlayacağız. Bunun içinde ben TrackBar nesnesini kullanmayı tercih ettim. Ayrıca Value değerinin bir Label vasıtası ile kullanıcıya gösterilmesini sağladım. Son olarakta bir TextBox vasıtası aracılığı ile kullanıcıdan yazının üzerinde olmasını istediği Text i aldım.

Ve evet şimdi sıra asıl işlemlerin yapıldığı Kaydet butonunda. Şu ana kadar kullanıcıdan aldığımız değerlerin tamamı Kaydet butonu altında resim üzerine yazılmaya çalışılacak.

pictureBox1.image olarak belirlediğimiz resmi bir Graphics.FromImage nesesi oluşturup Image özelliğine atıyoruz.

LinearGradientBrush türünde bir Brush oluşturup Pointlerini veriyoruz ayrıca

Color.FromArgb(trackBar1.Value, colorDialog1.Color), Color.FromArgb(trackBar1.Value, colorDialog2.Color)
ile yazının saydamlığını ve renklerini belirliyoruz.

Tekrar bir Point oluşturup NumericUpDown nesinden aldığımız yükseklik ve genişlik değerlerini int tipine cast ediyoruz.

Point point=new Point((int)numYukseklik.Value,(int)(numGenislik.Value));
Son olarakta Graphics sınıfının DrawString methodu ile resim üzerine gelecek yazı, fontDialog1.Font ile yazı boyutu ve tipi, LinearGradientBrush ilesaydamlık ve yazı renklerini en sonunda da point ile resim üzerine gelecek yazının kordinatlarını veriyoruz. Image dosyasını Jpeg türünden SaveFileDialog ile aldığımız yere kayıt ediyoruz.
private void btnKaydet_Click(object sender, EventArgs e)
{
    SaveFileDialog sf=new SaveFileDialog();
    sf.Filter = "(*.jpg)|*.jpg";
    sf.ShowDialog();

    if (!String.IsNullOrEmpty(sf.FileName))
    {
        Graphics g = Graphics.FromImage(pictureBox1.Image);
        Brush b = new LinearGradientBrush(new Point(1, 1), new Point(100, 100), Color.FromArgb(trackBar1.Value, colorDialog1.Color), Color.FromArgb(trackBar1.Value, colorDialog2.Color));
        Point point=new Point((int)numYukseklik.Value,(int)(numGenislik.Value));
        g.DrawString(txtYazi.Text, fontDialog1.Font, b,point);
        bm.Save(sf.FileName, ImageFormat.Jpeg);
    }             
}
Tüm bu işlemler sonunda her şey normalse resmin üzerine yazının çizilmiş olması gerekiyor. Yararlı olması ümitiyle.
Örneği buradan indirebilirsiniz ResimUzerineYaziYazmaSample.rar