Bu ilginç ve bir o kadar da gereksiz kod, resimleri html e çeviriyor:) Tersini ararken bunu yapmak geldi aklıma.

Position Stil Özelliği

Bir html elementinin konum (position) stil özelliği, static, absolute, relative ve fixed değerleri alabilir. Varsayılan değeri static dir.
<div style=”position:absoulte;left:100px;top:100px”></div> şeklide belirtilir. Adından da anlaşılacağı üzere html elementinin sayfadaki pozisyonunu ayarlamak için kullanlır.

Absolute Position

Position özelliği bu değeri alan bir html elemente left:100px;top:100px stil özellikleri verirsek elementimiz kendisini sarmalayan üst elementin konumuna bakmaksızın pozisyonunu sayfanın sol üst köşesine göre ayarlar ve orada görünür.

Relative Position

Elementin pozisyonunu, üst elementinin bulunduğu yeri orijin alarak, ayarlamak istiyorsak bu değeri kullanabiliriz.<div style=”position:relative;left:100px;top:100px”></div>  Bu bildirim ile div imizi bulunduğu yerden 100px aşağıya, 100px de sağa kaydırmış oluruz.

Relative position’un absolute position dan önemli bir farkı da şudur. Şayet bir elementin positionu relative ise, kendisini sarmalayan elementi, kendi boyutları kadar, genişletecek / yükseltecektir. Position absloute olan bir element kendisini sarmalayan elementten büyük olsa bile, üst elementin boyutlarını değiştirmez.

Absolute çevir | Relative çevir

Mavi tablo gerçekte 10px eninde olmasına karşın , positionu relative olan ve kendisine göre 40px aşağıda ve 40px sağda olan kırmızı tablo tarafından genişletilmiştir.

Fixed Position

Absolute positiondan farklı olarak, sayfayı scroll etsek de elementin ekrandaki görüntüsü sabit kalır.

Örnek Uygulama

<div style=”positon:absolute:top:0px;left:0px;width:1px;height;1px;background-color:red”></div> html kodunun tarayıcıdaki görünümü, 0,0 kordinatlarında 1pixellik kırmızı bir nokta şeklinde olacaktır.

Bir resim dosyasının tüm pixellerinin kordinat ve renklerini alıp, her bir pixele karşılık positionu absolute olan divler olşturur ve bu divlerin “top” özelliğine pixelin y kordinatını, “left” özelliğine pixelin x kordinatını ve background-color özelliğine de pixelin rengini hex formatında atarsak ürettiğimiz html in tarayıcıdaki görünümü ile resim dosyamız aynı olur. http://www.ceviktavsan.com/tolga/deneme.htm bu adreste aşağıdaki kod yardımı ile oluşturduğum bir örnek var.

İşlemcisine güvenen örnek html’in kaynak koduna bakabilir:) Bu kadar küçük bir resmin 300 kb yer tutması icadımın pek te efektif olmadığını gösteriyor. Ne yalan söyliyim tarayıcının bu kadar düzgün çizeceğini tahmin etmemiştim. Otmotik üretilen p elementinin (div olduğunda her bir element için p ye göre 4 karakter daha fazla yer kaplıyordu o yüzden p kullandım) ortak özellikleri için (en boy position)  class kullandım.  

    Bitmap b = new Bitmap(Server.MapPath("x2.jpg"));
        for (int x = 0; x < b.Width; x++)
        {
            for (int y = 0; y < b.Height; y++)
            {
                Color c = b.GetPixel(x,y);
                string cls = String.Format("#{0:x2}{1:x2}{2:x2}",
                     (uint)System.Convert.ToUInt32(c.R),
                      (uint)System.Convert.ToUInt32(c.G),
                       (uint)System.Convert.ToUInt32(c.B));

                string div = string.Format("<p class=\"p\" style=\"top:{0}px; left:{1}px;background-color:{2};\"></p>", y, x, cls);

                denemeLabel.Text += div;
            }
        }