Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Cara Membuat Plugin JQuery Image Cropping dari Scratch - Bagian II

by
Read Time:20 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Suci Rohini (you can also view the original English article)

Aplikasi web perlu menyediakan solusi yang mudah digunakan untuk mengunggah dan memanipulasi konten yang kaya. Proses ini dapat menimbulkan kesulitan bagi beberapa pengguna yang memiliki keterampilan mengedit foto minimal. Memotong adalah salah satu teknik manipulasi foto yang paling sering digunakan, dan tutorial langkah demi langkah ini akan mencakup seluruh proses pengembangan plug-in pemangkasan gambar untuk pustaka JavaScript jQuery.


Rekap Cepat

Dalam tutorial sebelumnya, kita mengulas:

  • bagaimana cara memperpanjang jQuery
  • cara membuat plug-in lebih fleksibel dengan menggunakan opsi khusus
  • cara membuat aplikasi pemangkasan gambar dasar

Hari ini, kita akan mengambil langkah lebih lanjut dan menyelesaikan plug-in: kita akan menentukan lebih banyak opsi khusus, menambahkan panggilan balik, membuat pilihan dapat diseret dan diubah ukurannya, membuat panel pratinjau dan petunjuk ukuran dan menulis beberapa kode sisi server untuk potong gambar.


Langkah 1: Menambahkan Opsi Lainnya

Buka file jquery.imagecrop.js Anda yang berlokasi di /resources/js/imageCrop/ dan tambahkan kode berikut:

Kita telah menambahkan lebih banyak opsi dan dua panggilan balik, onChange dan onSelect. Keduanya bisa sangat berguna dalam mengambil status plug-in.

Opsi

Berikut ini ikhtisar cepat opsi yang ditambahkan:

  • aspectRatio - Menentukan aspek rasio pemilihan (nilai default adalah 0).
  • displayPreview - Menentukan apakah panel pratinjau terlihat atau tidak (nilai default false)
  • displaySizeHint - Menentukan apakah petunjuk ukuran terlihat atau tidak (nilai default false)
  • minSize - Menentukan ukuran minimum pemilihan (nilai default adalah [0, 0])
  • maxSize - Menentukan ukuran maksimum seleksi (nilai default adalah [0, 0])
  • previewBoundary - Menentukan ukuran panel pratinjau (nilai default adalah 90)
  • previewFadeOnBlur - Menentukan opacity dari panel pratinjau pada blur (nilai default adalah 1)
  • previewFadeOnFocus - Menentukan opacity dari panel pratinjau pada fokus (nilai default adalah 0.35)
  • onChange - Mengembalikan status plug-in ketika pilihan diubah
  • onSelect - Mengembalikan status plug-in saat pemilihan dilakukan

Langkah 2: Tambahkan Lebih Banyak Layer

Pada langkah ini, kita akan menambahkan lebih banyak layer. Mari kita mulai dengan petunjuk ukuran.

Kita telah menambahkan dua layer terpisah karena kita tidak ingin foreground dipengaruhi oleh opacity background.

Sekarang kita akan menambahkan sembilan layer lagi: penangan ukuran.

Kita telah menginisialisasi penangan ukuran untuk setiap sudut dan sisi tengah.

Dan akhirnya, panel pratinjau.

Kita telah menginisialisasi dua layer:

  • pemegang, yang berfungsi sebagai topeng dan
  • gambar pratinjau, yang memiliki src yang sama dengan gambar aslinya.
Directory tree

Kita telah menggunakan metode .appendTo() untuk menyisipkan gambar pratinjau di akhir dudukan.


Langkah 3: Meningkatkan Interface

Pertama, kita akan menambahkan dua variabel global baru.

Kita akan membutuhkan variabel-variabel ini nanti, ketika memperbarui fungsi resizeSelection().

Pada bagian pertama, kita hanya menangani opsi allowSelect. Mari kita menangani allowMove dan allowResize juga.

