Avatar Generator API

Übersicht

Der Avatar Generator erstellt einzigartige, deterministische Avatare basierend auf E-Mail-Adressen. Jede E-Mail-Adresse erzeugt immer denselben Avatar, was perfekt für Benutzerprofile, Kommentarsysteme oder andere Anwendungen ist, wo visuelle Benutzeridentifikation benötigt wird.

Features

• Deterministisch: Gleiche E-Mail = gleicher Avatar
• Keine Datenspeicherung erforderlich
• SVG-Format für perfekte Skalierung
• Anpassbare Größe
• Einfache Integration über URL
• Automatisches Caching für Performance

Schnellstart

Einfachste Verwendung

Fügen Sie einfach diese URL als Bildquelle ein:

<img src="https://playground.enjyn.de/avatars/?email=user@example.com" alt="Avatar">

Mit angepasster Größe

<img src="https://playground.enjyn.de/avatars/?email=user@example.com&size=128" alt="Avatar">

Live-Beispiele

alice@example.com

bob@example.com

charlie@example.com

diana@example.com

API-Referenz

Endpunkt

GET https://playground.enjyn.de/avatars/

Parameter

Response

Die API gibt ein SVG-Bild zurück mit den folgenden Headern:

Content-Type: image/svg+xml
Cache-Control: public, max-age=31536000
ETag: [hash basierend auf E-Mail und Größe]

Integrationsbeispiele

<!-- Einfaches Bild -->
<img src="https://playground.enjyn.de/avatars/?email=user@example.com" 
     alt="Benutzer Avatar"
     width="64" 
     height="64">

<!-- Mit Fallback -->
<img src="https://playground.enjyn.de/avatars/?email=user@example.com" 
     alt="Benutzer Avatar"
     onerror="this.src='fallback-avatar.png'">

<!-- Als Profilbild -->
<div class="profile">
    <img class="avatar" 
         src="https://playground.enjyn.de/avatars/?email=user@example.com&size=128" 
         alt="Profilbild">
    <span>Max Mustermann</span>
</div>

/* Als CSS Background */
.user-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-image: url('https://playground.enjyn.de/avatars/?email=user@example.com&size=128');
    background-size: cover;
    background-position: center;
}

/* Mit Hover-Effekt */
.avatar-hover {
    transition: transform 0.2s ease;
}

.avatar-hover:hover {
    transform: scale(1.1);
}

// Avatar-URL generieren
function getAvatarUrl(email, size = 256) {
    const baseUrl = 'https://playground.enjyn.de/avatars/';
    const params = new URLSearchParams({
        email: email,
        size: size
    });
    return `${baseUrl}?${params}`;
}

// Avatar dynamisch laden
function loadAvatar(email, targetElement) {
    const img = new Image();
    img.src = getAvatarUrl(email, 128);
    img.alt = 'User Avatar';
    img.onload = () => {
        targetElement.appendChild(img);
    };
}

// Beispiel: Mehrere Avatare laden
const users = [
    'alice@example.com',
    'bob@example.com',
    'charlie@example.com'
];

users.forEach(email => {
    const container = document.createElement('div');
    const img = document.createElement('img');
    img.src = getAvatarUrl(email, 64);
    img.alt = email;
    container.appendChild(img);
    document.body.appendChild(container);
});

// Avatar Component
const Avatar = ({ email, size = 64, className = '' }) => {
    const avatarUrl = `https://playground.enjyn.de/avatars/?email=${encodeURIComponent(email)}&size=${size}`;
    
    return (
        <img 
            src={avatarUrl}
            alt={`Avatar for ${email}`}
            width={size}
            height={size}
            className={`avatar ${className}`}
        />
    );
};

// Verwendung
function UserProfile({ user }) {
    return (
        <div className="user-profile">
            <Avatar email={user.email} size={128} />
            <h3>{user.name}</h3>
            <p>{user.email}</p>
        </div>
    );
}

// Mit Lazy Loading
const LazyAvatar = ({ email, size = 64 }) => {
    const [isLoaded, setIsLoaded] = useState(false);
    
    return (
        <div className="avatar-wrapper">
            {!isLoaded && <div className="avatar-skeleton" />}
            <img 
                src={`https://playground.enjyn.de/avatars/?email=${email}&size=${size}`}
                onLoad={() => setIsLoaded(true)}
                style={{ display: isLoaded ? 'block' : 'none' }}
            />
        </div>
    );
};

<?php
// Avatar-URL generieren
function getAvatarUrl($email, $size = 256) {
    $baseUrl = 'https://playground.enjyn.de/avatars/';
    $params = http_build_query([
        'email' => $email,
        'size' => $size
    ]);
    return $baseUrl . '?' . $params;
}

// In Template verwenden
$userEmail = 'user@example.com';
$avatarUrl = getAvatarUrl($userEmail, 128);
?>

<!-- HTML-Ausgabe -->
<div class="user-card">
    <img src="<?php echo htmlspecialchars($avatarUrl); ?>" 
         alt="Benutzer Avatar"
         class="avatar">
    <span><?php echo htmlspecialchars($userEmail); ?></span>
</div>

<!-- Für mehrere Benutzer -->
<?php
$users = [
    ['email' => 'alice@example.com', 'name' => 'Alice'],
    ['email' => 'bob@example.com', 'name' => 'Bob'],
];

foreach ($users as $user): ?>
    <div class="user-item">
        <img src="<?php echo getAvatarUrl($user['email'], 64); ?>" alt="">
        <span><?php echo htmlspecialchars($user['name']); ?></span>
    </div>
<?php endforeach; ?>

Best Practices

Performance

• Nutzen Sie die passende Größe - laden Sie keine 512px Avatare für 32px Anzeige
• Die Avatare werden mit Cache-Headern ausgeliefert - Browser cachen automatisch
• Verwenden Sie Lazy Loading für lange Listen

Sicherheit

• E-Mail-Adressen werden nur zur Avatar-Generierung verwendet
• Keine Speicherung von E-Mail-Adressen auf dem Server
• HTTPS wird empfohlen für sichere Übertragung

Barrierefreiheit

• Verwenden Sie immer aussagekräftige alt-Attribute
• Avatare sollten nicht die einzige Identifikation sein
• Ergänzen Sie Avatare mit Textnamen für Screenreader

Fehlerbehandlung

Mögliche Fehler

Fallback-Strategie

<img src="https://playground.enjyn.de/avatars/?email=user@example.com" 
     onerror="this.src='https://via.placeholder.com/128?text=Avatar'"
     alt="Avatar">

support@enjyn.de

Zum Avatar Generator