node.js＆transloaditを使用してユーザーアバターコンポーネントを構築します

{{/if}}

ユーザー名を含む隠されたフィールドが含まれていることに注意してください。これをリクエストで送信して送信します。これにより、テンプレートで使用できます。

JavaScriptを追加して、JSONハンドルバーヘルパーを使用していくつかの可変初期化から始めます。

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

これは、以前に見た最小限の統合初期化よりも複雑ですので、一度に少しずつ見てみましょう。

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

SIG変数からパラメーションと署名を引き込み、サーバーで生成し、JSONとしてエンコードしました。パラメーション部分はネストされているため、json.parse（）を使用してオブジェクトに戻し、そこからtransloaditが関連するパラメーターを抽出します。

プラグインの初期化では、待機がtrueに設定されています。つまり、両方のファイルがアップロードされるまで待機します

と

それらは処理されました。

アセンブリ通知を使用して - 高度な使用法セクションで後で読むことができます - は、ファイルを処理するのを必ずしも待つ必要がないことを意味します。その場合、falseまで待機することができます。 フィールドは、処理用のファイルを送信する際に追加情報を含めたいことをプラグインに伝えるためにTrueに設定されています。私たちの場合、これはUsernameという名前の隠されたフォームフィールドです。これを認証されたユーザーのユーザー名に入力します。

TriggeruploadonFileselectionは、フォームが送信されたときではなく、ユーザーがファイルを選択したとすぐにファイルをTransLoaditに送信するために使用されます。 AutoSubmitは、結果がTransloaditから戻ってきたら、フォームの送信を防ぎます。

データがTursLoaditから戻ってきたときにOnSuccessのコールバックが起動され、アセンブリにデータがハッシュします。

アセンブリオブジェクトには、結果プロパティが含まれており、「ステップ」のそれぞれのプロパティが含まれます。これらには、ファイルオブジェクトの配列が含まれています。 1つのファイルのみをアップロードしているため、単一のアイテムを含む配列になります。各ファイルオブジェクトには、元のファイル名、メタ情報、TransLoaditからの一意のID、その他のビットとピースなど、多くのプロパティが含まれています。情報の全範囲を確認するには、コンソールにログアウトして見てみることができます。しかし、私たちが本当に興味を持っているのは、S3の生成された画像のURLを含むURLプロパティだけです。

対応するデリバティブの名前で3つのURLを抽出し、3つのデリバティブと対応するURLのハッシュを作成しています。 ユーザーに視覚的なフィードバックを提供するために、サムネイルのURLをつかみ、ページ上のアバターを変更して、新しく提供された画像を表示します。

最後に、Ajaxを使用して、そのデータを黙ってアプリケーションに戻します。

このデータをキャプチャするアバタールートは次のとおりです

生産中、おそらくこれを消毒して検証したいと思うでしょう。

ご覧のとおり、デリバティブ画像とそのURLのハッシュを取り、現在認証されているユーザーをReq.Userからつかみ、アバタープロパティを提供されたハッシュに設定し、ユーザーモデルを更新します。

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

これは、1つの可能なアプローチにすぎません。フィードバックをすばやくするには、プラグインのOnResultコールバックを使用して、3つのデリバティブすべてを待つのではなく、生成されるとすぐにサムネイルを取得することをお勧めします。クライアントコードからAJAXコールを使用してサーバーを通知する代わりに、代わりに、クライアントの実行を続けるのではなく、アセンブリを背景に実行するという追加の利点を提供するアセンブリ通知機能を使用することをお勧めします。オプションの全範囲については、プラグインドキュメントを参照してください。

それは基本的なアプリケーションを締めくくります。忘れないでください、認証メカニズムを含むすべてのソースはGitHubで終わりました。

Advanced使用法

締めくくる前に、Transloaditのより高度な側面のいくつかを簡単に見てみましょう。

その他のクライアント側オプション

提供されたjQueryプラグインを使用する必要はありません。ドキュメントのコミュニティプロジェクトのセクションでは、ブートストラップ用のプラグイン、ドラッグN ’ドロップ用のプラグイン、角度のあるプラグイン、またはプレーンな古いXHRのサポートなど、多くの代替品を見つけることができます。

XHRは、より詳細に検討する価値があるかもしれません。これは、十分な柔軟性を提供する裸のボーンソリューションであり、独自のフィードバックを提供する必要があります。たとえば、ある種のアップロードインジケーターです。また、ファイルをアップロードしたら、1000msの間隔でサーバーを投票することによってアセンブリがいつ完了したかを判断しようとすることも注目に値します。

通知

ユーザーにアップロードが処理されるのを待つのではなく、ファイルの準備ができたら、通知を使用してアプリケーションをpingすることができます。このアプローチを使用して、ユーザーはアップロードが完了するまで待機する必要があります。