Kita telah melampirkan acara mousedown ke seleksi dan semua penangan ulang ukuran.

Sekarang kita perlu menulis lebih banyak kode untuk memperbarui layer baru yang telah ditambahkan sebelumnya.

Fungsi updateSizeHint() menangani dua kasus tergantung pada parameter yang ditentukan.

  • Jika tidak ada yang ditentukan, perilaku default adalah untuk menampilkan dan memperbarui petunjuk ukuran (jika ada pilihan).
  • Perilaku kedua adalah memudar petunjuk. Ini akan digunakan ketika pengguna selesai dengan mengubah ukuran seleksi.

Pada langkah sebelumnya, kita hanya menginisialisasi penangan ukuran. Sekarang kita akan menempatkan mereka di posisi yang tepat.

Mirip dengan fungsi terakhir, updateResizeHandlers() menguji dua kasus: hide-all dan default. Dalam kasus pertama, kita memanggil metode .each() untuk beralih pada elemen yang cocok.

Mari kita buat fungsi updatePreview().

Kode untuk tiga kasus pertama harus jelas. Kita memanggil metode .animate() untuk melakukan animasi khusus dari set off properti CSS. Selanjutnya, kita memutuskan nilai display dan mengatur posisi pemegang pratinjau. Kemudian, kita skala gambar pratinjau agar sesuai dengan opsi PreviewBoundary dan menghitung posisi baru.

Kita juga perlu memperbarui fungsi updateCursor().

Dan sekarang, fungsi terakhir dari langkah ini.


Langkah 4: Meningkatkan setSelection()

Kita akan menambahkan satu hal di sini: dukungan untuk panel pratinjau.

Kita telah menguji opsi displayPreview dan menggunakan fungsi .mouseenter() dan .mouseleave() untuk melampirkan penangan acara ke pemegang pratinjau.


Langkah 5: Memilih Pilihan

Untuk membuat seleksi dapat diseret, kita perlu menyimpulkan ketika pengguna bergerak dan melepaskan tombol mouse.

Selain itu, kita memiliki pemilihan offset relatif terhadap posisi mouse. Kita akan membutuhkannya nanti, di fungsi moveSelection().


Langkah 6: Memilih Penangan Ubah Ukuran

Pengguna akan dapat mengubah ukuran seleksi dengan memilih dan menyeret salah satu penangan ukuran. Dan ini dapat dilakukan dengan dua cara: pada kedua sumbu - jika pengguna memilih untuk menarik pawang dari sudut - atau pada satu sumbu - jika pengguna memilih untuk menarik pawang dari tengah sisi.

Kita telah menulis sebuah case untuk setiap handler ukuran, karena masing-masing membutuhkan pengaturan spesifik.


Langkah 7: Meningkatkan resizeSelection()

Berbeda dari versi pertama, fungsi resizeSelection() akan dapat menguji ukuran minimum/maksimum dan mengunci rasio aspek pemilihan.

Selain itu, kita telah memanggil panggilan balik onChange() di akhir fungsi. Fungsi getCropData() mengembalikan status plug-in saat ini. Kita akan menulis tubuhnya beberapa langkah kemudian.


Langkah 8: Memindahkan Pilihan

Sekarang kita akan menulis fungsi moveSelection().

Seperti sebelumnya, kita telah memanggil Callback onChange() di akhir fungsi.


Langkah 9: Meningkatkan releaseSelection()

Kita juga perlu mengedit fungsi releaseSelection().

Kita telah mengatur ulang batasan ukuran dan menambahkan dukungan untuk panel pratinjau. Selain itu, kita telah memanggil callback onSelect() dengan cara yang sama seperti yang dilakukan sebelumnya dengan fungsi onChange().


Langkah 10: Mendapatkan Keadaan Saat Ini

Sekarang, kita hampir siap. Mari kita tulis fungsi getCropData().

