建国記念日が近づいています。JS を使用して、建国記念日風のアバターを生成する小さなツールを実装します。実装プロセスの詳細な説明

<div class="wrapper">
    <!-- ボックスを選択 -->
    <div class="main-box">
      <a class="prev" onClick='changeHat()'></a>
      <div class="main-img">
        <div id="コンテンツ">
          <キャンバスid='cvs'></キャンバス>
        </div>
      </div>
      <a class="next" onClick='changeHat()'></a>
    </div>
    <!-- グラフをエクスポート -->
    <img id='export-img' alt='建国記念日限定アバター' src='' crossorigin="anonymous"/>
    <!-- アクション ボタン -->
    <div class="操作-btns">
      <a class="upload-btn">
        <input id='upload' type='file' onchange='viewer()' style='opacity: 0;'/>
      </a>
      <a class="export-btn" onClick='exportFunc()'></a>
    </div>
  </div>
 <!-- テンプレート -->
  <div スタイル = '表示: なし'>
    <img id='img' src='' alt='' />
    <img class='hide' id='hat0' src='img/1.png' />
    <img class='hide' id='hat1' src='img/2.png' />
    <img class='hide' id='hat2' src='img/3.png' />
    <img class='hide' id='hat3' src='img/4.png' />
    <img class='hide' id='hat4' src='img/5.png' />
    <img class='hide' id='hat5' src='img/6.png' />
    <img class='hide' id='hat6' src='img/7.png' />
  </div>

体、
html{
    最小高さ: 100%;
    幅: 100%;
    ユーザー選択: なし;
    フォントサイズ: 18px;
}

.ラッパー{
    幅: 100%;
    高さ: 100%;
    最大幅: 620px;
    最大高さ: 800px;
    マージン: 0 自動;
    背景画像: url('../img/bg.png');
    背景繰り返し: 繰り返しなし;
    背景サイズ: 100% 100%;
    パディングトップ: 13em;
}

#エクスポート画像{
    表示:なし;
    マージン:0 自動;
    幅:250px;
    高さ:250px;
}

.メインボックス{
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの中央揃え: 中央;
}

.メインボックス.next,
.メインボックス.前へ{
    背景画像: url('../img/next.png');
    背景サイズ: 含む;
    境界線の半径: 50%;
    幅: 2.275rem;
    高さ: 2.275rem
}

.メインボックス.前へ{
    変換: 回転(180度)
}

.メインボックス .メイン画像 {
    マージン: 0.75rem;
    背景: #fff;
    境界線: .25rem 実線 #fbe6b5;
    境界線の半径: .75rem;
    フォントサイズ: 0
}

＃コンテンツ {
    境界線の半径: .5rem;
    位置: 相対的;
    幅：9.5rem;
    高さ：9.5rem;
    左マージン: 50%;
    変換: translateX(-50%);
    オーバーフロー: 非表示
}

.操作ボタン{
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの中央揃え: 中央;
    flex-direction: 列;
    上マージン: .75rem
}

.操作ボタン .アップロードボタン {
    幅: 11.6rem;
    高さ：3.6rem;
    背景サイズ: 100% 100%;
    背景画像: url('../img/upload.png')
}

.操作ボタン .エクスポートボタン {
    表示: なし;
    幅: 11.6rem;
    高さ：3.75rem;
    背景サイズ: 100% 100%;
    背景画像: url('../img/export.png')
}

let canvasFabric; // Canvas インスタンス let hat = "hat0"; // 現在のテンプレートクラス
let hatInstance; // テンプレート レイヤー インスタンス const screenWidth = document.getElementById("content").scrollHeight; // コンテンツ ボックスの高さ

関数ビューア() {
  // アップロードされた画像ファイルを取得します。const file = document.getElementById("upload").files[0];
  // 画像を表示するために必要なタグを取得します。const img = document.getElementById("img");
  // ファイルオブジェクトを読み取るためのファイルを作成します。const reader = new FileReader();
  if (ファイル) {
    //ファイルをBase64に変換する
    reader.readAsDataURL(ファイル);
    // ファイルが正常に読み込まれたときにトリガーされます reader.onload = () => {
      // 画像を表示するタグに base64 URL を割り当てます。img.src = reader.result;
      // 画像の読み込み完了トリガー img.onload = () => img2Cvs(img);
    }
  } それ以外 {
    画像ソース = ""
  }
}

npm インストール ファブリック --save

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>

関数 img2Cvs(img) {
   // キャンバスを取得して表示し、キャンバスのサイズを画像のサイズに設定します。const cvs = document.getElementById("cvs");
    cvs.width = img.width;
    cvs.height = img.height;
    cvs.style.display = "ブロック";
   
   // キャンバスを作成し、その位置と背景画像を設定します。canvasFabric = new fabric.Canvas("cvs", {
      幅: 画面幅、
      高さ: 画面幅、
      背景画像: 新しい fabric.Image(img, {
        スケールX: 画面幅 / 画像幅、
        スケールY: 画面幅 / 画像の高さ
      })
    });
   // スイッチテンプレート changeHat();
  // 画像のアップロードボタンを非表示にして、画像のダウンロードボタンを表示します。 document.getElementsByClassName("upload-btn")[0].style.display = "none";
    document.getElementsByClassName("export-btn")[0].style.display = "ブロック";
  }

関数changeHat() {
   // 現在のテンプレートを非表示にします document.getElementById(hat).style.display = "none";
   // すべてのテンプレートを取得します。const hats = document.getElementsByClassName("hide");
    hat = "hat" + (+hat.replace("hat", "") + 1) % hats.length;
   // 現在のテンプレートを取得して表示します const hatImage = document.getElementById(hat);
    hatImage.style.display = "ブロック";
   // レイヤーがすでに存在する場合は削除します if (hatInstance) {
      キャンバスファブリックを削除します。
    }
   // 現在のテンプレートをレイヤーオブジェクトとして追加する hatInstance = new fabric.Image(hatImage, {
      上: 0,
      左: 0,
      スケールX: スクリーン幅 / ハットイメージ幅、
      スケールY: screenWidth / hatImage.height、
      コーナーカラー: "#0b3a42",
      コーナーストロークカラー: "#fff",
      コーナースタイル: "円",
      transparentCorners: false、
      回転ポイントオフセット: 30
    });
   // レイヤーオブジェクトを非伸縮可能に設定する hatInstance.setControlVisible({
       mt: 誤り、 
       mb: 偽、 
       ml: 偽、 
       mr: 間違いです、 
       bl: 誤り、 
       br: 誤り、 
       tl: 誤り、 
       tr: 偽、 
       mtr: 偽、 
    })
   // レイヤーをキャンバスに追加します canvasFabric.add(hatInstance);
  }

関数 exportFunc() {
  // 選択ボックス、アップロードおよびダウンロード ボタン、キャンバスを非表示にします。 document.getElementsByClassName("main-box")[0].style.display = "none";
  document.getElementsByClassName("operation-btns")[0].style.display = "なし";
  document.getElementById("cvs").style.display = "なし";

  // キャンバスから URL を生成し、表示用の対応するタグに割り当てます。const exportImage = document.getElementById("export-img");
  exportImage.style.display = "ブロック";
  exportImage.src = canvasFabric.toDataURL({
    幅: 画面幅、
    高さ: 画面幅
  });
  // 生成された画像をダウンロードします window.confirm("アバターをダウンロードしますか") ? download(exportImage.src, "ナショナルデーアバター", 'image/png') : void 0
}