通知は、消費者の視点から簡単に実装できます。アセンブリの指示にnotify_urlを含めるだけです。

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

URLがTursLoaditによってpingされると、JSONが提供するJSONには、通知が実際にそれらから来たことを確認するために使用できる署名フィールドが含まれます。 Auth Secretを使用して署名をデコードするだけです

開発中は、アセンブリ通知をテストするためにこのプロキシパッケージを利用するか、ngrokなどのトンネルサービスを使用することをお勧めします。

要約

この2部構成のシリーズでは、ファイル処理サービスであるTransloaditを包括的に見ています。 パート1では、いくつかの利点と短所を経験し、重要な概念を調べました。

この部分では、手を汚し、jQuery、node.js、expressを使用してシンプルなユーザーアバターコンポーネントを構築しました。

JQueryに制限されていません。実際、バニラJavaScriptソリューションまたはお気に入りのフレームワークを自由に使用できます。クライアント側のアプリケーションから使用する必要さえありません。また、サーバー側のテクノロジーに関しては、幅広いオプションがあります。うまくいけば、あなたは今、それが画像処理にどのように使用できるかについて感謝しています。

プロジェクトでTransLoaditを使用していますか？より良いサービスを知っていますか？コメントでお知らせください。

node.jsのユーザーアバターコンポーネントに関するよくある質問（FAQ） transloaditを使用してnode.jsでのアバターの外観をカスタマイズするにはどうすればよいですか？

node.jsでのアバターの外観をTursloaditでカスタマイズするには、アセンブリの指示のパラメーターを変更することが含まれます。アバターのサイズ、形、色を変更できます。たとえば、サイズを変更するには、「サイズ変更」パラメーターを調整します。形状を変更するには、「作物」パラメーターを使用します。 「透かし」と「テキスト」パラメーターをそれぞれ使用して、アバターに透かしまたはオーバーレイテキストを追加することもできます。 ？

実際のアプリケーションでユーザーアバターコンポーネントを実装するには、アプリケーションのユーザー登録またはプロファイルの更新プロセスに統合することが含まれます。ユーザーがプロファイルを登録または更新すると、TrussLoaditを使用してユーザーの詳細に基づいてアバターを生成できます。その後、データベースにアバターのURLを保存し、ユーザーのアバターを表示するために必要な場所に使用できます。 Transloaditには、アセンブリでエラーイベントをリッスンすることが含まれます。アセンブリプロセス中にエラーが発生した場合、TransLoaditは「エラー」イベントを発生します。このイベントを聞いて、適切に処理できます。たとえば、エラーを記録したり、ユーザーに通知したり、アセンブリを再試行したりすることをお勧めします。はい、TransLoaditはクラウドベースのサービスであり、Python、Ruby、PHP、とジャバ。これらのAPIを使用して、trusloaditを非node.jsアプリケーションに統合できます。 Transloaditには、アセンブリの指示を微調整し、リソースを効果的に管理することが含まれます。たとえば、生成されたアバターのサイズを縮小して、帯域幅とストレージスペースを節約できます。また、Transloaditの「Auto_retry」機能を使用して、アバター生成プロセスの信頼性を改善できる故障したアセンブリを自動的に再試行することもできます。

テストユーザーのアバターコンポーネントには、アセンブリの指示のための単体テストと、アプリケーションのTransLoaditとの統合の統合テストを作成することが含まれます。この目的のために、MochaやJestなどのテストフレームワークを使用できます。モックサービスを使用して、テスト中にトランスロードの動作をシミュレートすることもできます。アセンブリとTransLoadit APIキーの保護。 Transloaditの「署名認証」機能を使用して、認定されたクライアントのみがアセンブリを作成できるようにすることができます。また、TrussLoadit APIキーを安全に保存し、クライアント側のコードでそれらを公開しないでください。汎用性の高いメディア処理サービスと、ユーザーアバター生成以外の幅広いタスクをサポートしています。画像とビデオの処理、ファイルのアップロードなどに使用できます。単一のアセンブリで複数のタスクを連鎖させて、複雑なメディア処理ワークフローを作成することもできます。 TransLoaditでは、アセンブリで進行状況のイベントをリッスンすることが含まれます。 Transloaditは、アセンブリプロセス中に定期的に「進行状況」イベントを発します。これらのイベントを聞いて、アプリケーションのUIを更新して現在の進捗を反映できます。trusNoloaditでユーザーアバター生成プロセスをスケーリングするには、複数のアセンブリを使用し、トランスロードの使用量を効果的に管理することが含まれます。複数のアセンブリを作成してアバターを並行して処理できます。これにより、スループットが大幅に増加する可能性があります。また、Transloaditの使用量を監視し、必要に応じて計画を調整して、アプリケーションの負荷を処理するのに十分な能力があることを確認する必要があります。

以上がnode.js＆transloaditを使用してユーザーアバターコンポーネントを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。