Kita baru saja menulis fungsi terakhir dari file ini. Simpan dan siapkan untuk langkah selanjutnya.


Langkah 11: Meminimalkan Kode

"Meminimalkan kode mengurangi ukurannya dan meningkatkan waktu pemuatan."

Pada langkah ini, kita akan memperkecil kode plug-in kami untuk mengurangi ukurannya dan meningkatkan waktu pemuatan. Praktek ini terdiri dari menghilangkan karakter yang tidak perlu seperti komentar, spasi, baris baru dan tab. Dua tool populer untuk memperkecil kode JavaScript adalah YUI Compressor (yang juga dapat memperkecil CSS) dan JSMin. Kita akan menggunakan yang pertama. Juga, ini adalah open-source, sehingga Anda dapat melihat kode untuk memahami cara kerjanya.

Menggunakan Kompresor YUI

Kompresor YUI ditulis dalam Java, jadi tidak masalah sistem operasi yang digunakan. Satu-satunya persyaratan adalah Java >= 1.4. Download Kompresor YUI dan ekstrak di folder /resources/js/imageCrop/. Buka baris perintah dan ubah direktori kerja saat ini ke jalur yang sama.

Jika Anda menggunakannya untuk pertama kali, Anda harus mulai dengan menjalankan baris berikut di baris perintah dan membaca instruksi penggunaan.

Sekarang mari kita minify kodenya.

Jangan lupa mengganti x.y.z dengan versi Kompresor YUI yang digunakan. Dan itu dia; tunggu hingga selesai dan kemudian tutup jendela baris perintah.


Langkah 12: Menata Elemen Baru

Buka /resources/js/imageCrop/jquery.imagecrop.css dan tambahkan baris berikut ini:

Kita telah menambahkan beberapa gaya untuk petunjuk ukuran, panel pratinjau, dan mengubah ukuran penangan.


Langkah 13: Menguji Hasil Akhir

Pertama, mari muat plug-in yang diperkecil.

Untuk dapat menguji plug-in, kita perlu entah bagaimana mendapatkan ukuran dan posisi pemilihan. Itu sebabnya kita akan menggunakan onSelect callback; mengembalikan objek dengan status plug-in saat ini.

Fungsi updateForm() mengatur nilai input dan mempertahankannya jika ada pilihan. Selanjutnya, fungsi validateForm() menguji jika pilihan ada dan menampilkan pop-up peringatan jika diperlukan.

Mari kita tambahkan formulir.

Kita telah menambahkan beberapa input tersembunyi dan tombol kirim.

PHP

Dalam contoh ini, kita akan menggunakan PHP dengan pustaka gd tetapi Anda dapat menggunakan bahasa skrip sisi server lain yang mendukung pustaka grafis.

Buat file kosong, beri nama crop.php dan jalankan editor Anda.

Kita telah menggunakan metode imagecreatefromjpeg() untuk membuat gambar baru dari jalur sumber dan imagecreatetruecolor() untuk membuat output sebagai gambar warna yang benar. Selanjutnya, kita telah memanggil imagecopyresampled() untuk menyalin dan mengubah ukuran bagian gambar dengan resampling. Jenis dokumen saat ini bukan yang dibutuhkan, jadi kita memanggil fungsi header() untuk mengubahnya menjadi image/jpeg. Gambar yang tidak diperlukan lagi dihancurkan dengan fungsi imagedestroy(). Dengan exit(), kita menghentikan eksekusi skrip saat ini.


Itu Saja

Kita sekarang memiliki plug-in pemangkasan gambar jQuery yang sepenuhnya dapat disesuaikan yang memungkinkan pengguna untuk membuat, menyeret dan mengubah ukuran pilihan dan menampilkan petunjuk ukuran dan panel pratinjau. Dan ya, tampilannya sama bahkan di Internet Explorer 6! Sehingga selesai adalah tutorial dua bagian! Terima kasih sudah membaca!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.