‫-: Dalam video ini Anda akan belajar tentang pemrosesan
‫dan manipulasi gambar dengan Node JS, dan dalam
‫kasus khusus ini, kami
‫akan mengubah ukuran dan mengonversi gambar kami.
‫Jadi di mana-mana di antarmuka pengguna
‫kami, kami menganggap bahwa gambar yang diunggah adalah kotak.
‫Sehingga kita dapat
‫menampilkannya sebagai lingkaran seperti ini.
‫Jadi ini hanya berfungsi jika berbentuk
‫kotak, tetapi
‫tentu saja di dunia nyata pengguna jarang
‫mengunggah gambar berbentuk kotak.
‫Jadi tugas kita
‫sekarang adalah mengubah ukuran gambar menjadi persegi.
‫Baiklah, dan jadi di sini adalah bagaimana kita akan melakukannya.
‫Kami akan menambahkan middleware lain sebelum memperbarui saya dan
‫kemudian middleware itu akan
‫menangani pemrosesan gambar yang sebenarnya.
‫Baiklah, jadi sebenarnya mari kita lakukan di sini dalam
‫kode setelah yang
‫satu ini, karena mereka agak terhubung bukan?
‫Jadi, ekspor
‫titik, ubah ukuran foto pengguna.
‫Dan sebelum kita melanjutkan, mari
‫kita tambahkan middleware ini ke tumpukan middleware di
‫rute khusus ini.
‫Jadi itu di rute
‫pengguna, dan di sini tepat setelah
‫foto diunggah
‫di middleware ini, kami akan mengubah ukurannya.
‫Jadi ubah ukurannya, dan ini dia
‫pengontrol pengguna.
‫Baiklah.
‫Mari kita benar-benar
‫pergi ke sini dan kembali.
‫Jadi pada titik ini kami sudah
‫memiliki file atas permintaan kami.
‫Setidaknya jika ada yang diunggah, dan
‫jika tidak ada yang
‫diunggah, tentu kita tidak mau berbuat apa-apa.
‫Jadi itu berarti kita ingin pergi ke middleware berikutnya.
‫Jadi jika tidak ada
‫file pada permintaan maka segera kembali dan lanjutkan ke berikutnya.
‫Oke, tapi sebaliknya kita tentu saja ingin
‫melakukan pengubahan ukuran gambar itu.
‫Dan untuk itu, kita akan menggunakan paket sharp.
‫Baiklah.
‫Jadi, pertama-tama mari kita benar-benar menginstalnya.
‫Jadi MPM instal tajam Baiklah, dan
‫karena itu melakukan tugasnya, mari kita lanjutkan
‫dan letakkan di sini.
‫Begitu
‫tajam, dan membutuhkan, tajam.
‫Dan sharp adalah perpustakaan pemrosesan gambar
‫yang sangat bagus dan mudah digunakan untuk Node Js. Dan ada cukup
‫banyak hal yang dapat
‫kita lakukan dengannya.
‫Tapi di mana itu benar-benar bersinar
‫adalah untuk mengubah ukuran gambar dengan cara yang sangat sederhana.
‫Jadi, itulah yang kami cari di sini.
‫Baiklah.
‫Jadi, kita katakan sharp dan di sini pada
‫dasarnya kita perlu memasukkan file.
‫Sekarang, ketika melakukan pemrosesan gambar seperti
‫ini tepat setelah mengunggah
‫file, maka selalu yang terbaik untuk tidak
‫menyimpan file ke disk, tetapi menyimpannya ke memori.
‫Kami sudah membicarakannya sebelumnya,
‫jadi sekarang lakukan itu dalam praktik.
‫Oke, jadi untuk itu kita perlu
‫mengubah sedikit atau multer konfigurasi dan sebenarnya
‫hanya penyimpanan multer ini,
‫karena sekarang kita tidak lagi membutuhkan semua ini.
‫Dan alih-alih
‫multer storage, akan multer dot memory storage saja.
‫Dan seperti ini, oke?
‫Dan seperti yang saya
‫sebutkan sebelumnya, dengan cara ini gambar akan disimpan sebagai buffer.
‫Dan buffer itu kemudian tersedia di
‫request dot file dot buffer dan jadi ini cara yang lebih
‫efisien seperti ini, jadi daripada harus
‫menulis file ke disk dan kemudian membacanya
‫lagi di sini.
‫Kami hanya menyimpan gambar pada dasarnya dalam
‫memori dan kemudian di sini kami dapat membacanya, oke?
‫Bagaimanapun, memanggil fungsi sharp seperti
‫ini di sini kemudian akan membuat objek di mana
‫kita dapat menghubungkan beberapa metode untuk melakukan pemrosesan gambar kita.
‫Dan hal pertama yang akan kita lakukan adalah mengubah ukuran.
‫Jadi, ubah ukuran, lalu di sini kita bisa
‫menentukan lebar dan tinggi.
‫Jadi katakanlah 500 dan 500 jadi ingat kita
‫ingin gambar persegi, dan
‫tentu saja, tingginya harus sama
‫dengan lebarnya.
‫Sekarang ini akan
‫memotong gambar sehingga menutupi seluruh 500 kali 500 persegi.
‫Dan sebenarnya kita
‫bisa mengubah perilaku default ini jika kita mau.
‫Jadi, mari kita lihat
‫kembali dokumentasinya.
‫Jadi katakanlah, github sharp, tetapi sebenarnya situs web
‫mereka sendiri sedikit
‫lebih baik, sedikit lebih lengkap.
‫Jadi mari klik tautan itu di sini, dan kemudian di
‫sini kita bisa mengubah ukuran, yang sedang
‫kita lakukan sekarang dan
‫inilah yang baru saja saya bicarakan.
‫Baiklah, jadi default di sini adalah bahwa
‫gambar akan dipotong
‫untuk menutupi kedua dimensi yang disediakan.
‫Tapi kita juga bisa memilih isi, isi, di dalam, atau di luar.
‫Dan, kami akan melakukannya dengan mengatur opsi di sini.
‫Jadi kita bisa mengatur lebar, tinggi, dan kemudian sebagai
‫opsi ketiga, kita bisa mengatur
‫objek opsi ini di mana kita bisa menentukan kecocokannya.
‫Kami juga dapat menentukan posisi, yang secara
‫default berada di tengah.
‫Anda lihat bahwa ada banyak
‫hal yang benar-benar dapat kami definisikan untuk menyempurnakan
‫pemrosesan gambar kami.
‫Tetapi dalam hal ini, apa yang kita miliki sudah cukup.
‫Jadi mari kita lanjutkan ke langkah berikutnya.
‫Karena yang ingin saya lakukan
‫selanjutnya adalah mengonversi gambar selalu ke jpeg, oke?
‫Dan untuk itu, kami menggunakan
‫format, lalu jpeg.
‫Kami juga kemudian dapat menentukan kualitas jpeg ini.
‫Jadi pada dasarnya
‫untuk mengompresnya sedikit agar tidak
‫memakan banyak ruang dan untuk itu, kami menggunakan
‫metode jpeg, dan menetapkan opsi di objek ini dengan kualitas dan
‫katakanlah 90 persen di sini, oke?
‫Jadi setiap metode ke dalam barisnya sendiri di
‫sini itu jauh lebih bagus, tapi sebenarnya kita belum selesai.
‫Kami hampir selesai, tetapi tidak sepenuhnya.
‫Karena sekarang, pada
‫akhirnya, kami akhirnya ingin menulisnya ke file di disk kami.
‫Dan untuk itu, kita bisa menggunakan ke file,
‫sekarang metode ini di sini
‫sebenarnya membutuhkan seluruh path ke file.
‫Jadi pada dasarnya
‫gambar publik, garis miring, pengguna, dan
‫akhirnya di sini nama filenya, oke?
‫Jadi mari kita dapatkan itu sebenarnya
‫dari apa yang kita miliki di sini sebelumnya.
‫Karena tentu saja, kami ingin gambar kami
‫memiliki format yang serupa.
‫Baiklah, jadi mari kita salin itu.
‫Tapi sebenarnya saya tidak akan meletakkannya di sini.
‫Sebagai gantinya, saya benar-benar
‫akan menyimpannya untuk meminta nama file dot dot file.
‫Sekarang mengapa saya melakukannya seperti ini?
‫Yah itu karena sekarang nama
‫file ini tidak didefinisikan.
‫Jadi, ketika kita memutuskan untuk menyimpan gambar ke dalam memori sebagai buffer,
‫nama file tidak akan benar-benar diatur, tetapi kita benar-benar
‫membutuhkan nama file itu
‫di fungsi middleware kita yang lain, bukan?
‫Jadi itu di sini di perbarui saya di sini.
‫Jadi kita mengandalkan request dot file dot
‫file name untuk menyimpan nama file ke database kita, kan?
‫Dan sebenarnya, kita harus mendefinisikannya.
‫Jadi, sebelumnya tentu saja ditentukan oleh
‫multi-upload yang kami miliki, tetapi karena itu sudah
‫hilang sekarang, kami pada dasarnya harus mendefinisikan ulang di sini.
‫Oke?
‫Kemudian di sini, sebenarnya, kita dapat
‫menyingkirkan bagian ekstensi ini, karena kita sudah
‫tahu bahwa itu akan selalu berupa jpeg.
‫Karena ini untuk memformat, oke?
‫Jadi di sini, kita cukup meletakkan jpeg.
‫Jadi tidak perlu mendapatkan ekstensi file.
‫Dan sekarang
‫di sini, kita dapat menggunakannya.
‫Req dot file dot nama file, dan
‫hanya itu.
‫Oke?
‫Jadi yang perlu kita
‫lakukan sekarang untuk menyelesaikannya adalah memanggil middleware berikutnya di tumpukan.
‫Dan itu akan menjadi fungsi update me handler.
‫Jadi tentu saja, sekarang mari kita benar-benar mengujinya.
‫Jadi, kita tidak lagi membutuhkan yang satu ini.
‫Mari datang ke Postman, dan
‫sekarang pengguna yang
‫ingin saya perbarui disebut arrav, saya pikir.
‫Mari kita lihat data kami dengan sangat cepat.
‫Jadi ya, jadi ini adalah gambar non-persegi yang akan
‫kita unggah sekarang dan sebenarnya Anda
‫melihat ukurannya di sini
‫yaitu 1000 kali 1500, dan kemudian mari kita
‫bandingkan dengan gambar yang telah
‫kita ubah ukurannya.
‫Baiklah.
‫Omong-omong, sekarang mari kita dapatkan nama
‫untuk arrav Sebenarnya kita tidak perlu, mereka selalu
‫sama jadi arrav seperti ini, jadi mari kita masuk.
‫Sehingga kami dapat memperbaruinya
‫dan Anda melihat bahwa sekarang adalah gambar di sini adalah pengguna 11.
‫Dan hanya untuk melihatnya sedikit
‫lebih baik, mari kita benar-benar
‫memperbarui, mari kita benar-benar masuk, ke dalam aplikasi web kita menggunakan
‫pengguna itu.
‫Jadi uji satu, dua, tiga, empat.
‫Baiklah, jadi itu adalah gambar saat ini dan
‫sekarang mari kita lanjutkan dan perbarui itu.
‫Pilih file, dan inilah gambar kita buka
‫itu dan mari kita lihat apa yang terjadi.
‫Dan kita sudah selesai.
‫Itu sebenarnya sangat cepat,
‫jadi mari kita lihat apakah itu benar.
‫Yah setidaknya nama di sini tampaknya benar.
‫Jika kita melihat pengguna kita sekarang di sini, itu di
‫tempat umum, atau di sini.
‫Jadi yang seharusnya bukan
‫itu.
‫Dan sebenarnya itu tidak bisa ditemukan.
‫Mari kita reload, ah, dan
‫ini dia.
‫Sekarang, itu dia.
‫Jadi Anda lihat sekarang 500 kali 500
‫jauh lebih kecil
‫di sini, jadi 55 dibandingkan dengan 315 yang kita miliki sebelumnya.
‫Jadi itu jauh
‫lebih baik, dan seperti yang akan Anda lihat di
‫sini, sekarang juga harus diperbarui di sini.
‫Dan itu sempurna.
‫Jadi wajah sebenarnya tepat di tengah sini.
‫Jadi pengubahan ukuran itu benar-benar berjalan agak sempurna.
‫Dingin.
‫Dan saya harap Anda
‫akan menemukan kegunaan untuk pemrosesan gambar
‫semacam ini dalam aplikasi Anda sendiri juga.
‫Jadi hanya untuk cepat rekap apa yang kita lakukan di sini.
‫Nah kami membuat fungsi middleware baru
‫yang akan berjalan tepat setelah
‫foto benar-benar diunggah.
‫Dan unggahan itu sekarang benar-benar
‫terjadi pada buffer dan tidak lagi langsung ke sistem file.
‫Benar?
‫Dan itulah mengapa kami menggunakan penyimpanan memori
‫ini di sini, tetapi tentu saja filter multipel
‫ini masih berfungsi.
‫Jadi kita tetap hanya bisa mengupload gambar, oke?
‫Jadi di sini, di middleware itu, kami menempatkan
‫nama file gambar itu berdasarkan
‫permintaan nama file dot file dot sehingga
‫kami dapat menggunakannya dalam pembaruan saya.
‫Baiklah, dan kemudian di sini kita memiliki
‫pemrosesan gambar yang sebenarnya itu sendiri.
‫Dimana pertama kita resize menjadi persegi
‫kemudian diformat menjadi jpeg
‫dengan kualitas 90 persen, dan terakhir kita
‫tuliskan file tersebut ke dalam file system
‫kita ke folder yang sama persis dengan yang kita tentukan juga sebelumnya.
‫Baiklah, jadi begini cara kerjanya ketika
‫Anda membutuhkan pemrosesan
‫gambar, tetapi jika Anda tidak
‫membutuhkannya, tentu saja Anda dapat terus menggunakannya, oke?
‫Dan itu sangat penting bahwa kita
‫belajar bagaimana melakukannya
‫dengan dua cara di sini.
‫Baiklah, selanjutnya di video berikutnya
‫kita akan benar-benar membuat formulir ini di sini
‫berfungsi sehingga kami dapat mengunggah foto
‫pengguna langsung dari sini.