見事なグラデーションアバターを簡単に生成-jsチュートリアル-php.cn

見事なグラデーションアバターを簡単に生成

Susan Sarandon

リリース： 2025-01-04 19:09:39

オリジナル

672 人が閲覧しました

皆さん、Simplr はこちらです!

私たちはまた別のオープンソースプロジェクトを携えて戻ってきました。これを皆さんと共有できることを非常に楽しみにしています。今回は、ビジュアルアイデンティティとユーザー表現がすべてです: @simplr-sh/avatar。 Web アプリケーション用に美しいグラデーションベースのアバターを生成するシンプルかつエレガントな方法をお探しなら、ここが最適な場所です。

Web 開発の世界では、視覚的な一貫性とパーソナライズされたユーザーエクスペリエンスが最も重要です。その重要なコンポーネントはユーザーのアバターです。しかし、正直に言うと、アバター生成の処理は面倒な場合があります。プレースホルダー、スタイル、および潜在的に複雑なバックエンドロジックについて考える必要があります。だからこそ私たちは、プロセスをシームレスで楽しいものにする TypeScript ライブラリである @simplr-sh/avatar の作成に着手しました。

@simplr-sh/avatar を作成した理由

このプロジェクトのインスピレーションは、画像のアップロードや複雑な API を必要とせずに、シンプルかつエレガントなアバター生成方法を実現したいという願望から生まれました。私たちは、パフォーマンスが高く、カスタマイズ可能で、見た目も良いものを求めていました。アバターコンポーネントにおける Vercel チームの素晴らしい取り組みは大きな影響を与えたので、私たちも同様のソリューションを提供したいと考えましたが、テキストオーバーレイを備えたグラデーションベースのアバターに特に焦点を当てました。

Generate Stunning Gradient Avatars with Ease

@simplr-sh/avatar の特徴は何ですか?

@simplr-sh/avatar は、素晴らしいグラデーションベースのアバターを迅速に生成できるように設計された独自のライブラリです。主な機能を詳しく見てみましょう:

グラデーションベースのアバター: このライブラリの中心的な機能。 @simplr-sh/avatar は、指定された名前に基づいて各アバターに固有のグラデーション背景を生成します。これは、まったく同じに見えるアバターが 2 つ存在しないことを意味し、アプリに個性を加えます。
カスタマイズ可能なテキストオーバーレイ: ユーザーのイニシャルまたはその他の選択したテキストをグラデーションの背景の上に表示します。これにより、ユーザーをどのように表現するかがさらに柔軟になります。
簡単なカスタマイズ: サイズや丸み (境界線の半径) などの簡単なオプションを使用して、アバターの外観を調整できます。
TypeScript のサポート: ライブラリ全体が TypeScript で書かれているため、タイプセーフティが確保され、スムーズな開発エクスペリエンスが得られます。
Base64 SVG データ URI: ライブラリは、生成されたアバターを Base64 SVG データ URI として返します。これは、サーバーへの画像の保存や追加のネットワークリクエストの処理について心配する必要がないため、非常に便利です。アバターは HTML img タグで直接表示できるようになりました。

API の詳細: getAvatar(オプション)

@simplr-sh/avatar の中心となるのは getAvatar(options) 関数です。この関数はアバターの生成を担当し、非常に使いやすいです。ここで受け入れられるオプションを簡単に見てみましょう:

name (string): グラデーション背景の生成に使用されるユーザーの名前。
text (string): グラデーションの上にオーバーレイするテキスト (イニシャルなど)。
size (数値、オプション): アバターのサイズ (ピクセル単位)。デフォルトは 128 です。
rounded (数字、オプション): アバターの境界線の半径。円形、丸い、または正方形のアバターを作成できます。デフォルトは 0 です。

この関数は、生成されたアバターの Base64 SVG データ URI である文字列に解決される Promise を返します。

@simplr-sh/avatar の使用方法

バニラ JavaScript 環境と React 環境の両方で @simplr-sh/avatar を使用する方法を見てみましょう:

バニラの JavaScript の例

import { getAvatar } from '@simplr-sh/avatar';

(async () => {
  // Generate a simple avatar
  const avatar = await getAvatar({
    name: 'John Doe',
    text: 'JD',
    size: 128,
    rounded: 16,
  });

  // Use in HTML
  const img = document.createElement('img');
  img.src = avatar;
  document.body.appendChild(img);
})();

ログイン後にコピー

反応の例

import { useEffect, useState } from 'react';
import { getAvatar } from '@simplr-sh/avatar';

function Avatar({ name, text, size = 128, rounded = 16 }) {
  const [avatarSrc, setAvatarSrc] = useState<string>('');

  useEffect(() => {
    getAvatar({ name, text, size, rounded })
      .then(setAvatarSrc)
      .catch(console.error);
  }, [name, text, size, rounded]);

  return <img src={avatarSrc} alt={`Avatar for ${name}`} />;
}

// Usage
function App() {
  return <Avatar name="John Doe" text="JD" />;
}

ログイン後にコピー

帰属とオープンソース

このパッケージは、Vercel の Avatar リポジトリにある素晴らしい作品からインスピレーションを受けており、そこから適応されたコードが含まれています。 Web 開発コミュニティへの貢献に、私たちは心から感謝しています。

このプロジェクトは完全にオープンソースなので、ぜひ参加することをお勧めします。バグを見つけた場合、機能リクエストがある場合、またはコードに貢献したい場合は、お気軽にリポジトリをチェックアウトしてください: https://github.com/simplr-sh/avatar

はじめに

@simplr-sh/avatar を試してみませんか?インストール方法は次のとおりです: