Membina Komponen Avatar Pengguna dengan Node.js & Transloadit

{{/if}}

Perhatikan bahawa kami termasuk medan tersembunyi yang mengandungi nama pengguna. Kami akan menghantar ini ke transloadit dengan permintaan kami, supaya ia dapat digunakan dalam templat kami.

Sekarang tambahkan JavaScript, bermula dengan beberapa permulaan yang berubah -ubah menggunakan Helbars JSON Helper kami:

<span>var sig = {{{ json sig }}};</span>

Sekarang kita akan mengikat plugin transloadit ke borang muat naik:

<span>$(function() {
</span>  <span>$('#avatar-form').transloadit({
</span>    <span>wait: true,
</span>    <span>params: JSON.parse(sig.params),
</span>    <span>signature: sig.signature,
</span>    <span>fields: true,
</span>    <span>triggerUploadOnFileSelection: true,
</span>    <span>autoSubmit: false,
</span>    <span>onSuccess: function(assembly) {
</span>      <span>$('img#avatar').attr('src', assembly.results.thumbnail[0].url + '?' + (new Date()).getTime() );
</span>      <span>var derivatives = {
</span>        <span>thumbnail : assembly.results.thumbnail[0].url,
</span>        <span>medium : assembly.results.medium[0].url,
</span>        <span>large : assembly.results.large[0].url
</span>      <span>};
</span>      $<span>.ajax({
</span>        <span>type: 'post',
</span>        <span>url: '/avatar',
</span>        <span>data: derivatives,
</span>        <span>success: function(resp){
</span>          <span>console.log(resp);
</span>        <span>}
</span>      <span>})
</span>    <span>}
</span>  <span>});
</span><span>});</span>

Ini lebih kompleks daripada inisialisasi integrasi yang minimum yang kita lihat sebelumnya, jadi mari kita lalui sedikit demi sedikit.

Kami menarik dalam param dan tandatangan dari pembolehubah SIG, yang kami dihasilkan pada pelayan dan kemudian dikodkan sebagai JSON. Kerana bahagian param bersarang, kami menggunakan json.parse () untuk menukarnya kembali ke objek, dari mana transloadit akan mengekstrak parameter yang relevan.

Dalam inisialisasi plugin, tunggu ditetapkan kepada benar, yang bermaksud kita menunggu sehingga kedua -dua fail telah dimuat naik dan mereka telah diproses.

Menggunakan Pemberitahuan Perhimpunan - yang boleh anda baca kemudian di bahagian Penggunaan Lanjutan - bermakna anda tidak semestinya perlu menunggu fail diproses, dalam hal ini anda boleh menetapkan menunggu untuk palsu.

Fields ditetapkan untuk benar untuk memberitahu plugin bahawa kami ingin memasukkan maklumat tambahan apabila kami menghantar fail untuk diproses; Dalam kes kami itu adalah medan bentuk tersembunyi yang dinamakan Nama Pengguna, yang kami isi dengan nama pengguna pengguna yang disahkan.

TrigGeruploadonFileSelection digunakan untuk menghantar fail ke transloadit sebaik sahaja pengguna telah memilih fail, dan bukannya apabila borang diserahkan. Autosubmit menghalangnya daripada menyerahkan borang apabila hasilnya kembali dari transloadit, kerana kita akan melakukan itu secara manual.

Panggilan balik OnSuccess akan dipecat apabila data kembali dari transloadit, yang memberi kita hash data dalam perhimpunan.

Objek pemasangan mengandungi harta hasil, yang seterusnya mengandungi sifat untuk setiap "langkah" kami. Ini mengandungi pelbagai objek fail. Oleh kerana kami hanya memuat naik satu fail, mereka akan menjadi tatasusunan yang mengandungi satu item. Setiap objek fail mengandungi beberapa sifat termasuk nama fail asal, maklumat meta, ID unik dari transloadit dan bit dan kepingan lain. Untuk melihat pelbagai maklumat, anda mungkin ingin log masuk ke konsol dan lihat. Walau bagaimanapun, semua yang kita benar -benar berminat ialah harta URL, yang mengandungi URL imej yang dihasilkan pada S3.

Sebagai alternatif, anda mungkin ingin menggunakan harta SSL_URL, yang sama dengan URL tetapi lebih daripada https.

Kami hanya mengekstrak tiga URL dengan nama derivatif yang sepadan, kemudian mencipta hash tiga derivatif dan URL yang sepadan.

