7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Cara membuat jQuery Plugin Cropping gambar dari awal - bagian I

Read Time: 14 mins

Indonesian (Bahasa Indonesia) translation by Yudha Zubair (you can also view the original English article)

Aplikasi web perlu menyediakan easy-to-use solusi untuk meng-upload dan memanipulasi konten yang kaya. Proses ini dapat membuat kesulitan untuk beberapa pengguna yang memiliki minimal foto editing keterampilan. Cropping adalah salah satu teknik manipulasi foto yang paling banyak digunakan, dan tutorial langkah demi langkah ini akan mencakup proses pembangunan seluruh gambar cropping plug-in untuk perpustakaan JavaScript jQuery.


Langkah 1. Menyiapkan ruang kerja

Pertama, kita akan mengatur ruang kerja proyek kami untuk tutorial ini. Memulai dengan menciptakan hirarki direktori dan file kosong bernama sebagai dicontohkan dalam gambar di bawah ini:

Directory tree

Selanjutnya, Anda akan perlu untuk men-download jQuery JavaScript library dan menempatkannya dalam folder /resources/js. Gambar yang digunakan dalam tutorial ini harus bernama example.jpg dan ditempatkan di dalam folder /resources/images/. Anda dapat menggunakan gambar ini (Terima kasih kepada gsso-stock), diberikan dengan source file tutorial ini, atau salah satu dari Anda sendiri. Dan file yang terakhir adalah file outline.gif, yang harus ditempatkan di dalam /resources/js/imageCrop/ folder.


Langkah 2. Membuat halaman pengujian

Untuk menguji plug-in, kita harus pasangkan ke gambar. Sebelum mulai bekerja di itu, kita akan menciptakan containg halaman sederhana gambar.

HTML

Buka file index.html pada editor teks favorit Anda dan tuliskan kode berikut.

Tidak ada yang mewah di sini: sekadar kode HTML. Kami memiliki stylesheet yang dimuat untuk halaman, jQuery, kami plug-in file (yang saat ini kosong) dan menempatkan gambar dalam dokumen.

CSS

Sekarang edit style.css seperti ditunjukkan di atas.

Kami telah menyesuaikan aspek halaman kami dengan mengubah warna latar belakang dan menambahkan beberapa style dasar untuk judul dan gambar.


Langkah 3. Menulis basic jQuery Plug-In

Mari kita mulai dengan membuat plug-in jQuery basic.

"Pelajari lebih lanjut tentang cara menulis sendiri plug-in, melalui posting ini. Ini menguraikan dasar-dasar, praktek terbaik dan common pitfalls harus diperhatikan ketika Anda mulai menulis plug-in."

Buka /resources/js/imageCrop/jquery.imagecrop.js dan tambahkan kode berikut.

Kami telah hanya diperpanjang jQuery dengan menambah properti fungsi baru jQuery.fn objek. Sekarang kita memiliki yang sangat dasar plug-in yang iterates atas setiap objek dan menempel imageCrop ketika objek dimuat. Perhatikan bahwa cache gambar tidak menjalankan load kadang-kadang, jadi kami reset src atribut untuk memperbaiki masalah ini.


Langkah 4. Menambahkan pilihan disesuaikan

Memungkinkan untuk kustomisasi pilihan membuat plug-in jauh lebih fleksibel bagi pengguna.

Kami memiliki sebuah array dengan pilihan default ditetapkan, kemudian bergabung dengan pilihan kustom dengan memanggil fungsi setOptions. Mari kita pergi lebih jauh dan menulis body fungsi ini.

Fungsi $.extend() menyatu isi dari dua atau lebih objek bersama-sama ke dalam obyek yang pertama.

Pilihan

Daftar berikut ini menjelaskan setiap opsi plug-in.

  • allowMove - menentukan jika pilihan dapat dipindahkan (nilai default true).
  • allowResize - menentukan jika pilihan dapat diubah ukurannya (nilai default true).
  • allowSelect - menunjukkan jika pengguna dapat membuat pilihan baru (nilai default true).
  • minSelect - ukuran luasan minimal untuk mendaftarkan pilihan baru (nilai default adalah [0, 0]).
  • outlineOpacity - opacity garis besar (nilai default adalah 0,5).
  • overlayOpacity - overlay opacity (nilai default adalah 0,5).
  • selectionPosition - posisi pilihan (nilai default adalah [0, 0]).
  • selectionWidth - lebar pilihan (nilai default adalah 0).
  • selectionHeight - seleksi tinggi (nilai default adalah 0).

