Bu makalemizde C# asp.net kullanarak resim dosyasını html etiketi içerisinde src özelliğine dosya yolu olarak değilde base64 olarak kullamayı göreceğiz.
Resim Dosyasını Base64’e çevirme
Örneğimizde ornek.png adında bir dosya kullanacağız bu dosyayı Convert class’ı altında yer alan ToBase64String metodunu kullanıp ile byte[] dizisini parametre olarak geçmemiz gerekiyor bu durumda yapmamız gereken File sınıfında faydalanıp ReadAllBytes metodu ile ornek.png dosya yolumuzu gösterip dosyayı byte[] dizisine çevirdikten sonra ToBase64String metoduda base64 formatında kodu bize üretmiş olacaktır.
Örnek Kod
1 2 | <%string base64Verisi = Convert.ToBase64String(File.ReadAllBytes("ornek.png")); %> <img rel="lightbox" alt="örnek" src="data:image/png;base64,<%=base64Verisi%>"> |
Görmüş olduğunuz gibi base64 verisi oluştuktan sonra src içerisine üretilen kod aktarılmaktadır. Sayfa render’landığında ise örnek html kodu aşağıdaki gibi olacaktır.
1 2 3 | <img rel="lightbox" alt="örnek" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" /> |
CSS kullanımı ise şu şekilde olacak
1 2 3 4 5 6 7 | ul.checklist li.complete { padding-left: 20px; background: white url('data:image/png;base64,iVBORw0KGgoAA AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6 P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top; } |