この記事では、アバター変更機能を実装するための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' へのアクセスが拒否されました
mysql-5.7.17 のインストールについては記事の下部で紹介されているので、参考にしてください...
まず、インターネット上の一般的な慣行を見てみましょうデフォルトでは、プライベート ライブラリはイメー...
目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...
Nginx におけるいわゆる接続制限は、実際には TCP 接続、つまり 3 ウェイ ハンドシェイク後...
まず、行の高さが要素の高さと等しい場合にテキストが垂直方向に中央揃えにならない理由を説明します。実際...
声明:この記事では、Web ページ制作技術を使用して問題を包括的に解決するという考え方を反映して、W...
書き換えモジュールは ngx_http_rewrite_module モジュールです。その主な機能は...
1. 概要Group by は、by の後の規則に従ってデータをグループ化することを意味します。いわ...
OpenShift 3.9 の最新バージョンを体験する最も早い方法。準備 [root@host ~]...
目次環境まとめモジュール機能関連文書ソースコード分析CCGame.js CCInputManager...
この記事では、宝くじマシンの効果を実現するためのJavaScriptの具体的なコードを参考までに共有...
目次1. 最も単純なサーバー側の例2. バインドシステムコール2.1、inet_bind 2.2、i...
MYSQL におけるグループ化とリンクは、データベースの操作やデータのやり取りで最もよく使用される ...
1. イベントの簡単な紹介イベントは、MySQL が特定の時間に呼び出す手続き型データベース オブジ...
なぜテキストエリアについて具体的に言及するのでしょうか?なぜなら、textarea ノードは実際には...