Langkah 5. Menyiapkan layer

Pada langkah ini, kita akan memodifikasi DOM untuk mendapatkan siap untuk langkah berikutnya: interface plug-di itu.

Layers overviewLayers overviewLayers overview

Pertama, kita akan menginisialisasi layer gambar.

Sekarang menginisialisasi holder gambar.

Seperti yang Anda lihat, layer pemegang memiliki ukuran yang sama sebagai gambar dan posisi yang relatif. Selanjutnya, kita memanggil fungsi .wrap() untuk menempatkan gambar di dalam pemegang.

Di atas gambar akan menjadi lapisan overlay.

Lapisan ini adalah ukuran yang sama sebagai gambar, tetapi juga telah diberikan posisi absolute. Kami mendapatkan nilai untuk opacity dari options.overlayOpacity dan membiarkan jQuery menerapkannya. Elemen ini juga memiliki sebuah id, sehingga kami bisa merubah properti melalui plug-in yang stylesheet. Di bagian bawah, kita memanggil metode .insertAfter() untuk menempatkan layer overlay tepat setelah gambar.

Lapisan berikutnya adalah layer memicu; kami akan menempatkan setelah layer overlay, seperti yang kita lakukan dengan yang sebelumnya.

Warna latar belakang tidak benar-benar peduli tapi itu harus berbeda dari transparan (yang adalah secara default). layer ini tidak terlihat dari pengguna tetapi ini akan menangani beberapa event.

Kami akan menempatkan layer outline di atas layer trigger.

Dan akhirnya layer terakhir.

.Attr() metode mengembalikan nilai atribut yang ditetapkan. Kami menggunakannya untuk mendapatkan gambar src, dan mengaturnya sebagai latar belakang untuk lapisan seleksi.

Absolute Positioning dalam posisi relatif

Anda mungkin sudah tahu ini, tetapi sebuah elemen dengan posisi relatif menyediakan Anda dengan kontrol untuk benar-benar posisi elemen itu. Inilah sebabnya mengapa layer holder memiliki posisi yang relatif dan semua child yang posisi absolute.

Penjelasan yang sangat baik trik ini tercakup dalam artikel ini.


Langkah 6. Memperbarui antarmuka

Pertama, kita akan menginisialisasi beberapa variabel.

selectionExists akan menginformasikan kepada kami jika ada pilihan. selectionOffset akan berisi offset relatif terhadap gambar asal, dan selectionOrigin akan menunjukkan asal-usul selekasi. Hal ini akan lebih jelas setelah beberapa langkah.

Kondisi berikut ini diperlukan jika ada seleksi ketika plug-in load.

Selanjutnya kami akan memanggil fungsi updateInterface() untuk pertama kalinya untuk menginisialisasi antarmuka.

Kami akan menulis body fungsi ini segera. Sekarang, mari kita mengurus event pertama kami.

Kita memanggil .mousedown() jika options.allowSelect adalah true. Ini akan mengikat sebuah event handler acara mousedown layer trigger. Jadi, jika pengguna mengklik gambar, setSelection() akan dipanggil.

Fungsi pertama, getElementOffset(), mengembalikan kiri dan atas koordinat objek tertentu relatif terhadap dokumen. Kita telah diperoleh nilai ini dengan memanggil metode .offset(). fungsi Kedua, getMousePosition(), mengembalikan mouse saat ini posisi, tetapi relatif ke posisi gambar. Jadi, kami akan bekerja dengan nilai-nilai yang hanya antara 0 dan gambar lebar/tinggi di x/y-sumbu, masing-masing.

Mari kita menulis fungsi untuk memperbarui layer kami.

Fungsi ini memeriksa nilai dari variabel selectionExists, dan menentukan jika layer overlay harus ditampilkan atau tidak.

Fungsi updateTriggerLayer() perubahan kursor crosshair atau default, tergantung pada nilai options.allowSelect.

Selanjutnya, kita akan menulis fungsi updateSelection(). Ini akan memperbarui tidak hanya layer seleksi, tetapi layer outline juga.

Pertama, fungsi ini menset properti layer outline: kursor, layar, ukuran dan posisi. Berikutnya datang layer seleksi; nilai baru dari posisi latar belakang akan membuat gambar yang tumpang tindih mulus.

