アバター変更機能を実装する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' へのアクセスが拒否されました

推薦する

ホストサービスにアクセスするDockerでのサービスの実装

目次1. シナリオ2. 解決策3. 結論4. 参考文献1. シナリオ日常の開発およびテスト作業には ...

Webpack プロジェクトでローダー プラグインをデバッグする方法

最近、webpackの使い方を学んでいたときに、webpack-replace-loaderの設定正...

熟練デザイナーの7つの原則(1):フォントデザイン

まあ、あなたはデザインの達人かもしれませんし、あるいはそれは大げさすぎるかもしれませんが、少なくとも...

Vue プロジェクトを実行するときに `--fix` オプションで修正できる可能性のある警告のエラー問題を解決します。

問題: vue-cil3 は、`--fix` オプションで修正できる可能性のある警告とともに実行され...

Javascript における非同期待機の詳細な理解

この記事では、async/await がすべての JavaScript 開発者にとって非同期プログラ...

js キャンバスは角丸画像を実現します

この記事では、角を丸くするためのjsキャンバスの具体的なコードを参考までに紹介します。具体的な内容は...

Windows 10にOdoo12開発環境をインストールする方法

序文多くの友人は Mac コンピューターを持っていないと言っていますが、Windows 開発は実際に...

MySQLにおけるACIDトランザクションの実装原理の詳細な説明

導入いつものように、シーンから始めましょう〜インタビュアー:「トランザクションの4つの特性をご存知で...

Vueはショッピングカート決済機能をシミュレートします

この記事では、ショッピングカート決済機能を実現するためのVueの具体的なコードを例として紹介します。...

MySQL の悲観的ロックと楽観的ロックの理解と応用分析

この記事では、例を使用して MySQL の悲観的ロックと楽観的ロックについて説明します。ご参考までに...

SQLクエリの実行順序をゼロから学ぶ

SQL クエリ ステートメントの実行順序は次のとおりです。 (7)選択 (8) DISTINCT &...

Power Shell に vim 実装コード例を追加する方法

1. Vimの公式ウェブサイトにアクセスして、オペレーティングシステムに適した実行ファイルをダウンロ...

HTML チュートリアル、簡単に学べる HTML 言語 (2)

*******************HTML言語入門(パート2)*****************...

JavaScript データ構造 双方向リンクリスト

単方向リンク リストは、先頭から末尾、または末尾から先頭への方向のみを走査できます。そのため、単方向...