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

<link rel="スタイルシート" href="/assets/lib/cropper/cropper.css" />

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

<!-- 最初の行の画像の切り抜きとプレビュー領域 -->
   <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>

/* カード本体領域の幅を設定します */
 
.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%;
}

$(関数() {
    // 1.1 トリミング領域の DOM 要素を取得します。var $image = $('#image');
    // 1.2 設定オプション const options = {
        // アスペクト比 aspectRatio: 1,
        //プレビュー領域を指定します preview: '.img-preview'
    };
 
    // 1.3 切り抜き領域を作成する$image.cropper(options);
})

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

// 変更イベントをファイル選択ボックスにバインドします // 選択されたファイルが変更されるたびに変更イベントがトリガーされます $('#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) // 切り抜き領域を再初期化します})

// クリックイベントを確定ボタンにバインドします$('#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('アバターを正常に変更しました!');
                ウィンドウの親からユーザー情報を取得します。
            }
 })