アバター変更機能を実装するJavaScript

アバター変更機能を実装するJavaScript

この記事では、アバター変更機能を実装するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Java BigInteger における mod と remainder の違いについて説明します。
  • Java ResultSet ケーススタディ
  • Java SDKのインストールと設定のケースの詳細な説明
  • Java BigDecimal の除算精度とフォーマットされた出力
  • Java DFA アルゴリズムのケーススタディ
  • Java高精度大数計算方法
  • Java での高精度除算、小数点以下 N 桁が必要
  • Java StackOverflowError の詳細な説明

<<:  Linux ファイル管理コマンド例の分析 [表示、閲覧、統計など]

>>:  MySQL ログイン エラーを解決する: 'ユーザー 'root'@'localhost' へのアクセスが拒否されました

推薦する

Mysql 5.7.17 をインストールした後、MySQL にログインするチュートリアル

mysql-5.7.17 のインストールについては記事の下部で紹介されているので、参考にしてください...

Dockerはプライベートライブラリイメージを完全に削除します

まず、インターネット上の一般的な慣行を見てみましょうデフォルトでは、プライベート ライブラリはイメー...

Angular のパフォーマンス最適化: サードパーティ コンポーネントと遅延読み込みテクノロジー

目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...

ネットワークセグメント内の IP アドレスに対する Nginx の接続制限設定の詳細な説明

Nginx におけるいわゆる接続制限は、実際には TCP 接続、つまり 3 ウェイ ハンドシェイク後...

line-height=height要素の高さだがテキストが垂直方向に中央揃えされない問題を解決する

まず、行の高さが要素の高さと等しい場合にテキストが垂直方向に中央揃えにならない理由を説明します。実際...

クールなバーコードエフェクトの作り方を教えます

声明:この記事では、Web ページ制作技術を使用して問題を包括的に解決するという考え方を反映して、W...

Nginxの書き換えモジュールの詳細な説明

書き換えモジュールは ngx_http_rewrite_module モジュールです。その主な機能は...

SQL文でのgroup byの使用について簡単に説明します

1. 概要Group by は、by の後の規則に従ってデータをグループ化することを意味します。いわ...

OpenShift のクイックインストールの詳細な手順

OpenShift 3.9 の最新バージョンを体験する最も早い方法。準備 [root@host ~]...

CocosCreator システムイベントがどのように生成され、トリガーされるかについての詳細な説明

目次環境まとめモジュール機能関連文書ソースコード分析CCGame.js CCInputManager...

抽選効果を実現するJavaScript

この記事では、宝くじマシンの効果を実現するためのJavaScriptの具体的なコードを参考までに共有...

Linux ソースコードからのソケット (TCP) バインドの詳細な説明

目次1. 最も単純なサーバー側の例2. バインドシステムコール2.1、inet_bind 2.2、i...

MySQLグループリンクの使用に関する詳細な説明

MYSQL におけるグループ化とリンクは、データベースの操作やデータのやり取りで最もよく使用される ...

mysql スケジュールタスク (イベント イベント) の詳細な説明

1. イベントの簡単な紹介イベントは、MySQL が特定の時間に呼び出す手続き型データベース オブジ...

テキストエリアの使用に関する注意事項

なぜテキストエリアについて具体的に言及するのでしょうか?なぜなら、textarea ノードは実際には...