Profil Resmi - Hakan Kuyrukçu
Hakan Kuyrukçu
Software Developer
Blog - Detay

Croppie Js Kullanımı ve İsteğe Yönelik Düzenleme -

08.08.2019 Tarihinde OluÅŸturuldu
Croppie Js Kullanımı ve İsteğe Yönelik Düzenleme - - Blog | Hakan Kuyrukçu

Ö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 outputdemoUpload 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