PHP Dersleri

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.

include 'PointlessImageToCssCo';

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.

#CssCevir{
$img = new PointlessImageToCssConverter("ibrahimcevruk.jpg");
$img->setWidth(100);
$img->setPixelSize(1);
$img->setColorType(PointlessImageToCssConverter::BEST);
$img->setBlur(1);
echo $img->computeStyle();
}
<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.

Daha Fazla Göster

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Kapalı