23 Mart 2012 / Cuma Yeni bir site açıyoruz. Resimlerin üstüne yazı yazacağız. resimyukle.aspx sayfası oluşturuyoruz. http://www.arifceylan.com/asp-net-c-ile-resim-uzerine-yazi-yazma-ve-gosterme/ Namespace leri kopyalayıp resimyukle.aspx.cs sayfasına kopyalayıp yapıştırıyoruz using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Text; using System.Drawing.Imaging; 1
Page Load event ine kodları kopyalayıp yapıştırıyoruz Bitmap resim = new Bitmap(Server.MapPath("~/resimler/manzara.jpg")); //bitmap sınıfından resim nesnesi oluşturuyoruz ve resmin adresini belirtiyoruz Graphics yaziyaz = Graphics.FromImage(resim); //çizim için Graphics sınıfından yeni nesne üretiyoruz string yazi = "www.arifceylan.com"; //yazdırılacak olan değişkenimizi oluşturup değer veriyoruz. yaziyaz.drawstring(yazi, new Font("Arial", 20, FontStyle.Italic), SystemBrushes.WindowText, new Point(10, 30)); // yaziyaz ile yazdıracağımız yazıyı, yazı tipini, boyutunu,stilini, ve yazdırılacak olan bölümün x ve y // koordinatlarını belirtiyoruz(10,30) Response.ContentType = "image/jpeg"; resim.save(response.outputstream, ImageFormat.Jpeg); //resmin çıktısını alıyoruz resim.dispose(); yaziyaz.dispose(); //nesneleri sonlandırıyoruz. Masa üstündeki resimler klasörünü sitemize ekliyoruz 2
Kaydedip çalıştırıyoruz Bunu bir sayfa olarak değil direk resim çıktısı olarak gösterir. Kodları değiştirip özellikleri düzenleyebiliriz 3
default.aspx e gelip bir adet image kontrolünü ekliyoruz ve ImageUrl : resimyukle.aspx yazıyoruz Şu anki yöntem çok işimize yaramaz. protected void Page_Load(object sender, EventArgs e) Bitmap resim = new Bitmap(Server.MapPath("~/resimler/manzara.jpg")); //bitmap sınıfından resim nesnesi oluşturuyoruz ve resmin adresini belirtiyoruz Veri tabanından aldırırsak daha kolay olur. Dışarıdan parametre ( dosyanın ismini ) almamız lazım protected void Page_Load(object sender, EventArgs e) Bitmap resim = new Bitmap(Server.MapPath("~/resimler/")+Request.QueryString["resimadi"]); //bitmap sınıfından resim nesnesi oluşturuyoruz ve resmin adresini belirtiyoruz Default.aspx e gelip <body> <form id="form1" runat="server"> <div> <asp:image ID="Image1" runat="server" ImageUrl="resimyukle.aspx" /> </div> </form> </body> </html> <body> <form id="form1" runat="server"> <div> <asp:image ID="Image1" runat="server" ImageUrl="resimyukle.aspx?resimadi=manzara.jpg" /> </div> </form> </body> </html> Kaydedip çalıştırıyoruz 4
Laleler.jpg resmini resimler dosyasının içine ekliyoruz. Default.aspx sayfamıza ikinci bir image kontrolü ekleyip ImageUrl : resimyukle.aspx?resimadi=laleler.jpg yazıyoruz Kaydedip çalıştırıyoruz. Yeni bir sayfa açıyoruz (Default2.aspx), düzenliyoruz Button un Click event ine kodları yazıyoruz protected void Button1_Click(object sender, EventArgs e) Image1.ImageUrl = "resimyukle.aspx?resimadi="+textbox1.text; } Kaydedip çalıştırıyoruz 5
Veri tabanını (vtresim.mdb) oluşturuyoruz, sitemize ekliyoruz Yeni sayfa açıp (FileUpload,Button, DataList ekliyoruz)düzenliyoruz Button a çift tıklayıp kodları yazıyoruz 6
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Data.OleDb; public partial class Default3 : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) } protected void Button1_Click(object sender, EventArgs e) FileUpload1.SaveAs(Server.MapPath("~/resimler/") + FileUpload1.FileName); OleDbConnection c = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;DATA Source=" + Server.MapPath("~/App_Data/vtresim.mdb")); c.open(); OleDbCommand com = new OleDbCommand(); com.commandtext = "insert into resimyukleme(resimadresi) values (@ra)"; com.parameters.addwithvalue("@ra", FileUpload1.FileName); } } com.connection = c; com.executenonquery(); Response.Write("kayıt yapıldı"); c.close(); DataList1.DataBind(); Datalist i veri tabanına bağlıyoruz DataList Tasks Edit Data Bindings içeriyi silip image kontrolü ekleyip Edit Data Bindings 7
Image Url Field binding : resimadresi Custom binding : "resimyukle.aspx?resimadi="+eval("resimadresi") Show all properties width Custom bindings : 200 pixel OK 8
Kaydedip, Gözat a tıklayıp resim seçiyoruz Aç Button a tıklayınca görüntümüz şöyle oluyor, resimlerin üstüne yazımızı yazıyor. 9
Resimleri alt alta değilde yan yana göstermek için; DataList i End templates yapıp properties inde RepeatDirection: Horizontal yapıyoruz Resimleri yan yana gösteriyor. Veri tabanımıza eklenmiş mi bakalım, resimyukleme sağ tık Retrieve Data 10
Sonraki derste, üye kayıt sayfası yapılacak ama e-posta kayıtlıysa daha önce kayıtlı diyecek. Birde üye giriş sayfası yapıp giriş kontrol paneli yapacağız, profil bilgilerini değiştirebilecek. 11