Untuk memberikan maklum balas visual kepada pengguna, kami juga merebut URL kecil dan mengubah suai avatar pada halaman untuk menunjukkan imej yang baru dimuat naik.

Akhirnya, kami menggunakan Ajax untuk menyiarkan data itu secara senyap -senyap kembali ke aplikasi kami.

inilah laluan avatar untuk menangkap data itu:

<span>var sig = {{{ json sig }}};</span>

Dalam pengeluaran, anda mungkin mahu membersihkan dan mengesahkan ini.

Seperti yang anda lihat, kami mengambil hash imej derivatif dan URL mereka, ambil pengguna yang disahkan sekarang dari Req.user, tetapkan harta Avatar ke hash yang disediakan dan kemudian mengemas kini model pengguna.

Ini hanya satu pendekatan yang mungkin. Untuk maklum balas yang lebih cepat, anda mungkin mahu menggunakan panggilan balik plugin untuk mendapatkan lakaran kecil sebaik sahaja ia dihasilkan, dan bukannya menunggu ketiga -tiga derivatif. Daripada menggunakan panggilan AJAX dari kod klien anda untuk memberitahu pelayan anda, anda mungkin lebih suka menggunakan ciri pemberitahuan pemasangan, yang memberikan manfaat tambahan untuk menjalankan perhimpunan di latar belakang, dan bukannya memegang pelaksanaan pada klien. Rujuk dokumentasi plugin untuk pelbagai pilihan.

yang menyimpulkan permohonan asas kami. Jangan lupa, semua sumber - termasuk mekanisme pengesahan - berakhir pada GitHub.

Penggunaan lanjutan

Sebelum kita membungkus, mari kita lihat dengan ringkas beberapa aspek transloadit yang lebih maju.

pilihan pihak klien lain

Anda tidak perlu menggunakan plugin jQuery yang disediakan. Di bahagian Projek Komuniti dokumentasi, anda akan menemui beberapa alternatif, termasuk plugin untuk Bootstrap, satu untuk Drag N 'Drop, plugin sudut atau sokongan untuk XHR lama biasa, antara lain.

XHR yang mungkin bernilai anda melihat dengan lebih terperinci. Ia adalah penyelesaian tulang-tulang yang menawarkan banyak fleksibiliti, sementara memerlukan anda memberikan maklum balas anda sendiri-contohnya beberapa jenis penunjuk muat naik. Ia juga perlu diperhatikan bahawa apabila ia telah memuat naik fail, ia cuba untuk menentukan apabila perhimpunan telah selesai dengan mengundi pelayan pada selang 1000ms.

Pemberitahuan

Daripada pengguna menunggu untuk muat naik mereka diproses, anda boleh menggunakan pemberitahuan untuk ping aplikasi anda apabila fail siap. Menggunakan pendekatan ini pengguna hanya perlu menunggu sehingga muat naik selesai.

Pemberitahuan mudah dilaksanakan dari pandangan pengguna; Cukup masukkan nota_url dengan arahan pemasangan anda, contohnya:

<span>var sig = {{{ json sig }}};</span>

Apabila URL anda mendapat ping dengan transloadit, JSON yang disediakan akan termasuk medan tandatangan yang boleh anda gunakan untuk mengesahkan bahawa pemberitahuan itu memang datang dari mereka. Cukup nyahkan tandatangan menggunakan rahsia auth anda.

Semasa pembangunan, anda mungkin ingin memanfaatkan pakej proksi ini untuk menguji pemberitahuan pemasangan anda, atau menggunakan perkhidmatan terowong seperti NGROK.

Ringkasan

Dalam siri dua bahagian ini, kami telah melihat penampilan yang komprehensif di transloadit, perkhidmatan pemprosesan fail.

Di bahagian pertama, kami melalui beberapa kelebihan dan kekurangan dan kemudian melihat konsep utama.

Bahagian ini, kami mendapat tangan kami kotor dan membina komponen avatar pengguna yang mudah menggunakan jQuery, node.js dan Express.

Anda tidak terhad kepada jQuery, dan sememangnya anda bebas menggunakan penyelesaian vanila JavaScript atau rangka kerja kegemaran anda. Anda tidak perlu menggunakannya dari aplikasi sisi klien, dan ketika datang ke teknologi sisi pelayan, anda mempunyai pelbagai pilihan. Mudah-mudahan, anda kini mendapat penghargaan bagaimana ia boleh digunakan untuk pengendalian imej.

adakah anda menggunakan transloadit dalam projek anda? Adakah anda tahu perkhidmatan yang lebih baik? Beritahu saya dalam komen.