Sekarang, kita membutuhkan fungsi untuk memperbarui kursor bila diperlukan. Sebagai contoh, ketika kita membuat pilihan, kami ingin kursor crosshair pun layer yang kita adalah di atas tetap.

Ya, itu yang sederhana seperti kelihatannya. Hanya mengubah jenis kursor ke spesifik!

Dan sekarang, fungsi terakhir langkah ini; kita membutuhkannya untuk memperbarui plug-in yang antarmuka dalam situasi yang berbeda - pada memilih, pada Resize, melepaskan pemilihan, dan bahkan ketika menginisialisasi plug-in.

Seperti yang Anda lihat, fungsi updateInterface() filter beberapa kasus dan panggilan fungsi-fungsi penting yang kita baru saja tulis.


Langkah 7. Pengaturan pilihan

Sampai sekarang, kami merawat pilihan penyesuaian dan antarmuka, tetapi tidak berkaitan dengan bagaimana pengguna berinteraksi dengan plug-in. Mari kita menulis sebuah fungsi yang menetapkan pilihan baru ketika gambar diklik.

Pertama, fungsi setSelection memanggil dua metode: event.preventDefault() dan event.stopPropagation(). Hal ini mencegah aksi default dan setiap orangtua penangan dari memberitahu event. Metode .mousemove() mengikat sebuah event handler mousemove event. Ini akan memanggil fungsi resizeSelection() setiap kali pengguna menggerakkan mouse pointer. Untuk memberitahukan bahwa pilihan baru yang sedang dibuat, selectionExists variabel yang dibuat true dan ukuran pilihan diatur ke 0. Selanjutnya, kita mendapatkan asal pilihan dengan memanggil fungsi sebelumnya ditulis, getMousePosition(), dan memasukan dengan nilai options.selectionPosition. Akhirnya, kita memanggil fungsi updateInterface() untuk memperbarui antarmuka plug-in yang dibuat.


Langkah 8. Resize pemilihan

Di langkah sebelumnya, kami menulis fungsi untuk menetapkan pilihan baru. Mari kita sekarang menulis fungsi untuk mengubah pilihan itu.

Untuk mengubah ukuran pilihan, kita perlu mengambil posisi mouse saat ini. Karena nilai yang dikembalikan adalah relatif terhadap ukuran gambar, kita perlu untuk mengurus hanya nilai negatif. Itu tidak akan melebihi batas-batas gambar. Seperti yang Anda tahu, kita tidak bisa memiliki nilai negatif untuk properti width atau height dari elemen. Untuk memecahkan masalah ini, kami memangiil Math.abs() untuk mendapatkan nilai mutlak dan kemudian kita reposisi pemilihan.


Langkah 9. Melepaskan pemilihan

Dan sekarang fungsi akhir:

Ketika pemilihan dilepaskan, releaseSelection() fungsi menghapus sebelumnya terlampir event handlers fungsi setSelection() dengan memanggil metode .unbind(). Selanjutnya, ini update asal seleksi dan tes ukuran minimum yang diterima untuk pemilihan untuk ada.

Sekarang, kami hampir siap. Tutup file ini dan mempersiapkan langkah berikutnya.


Langkah 10. Styling Plug-In

Buka /resources/js/imageCrop/jquery.imagecrop.css stylesheet, dan tambahkan baris berikut.

Ada ada yang rumit di sini; kami telah menambahkan beberapa styling layer overlay dan outline.


Langkah 11. Pengujian hasil akhir

Untuk menguji kami plug-in, kita perlu pasangkan ke gambar. Mari kita melakukan itu dan mengedit halaman index.html.

Buka script tag...

... dan menulis kode JavaScript yang berikut.

Kami sudah terpasang kami plug-in gambar elemen dengan id example, dan mengatur beberapa opsi yang kustom. Kami menggunakan metode .ready() untuk menentukan ketika DOM sudah terisi penuh.

Plug-in previewPlug-in previewPlug-in preview

Dan hanya itu! Simpan file dan membuka browser Anda untuk menguji itu.


Selanjutnya

Sekarang kita memiliki gambaran dasar cropping jQuery plug-in yang memungkinkan kita untuk Pilih area gambar. Dalam tutorial berikutnya, kami akan menambahkan lebih banyak pilihan penyesuaian, membangun jendela pratinjau, menulis beberapa server-side scripting cropping gambar... dan banyak lagi. Saya harap Anda telah menikmati waktu kita telah menghabiskan waktu bersama dan menemukan tutorial ini berguna. Terima kasih sudah membaca!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.