Jquery AJAX ile Dinamik Görüntü Yükleme - Dynamically Loading Images with Jquery AJAX

Bu yazıda AJAX kullanılarak görüntülerin tarayıcıya dinamik olarak yüklenmesi sağlanacaktır. Bilindiği üzere HTTP protokolü yazı (text) temelli çalışan bir protokoldür. Bu sebeple AJAX ile bilgi alışverişi yazı (text) olarak yapılmaktadır. Bir görüntünün sunucudan tarayıcıya HTTP protokolüyle yüklenmesi için görüntünün yazıya dönüştürülmesi gerekir. Bu amaçla daha önce anlatılan Base64 kodlama kullanılacaktır. Öncelikle AJAX işlemini gerçekleştirecek javascript kodlarını tanımlayalım:

      
$.ajax({
          type: "POST",
          url: "./WebForm3.aspx/GetImage",
          data: '{"FotoId": "10" }',
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (msg) {
                    
                 var imageSrc = "data:image/jpg;base64," + msg.d;
                 $("#Base64Image").attr("src", imageSrc);
             },
             error: function (msg) {

                 alert("Hata Oluştu.");
             }
       });

Burada önemli nokta HTML img nesnesinin src niteliğine elde ettiğimiz değerin nasıl ekleneceğidir. Aşağıdaki gibi resmin Base64 biçimi src niteliğine atanarak tarayıcının otomatik olarak görüntüyü çözümleyip göstermesi sağlanmaktadır.

data:image/jpg;base64,...

Burada src içinde kodlu verinin jpg görüntüsü olduğu ve Base64 olarak kodlandığı belirtilmektedir. Son olarak görüntüyü kodlayıp tarayıcıya gönderen sunucu taraflı kodu yazalım:

        
[WebMethod]
public static string GetImage(string FotoId)
{
    byte[] arr = File.ReadAllBytes("IMAGE_PATH");

    string base64 = Convert.ToBase64String(arr);

    return base64;
}

Burada "Convert" nesnesinin "ToBase64String" fonksiyonu kullanılarak byte dizisi biçimindeki görüntü Base64 olarak kodlanıp tarayıcıya gönderilmiştir.