この記事では、アバター変更機能を実装するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 最も重要なことは、jQueryプラグインcropperを使用することです 1. 基本的な使用手順1. <head> に cropper.css スタイルシートをインポートします。 <link rel="スタイルシート" href="/assets/lib/cropper/cropper.css" /> 2. <body> の終了タグの前に、次の js スクリプトを順番にインポートします。 <script src="/assets/lib/jquery.js"></script> <!-- クロッパー js スクリプトをインポートします --> <script src="/assets/lib/cropper/Cropper.js"></script> <script src="/assets/lib/cropper/jquery-cropper.js"></script> 3. 次の HTML 構造を定義します。 <!-- 最初の行の画像の切り抜きとプレビュー領域 --> <div class="row1"> <!-- 画像の切り抜き領域--> <div class="cropper-box"> <!-- この img タグは非常に重要で、将来的には切り取り領域として初期化されます --> <img id="画像" src="/assets/images/sample.jpg" /> </div> <!-- 画像プレビュー領域--> <div class="プレビューボックス"> <div> <!-- 幅と高さが 100 ピクセルのプレビュー領域 --> <div class="img-preview w100"></div> <p class="size">100 x 100</p> </div> <div> <!-- 幅と高さが 50 ピクセルのプレビュー領域 --> <div class="img-preview w50"></div> <p class="size">50 x 50</p> </div> </div> </div> <!-- 2行目のボタンエリア--> <div class="row2"> <button type="button" class="layui-btn">アップロード</button> <button type="button" class="layui-btn layui-btn-danger">OK</button> </div> 4. スタイルCSS: /* カード本体領域の幅を設定します */ .layui-カード本体{ 幅: 500ピクセル; } /* ボタン行のスタイルを設定します */ .行2 { ディスプレイ: フレックス; コンテンツの端揃え: flex-end; 上マージン: 20px; } /* クリッピング領域のスタイルを設定します */ .クロッパーボックス{ 幅: 350ピクセル; 高さ: 350ピクセル; 背景色: シアン; オーバーフロー: 非表示; } /* 最初のプレビュー領域のスタイルを設定します */ .w100 { 幅: 100ピクセル; 高さ: 100px; 背景色: グレー; } /* 2番目のプレビュー領域のスタイルを設定します */ .w50 { 幅: 50px; 高さ: 50px; 背景色: グレー; 上マージン: 50px; } /* プレビュー領域の下のテキストのスタイルを設定します */ 。サイズ { フォントサイズ: 12px; 色: グレー; テキスト配置: 中央; } /* 画像行のスタイルを設定します */ .行1 { ディスプレイ: フレックス; } /* プレビューボックス領域のスタイルを設定します */ .プレビューボックス{ ディスプレイ: フレックス; flex-direction: 列; フレックス: 1; アイテムの位置を中央揃えにします。 } /* img-preview 領域のスタイルを設定します */ .img プレビュー { オーバーフロー: 非表示; 境界線の半径: 50%; } 5. 独自の jS ファイルをインポートし、次のコンテンツを記述して基本的なトリミング効果を実現します。 $(関数() { // 1.1 トリミング領域の DOM 要素を取得します。var $image = $('#image'); // 1.2 設定オプション const options = { // アスペクト比 aspectRatio: 1, //プレビュー領域を指定します preview: '.img-preview' }; // 1.3 切り抜き領域を作成する$image.cropper(options); }) 上記の準備を完了すると、次の結果が得られます。 2. 切り取った画像を置き換える1. ファイルをアップロードするための入力ボックスを追加し、入力ボックスが非表示になっていることを確認します。 <!-- 2行目のボタンエリア--> <div class="row2"> <!-- accept 属性を使用して、ユーザーが選択できるファイルの種類を指定できます--> <input type="file" id="file" accept="image/png,image/jpeg" /> <button type="button" class="layui-btn" id="btnChooseImage">アップロード</button> <button type="button" class="layui-btn layui-btn-danger" id='btnUpload'>OK</button> </div> 2. ファイル選択ボックスに変更イベントをバインドする // 変更イベントをファイル選択ボックスにバインドします // 選択されたファイルが変更されるたびに変更イベントがトリガーされます $('#file').on('change', function(e) { // ユーザーが選択したファイルを取得します。var filelist = e.target.files; ファイルリストの長さが 0 の場合 return layer.msg('写真を選択してください!'); } // 1. ユーザーが選択したファイルを取得します。var file = e.target.files[0]; // 2. ファイルをパスに変換します var imgURL = URL.createObjectURL(file); // 3. クリッピング領域 $image を再初期化する .cropper('destroy') // 古い切り抜き領域を破棄します。attr('src', imgURL) // 画像パスをリセットします。cropper(options) // 切り抜き領域を再初期化します}) 3. クリックイベントを確認ボタンにバインドする // クリックイベントを確定ボタンにバインドします$('#btnUpload').on('click', function() { // 1. ユーザーの切り取られたアバターを取得するには var dataURL = $image .cropper('getCroppedCanvas', { // Canvas を作成する canvas width: 100, 高さ: 100 }) .toDataURL('image/png') // Canvas キャンバス上のコンテンツを base64 形式の文字列に変換します // 2. アバターをサーバーにアップロードするためのインターフェースを呼び出します $.ajax({ メソッド: 'POST'、 url: '/my/update/avatar', データ: { アバター: dataURL }, 成功: function(res) { res.status が 0 の場合 return layer.msg('アバターの変更に失敗しました!'); } layer.msg('アバターを正常に変更しました!'); ウィンドウの親からユーザー情報を取得します。 } }) 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux ファイル管理コマンド例の分析 [表示、閲覧、統計など]
>>: MySQL ログイン エラーを解決する: 'ユーザー 'root'@'localhost' へのアクセスが拒否されました
目次1. シナリオ2. 解決策3. 結論4. 参考文献1. シナリオ日常の開発およびテスト作業には ...
最近、webpackの使い方を学んでいたときに、webpack-replace-loaderの設定正...
まあ、あなたはデザインの達人かもしれませんし、あるいはそれは大げさすぎるかもしれませんが、少なくとも...
問題: vue-cil3 は、`--fix` オプションで修正できる可能性のある警告とともに実行され...
この記事では、async/await がすべての JavaScript 開発者にとって非同期プログラ...
この記事では、角を丸くするためのjsキャンバスの具体的なコードを参考までに紹介します。具体的な内容は...
序文多くの友人は Mac コンピューターを持っていないと言っていますが、Windows 開発は実際に...
導入いつものように、シーンから始めましょう〜インタビュアー:「トランザクションの4つの特性をご存知で...
この記事では、ショッピングカート決済機能を実現するためのVueの具体的なコードを例として紹介します。...
この記事では、例を使用して MySQL の悲観的ロックと楽観的ロックについて説明します。ご参考までに...
SQL クエリ ステートメントの実行順序は次のとおりです。 (7)選択 (8) DISTINCT &...
1. Vimの公式ウェブサイトにアクセスして、オペレーティングシステムに適した実行ファイルをダウンロ...
*******************HTML言語入門(パート2)*****************...
単方向リンク リストは、先頭から末尾、または末尾から先頭への方向のみを走査できます。そのため、単方向...
1. MMMの紹介: MMM は、Multi-Master Replication Manager...