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.

Base64 (Taban 64) Kodlama - Base64 Encoding

Base64 kodlamanın RFC 4648'de kullanım amaçları anlatılmaktadır. Burada bahsedildiği gibi Base64 kodlamanın asıl kullanım amacı byte dizisi şeklindeki verinin yazı (text) biçiminde veri iletim ortamında değiştirilmeden iletilmesi veya ilgili protokollerle uyumlu bir şekilde iletilmesidir. Ayrıca iletim ortamında veri iletiminin ortak bir standarta dayalı yapılmasıyla verinin üzerinden geçtiği cihazlar tarafından aynı şekilde yorumlanması sağlanmaktadır. Base64 kodlamada byte dizisi ASCII kodlarıyla uyumlu 64 tabanında yazıya dönüştürülmektedir. Genellikle yazı tabanlı HTTP, SMTP veya XML gibi yapılarda kullanılır. Base64 kodlama yapılırken sayıların karakter karşılıklarıyla eşleştirilmesi için aşağıdaki tablo (Karakter Set - Character Set) kullanılır:

    Value Encoding  Value Encoding  Value Encoding  Value Encoding
         0 A            17 R            34 i            51 z
         1 B            18 S            35 j            52 0
         2 C            19 T            36 k            53 1
         3 D            20 U            37 l            54 2
         4 E            21 V            38 m            55 3
         5 F            22 W            39 n            56 4
         6 G            23 X            40 o            57 5
         7 H            24 Y            41 p            58 6
         8 I            25 Z            42 q            59 7
         9 J            26 a            43 r            60 8
        10 K            27 b            44 s            61 9
        11 L            28 c            45 t            62 +
        12 M            29 d            46 u            63 /
        13 N            30 e            47 v
        14 O            31 f            48 w         (pad) =
        15 P            32 g            49 x
        16 Q            33 h            50 y

Kodlama yapılırken wikipedia'da gösterildiği gibi byte dizisi 6'lılar şeklinde ayrılarak tablodaki karşılıkları bulunur. 24 bit bloklar kullanılarak kodlama yapılır. 24 bitlik blok içinde karşılığı olmayan kısımlar "pad" karakteri (=) ile gösterilir:

Text content	M
ASCII	77 (0x4d)								0 (0x00)								0 (0x00)
Bit pattern	0	1	0	0	1	1	0	1	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Index	19						16						0						0
Base64-encoded	T						Q						=						=

Yukarıdaki örnekte ASCII kodlanmış yazının dönüştürülmesi gösterilmesine rağmen ilgili işlem diğer kodlamalar içinde aynıdır (UTF-8, UTF-16 vb.). Fakat herhangi bir yazı bu şekilde gönderilecek ise yazının nasıl kodlandığı da ayrıca verinin yanında gönderilmelidir. Base64 kodlamanın yanında 40 bitlik bloklar ile kodlama yapan Base32 kodlama insan tarafından daha okunabilir bir çıktı üretmesine rağmen Base64 kodlama daha yaygın olarak kullanılmaktadır.

Javascript'te btoa(str) fonksiyonu kullanılarak Base64 kodlama ile kodlanmış yazı elde edilirken atop(enc) ile tekrar orjinal veri elde edilebilmekedir (ie > 9).

function Base64ExampleFunction() {

            var str = "M";
            var enc = window.btoa(str);
            var dec = window.atob(enc);

            var res = "Encoded String: " + enc + "
" + "Decoded String: " + dec;
            document.getElementById("base64Div").innerHTML = res;
        }

Yukarıdaki örnek çalıştırıldığında aşağıdaki sonuç elde edilmektedir: