ユーザープロファイルを生成する🧑👩‍💻

クライアント側のJavaScriptを使用してWebのユーザーアバターを生成する方法を見てみましょう.仕事のためのツールは、HTML 5キャンバスとデータURLを含みます🙂
これは、サーバー側に要求の量を削減し、結果としてロード時間を高速化⚡

ビデオチュートリアル

閉じるこの動画はお気に入りから削除されています.

ソースコード

長いコードに従うことを好むなら、ここにあります.

HTMLを書く

HTMLについては、我々は(最終的に)アバターを保持する単一のイメージタグが必要です.

<img id="avatar" alt="Avatar">

とJavaScript .

これは、表示するテキスト、フォアグラウンドの色と背景色を含むオプションのカップルを取る1つの関数で動作します.

function generateAvatar(text, foregroundColor, backgroundColor) {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");

    canvas.width = 200;
    canvas.height = 200;

    // Draw background
    context.fillStyle = backgroundColor;
    context.fillRect(0, 0, canvas.width, canvas.height);

    // Draw text
    context.font = "bold 100px Assistant";
    context.fillStyle = foregroundColor;
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillText(text, canvas.width / 2, canvas.height / 2);

    return canvas.toDataURL("image/png");
}

コードの最初のチャンクでは、キャンバスの標準手順を実行して、描画する2 Dコンテキストを取得する新しいキャンバスを作成します.
次に、幅と高さを同じ値に設定します.
この後、最初にアクティブな塗りつぶし色をコンテキストに設定し、背景を表す完全な幅の四角形によって背景を描画します.
次のテキストは、この1つだけでなく、フォントの家族を設定するだけでなく、テキストを中心に、垂直方向と水平方向に指示する.そして、それはfillTextを使ってキャンバスに描かれます.
そして、最後に、我々はキャンバス自体のためにPNGイメージのデータURLを返します.その後、関数を呼び出すと、srcタグの<img>属性にデータURLを置くことができます.

document.getElementById("avatar").src = generateAvatar("SP", "white", "#009578");

そして、我々が得るものは、ここにあります:

簡単に完了.これで、クライアント側でアバターイメージを生成することができます😎