Soalan Lazim (Soalan Lazim) Mengenai Komponen Avatar Pengguna dalam Node.js dengan Transloadit

bagaimana saya boleh menyesuaikan penampilan avatar dalam node.js dengan transloadit?

Menyesuaikan penampilan avatar dalam node.js dengan transloadit melibatkan mengubahsuai parameter dalam arahan pemasangan. Anda boleh menukar saiz, bentuk, dan warna avatar. Sebagai contoh, untuk menukar saiz, laraskan parameter 'saiz semula'. Untuk menukar bentuk, gunakan parameter 'tanaman'. Anda juga boleh menambah teks watermark atau overlay pada avatar dengan menggunakan parameter 'watermark' dan 'teks' masing-masing. ? Apabila pengguna mendaftar atau mengemas kini profil mereka, anda boleh menggunakan Transloadit untuk menghasilkan avatar berdasarkan butiran pengguna. Anda kemudian boleh menyimpan URL Avatar dalam pangkalan data anda dan menggunakannya di mana sahaja anda perlu memaparkan avatar pengguna. Transloadit melibatkan mendengar peristiwa ralat dalam perhimpunan anda. Jika ralat berlaku semasa proses pemasangan, Transloadit akan memancarkan peristiwa 'ralat'. Anda boleh mendengar acara ini dan mengendalikannya dengan sewajarnya. Sebagai contoh, anda mungkin mahu log ralat, memberitahu pengguna, atau mencuba semula perhimpunan.

Bolehkah saya menggunakan transloadit untuk penjanaan avatar pengguna dalam persekitaran bukan node.js? dan Java. Anda boleh menggunakan API ini untuk mengintegrasikan transloadit ke dalam aplikasi bukan node.js anda.

Bagaimana saya boleh mengoptimumkan prestasi generasi avatar pengguna dengan transloadit? Transloadit melibatkan penalaan halus arahan pemasangan anda dan menguruskan sumber anda dengan berkesan. Sebagai contoh, anda boleh mengurangkan saiz avatar yang dihasilkan untuk menjimatkan jalur lebar dan ruang penyimpanan. Anda juga boleh menggunakan ciri 'auto_retry' transloadit untuk mencuba semula perhimpunan yang gagal secara automatik, yang dapat meningkatkan kebolehpercayaan proses penjanaan avatar anda.

menguji komponen avatar pengguna melibatkan membuat ujian unit untuk arahan pemasangan dan ujian integrasi anda untuk integrasi aplikasi anda dengan Transloadit. Anda boleh menggunakan kerangka ujian seperti mocha atau jest untuk tujuan ini. Anda juga boleh menggunakan perkhidmatan mengejek untuk mensimulasikan tingkah laku transloadit semasa ujian.

Bagaimana saya dapat mengamankan proses penjanaan avatar pengguna dengan transloadit? Perhimpunan anda dan melindungi kunci API Transloadit anda. Anda boleh menggunakan ciri 'Pengesahan Tandatangan' Transloadit untuk memastikan bahawa hanya pelanggan yang diberi kuasa boleh membuat perhimpunan. Anda juga harus menyimpan kekunci API transloadit anda dengan selamat dan tidak pernah mendedahkannya dalam kod klien. Perkhidmatan pemprosesan media yang serba boleh dan ia menyokong pelbagai tugas selain generasi avatar pengguna. Anda boleh menggunakannya untuk pemprosesan imej dan video, memuat naik fail, dan banyak lagi. Anda juga boleh mengikat pelbagai tugas bersama dalam satu perhimpunan untuk membuat aliran kerja pemprosesan media yang kompleks. Dengan Transloadit melibatkan mendengar peristiwa kemajuan dalam perhimpunan anda. Transloadit memancarkan peristiwa 'kemajuan' secara berkala semasa proses pemasangan. Anda boleh mendengar acara ini dan mengemas kini UI aplikasi anda untuk mencerminkan kemajuan semasa.

Bagaimanakah saya dapat skala proses penjanaan avatar pengguna dengan transloadit? Anda boleh membuat pelbagai perhimpunan untuk memproses avatar secara selari, yang dapat meningkatkan throughput anda dengan ketara. Anda juga harus memantau penggunaan transloadit anda dan menyesuaikan pelan anda seperti yang diperlukan untuk memastikan bahawa anda mempunyai kapasiti yang mencukupi untuk mengendalikan beban aplikasi anda.

Atas ialah kandungan terperinci Membina Komponen Avatar Pengguna dengan Node.js & Transloadit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!