Php ile Fotoğrafları CSS Koduna Çevirme

Yapmış olduğum son projelerde görsel konusunda bazı sorunlar yaşadığımdan dolayı, görsel yerine css kodlarıyla pixel pixel renklendirme yöntemini kullanarak resimleri çevirmeye karar kılmıştım. Fakat bu yöntemin manuel olarak hazırlanması inanılmaz vakit alacağından dolayı, php ile yapmaya karar verdim. Birçok uğraşıma rağmen istediğimi elde edemeyip biraz araştırmaya başladım. Bu araştırma sırasında Github'da Jay Salvat tarafından böyle bir şeyin daha önceden yapıldığını görünce hemen hazıra kondum. Tabi bunu sizinle de paylaşmak istedim.

Şimdi olayımız şu; Seçmiş olduğumuz bir resim dosyasını taratarak renk analizini gerçekleştiriyoruz. Analiz sonrasında ise belirlenen pixel boyut ve tipine göre css kodlarına çevirmiş oluyoruz. Tabi bu sistem biraz yavaş işlediğinden dolayı küçük boyutlu verileri çevirmek daha mantıklı oluyor. Ayrıca ben bunu kullanıp sadece css kodlarını alarak çalıştım. Yani eklentiyi site içinde kullanmak gibi bir şey yapmadım. Çevirme sonrası kodları alarak istediğim yerde uyguladım.

Eklentiyi kullanmak için ilk önce eklenti dosyasını sayfamıza dahil ediyoruz.

<?php include 'PointlessImageToCssConverter.php';  ?>

Yukarıdaki gibi eklentiyi çağırdıktan sonra, hangi resim dosyası ile işlem yapacağımızı ve ne çekil de çıktı alacağımızın belirlendiği kullanım alanına geçiyoruz. Hatta örnek olarak şu şekilde bir içerik girelim.

$img = new PointlessImageToCssConverter("ibrahimcevruk.jpg");
$img->setWidth(100);
$img->setPixelSize(1);
$img->setColorType(PointlessImageToCssConverter::BEST);
$img->setBlur(1);
echo $img->computeStyle();

Kullanımı ise yukarıda yer alan şekil gibidir. Zaten bu bilgilerin nasıl yazıldığıyla ilgili bilgi almak için eklenti dosyasına bakarak görebilirsiniz.

$img = new PointlessImageToCssConverter("ibrahimcevruk.jpg"); ile eklentiyi kullanım haline getirip, resim dosyasını seçiyoruz.
$img->setWidth(100); ile seçmiş olduğumuz resim dosyasının genişliğini belirtiyoruz.
$img->setPixelSize(1); ile css'e çevrilecek olan yapının pixel boyutunu belirtiyorsunuz.
$img->setColorType(PointlessImageToCssConverter::BEST); ile css çıktınızın tipini belirtiyorsunuz. 3 farklı seçenek imkanı sağlıyor. HEXA, RGBA ve BEST seçeneklerinden istediğinizi kullanabilirsiniz.
$img->setBlur(1); ile resim üzerinde verilecek bulanıklık oranını belirliyorsunuz.
$img->computeStyle(); ile Css koduna çevrilmiş halini çıktı olarak alıyorsunuz.

Yukarıdaki işlemi yaptığınızda ekrana css kodları gelecektir. Bu şekilde kodları ekrana alacağınız gibi direk olarak css çıktısını da alabilirsiniz. Bunun için aşağıdaki kullanımı yapabilirsiniz.

<style>
#CssCevir{
$img = new PointlessImageToCssConverter("ibrahimcevruk.jpg");
$img->setWidth(100);
$img->setPixelSize(1);
$img->setColorType(PointlessImageToCssConverter::BEST);
$img->setBlur(1);
echo $img->computeStyle();
}
</style>
<div id="CssCevir"></div>

Yukarıdaki kod bloğu kullanılarak direk olarak css'e çevrilmiş olan resim dosyasını, css çıktısı olarak ekrana basarak ön izleme yapabilirsiniz.
EK DOSYALARI İNDİR (82)
DEMO YOK
- 11.12.2014 / 14:38:28 9

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

7:47 Php Dersleri

Değişken Tanımlama ve Ekrana Yazdırma Uygulaması

Kategori: Php Dersleri | 02.05.2013
3:25 Php Dersleri

Kontrollerde Empty İfadesinin Kullanımı

Kategori: Php Dersleri | 04.05.2013
Genel Makaleler

Youtube'un Telif Hakkı Nedeniyle Videoları Kaldırması

Kategori: Genel Makaleler | 04.05.2013
Java Dersleri

Java Programlama Derslerine Başlıyoruz!

Kategori: Java Dersleri | 09.08.2013
Seo(.htaccess)

Paravan Blog Nedir, Nasıl Yapılır?

Kategori: Seo(.htaccess) | 02.09.2014

Yorum Listesi (1) # YorumYap

  • Life (26.07.2015 - 23:42:42)
    Merhaba İbrahim Bey. Ben bunu kullanmak istiyorum ama tam olarak kullanım şeklini anlayamadım. Sayfayı include ettim ve ekran çıktısında sadece css değerleri yazıyor. Ben direkt görüntünün cıktısını almak istedim ama çıktı almak için dersinizdeki #CssCevir kısmını anlayamadım. Bunlar php kodları arasında mı olacak yoksa ayıretten css dosyası mı oluşturulacak, bir türlü çözemedim.

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.