Öncelikle Merhaba,
Bugün bir iş de kullanmak üzere uğraştığım bir kütüphanenin yazısını yazmak istedim. Bu Kütüphane belirlediğiniz boyutlara göre resmi düzenlemenize yardımcı oluyor böylelikle resimin orjinal boyutu 2000x1000 px olsa bile siz 500x300 px boyutlarına göre ayarlıyabiliyorsunuz.
Tabi ki detaylara inmeden önce kaynak belirtelim.
Buradan GitHub hesabına ve kodlara ; GitHub Linki
Buradan da detaylı anlatımın ve örneklerin bulunduğu sayfaya ; Örneklerin Bulunduğu Sayfa
Bugün kendimce kütüphanenin belirli bir bölümünü, düzenlemesini ve php üzerinden yüklemenin nasıl yapılacağını anlatmaya çalışacağım.
Benim kullanacağım kısım upload example olucak çünkü resimleri kullanıcıya yüklettirmek ve sonrasında üzerinde değişiklik yapmasını istiyorum. Başlamadan önce GitHub hesabındaki kodların tamamını indirip incelemenizde kesinlikle fayda var. Örneklerle birlikte gittiğinizde nerede ne kullanıyor hangi kod blokları sizin için önemli bunu anlamanız gerekli.
Kısaca bizim için asıl önemli olan dosyalar demo.js ve demo.css sebebi ise sayfadaki kısımların (toplamdaki örneklerin) fonksiyonları demo.js içerisinde belirtilmiş ve css dosyası ile de html bölümlerinin tasarımlarını şekillendiriyor. Css dosyasında tek yapacağımız yeni belirleyeceğimiz resim boyutuna göre div'imizin yükseklik ve genişlik boyutlarını belirlemek çünkü dinamik olarak değiştirmiyor. Asıl işimiz js dosyası ile olucak anlıyacağınız.
Demo.js dosyası içerisinde output, demoUpload ve init fonksiyonları haricindeki fonksiyonlar sayfanın diğer kısımları ile ilgili olduğundan bizim işimiz yok o sebeple temizliyoruz.
demoUpload fonksiyonu içerisindeki fonksiyonların kullanım anlamları ;
readFile : FileUpload ile bir resim yüklendiği zaman FileReader kütüphanesi ile yüklenen dosyayı okuyup base64 formatında bir resime çevirip kesmemiz için (boyutlandırmamız için) bize bir görüntü oluşturuyor.
$uploadCrop = $('#upload-demo').croppie({ }) : Bu kısım ise sayfada da örnek kısmında da gördüğümüz üzere id'si upload-demo olan div'i boyutlandırma yapıcağımız alan olarak belirleyip hazırlıyor. Bu kısımda bizim boyutlandırma yapıcağımız genişlik ve yüksekliği belirleyeceğimiz kısım bulunuyor. Type parametresi ile de boyutlandırma yaparken alanın türünü belirliyor.
$('.upload-result').on('click', function (ev) { }) ve $uploadCrop.croppie('result', { }) : Kısımları da anlıyacağınız üzere belirlediğimiz alanı sonuç olarak bir yere çıkartmamızı sağlıyor. Croppie örnek olarak sweet alert kütüphanesini kullanıp ekrana popup ile bastırmış fakat biz bunu bir img içerisine de bastırabiliriz. Sonuçta base64 formatında bir resim oluşturuyor.
Bir sonraki yazıda kendi kullandığım şekliyle oluşturulan base64 formatındaki resimi php ile kayıt etmeyi örnek resimler ile anlatıcam.
Görüşmek üzere :)
Seo Tagları: javascript, croppie, php, customize, web, programming