在很多应用场景中，我们需要根据用户的邮箱地址来展示他们的头像，尤其是在聊天应用、社交平台等中，头像是用户个性化展示的重要部分。本文将介绍如何通过两种常见的头像服务来实现这一功能：QQ 邮箱头像 和 Gravatar。

1. 背景介绍

  • QQ 邮箱头像：QQ 邮箱用户可以通过他们的邮箱地址直接获取一个头像。QQ 提供了一个头像获取 API，用户只需要通过邮箱的 QQ 号码即可访问头像。

  • Gravatar：Gravatar 是一种全球通用的头像系统，用户可以通过邮箱地址注册并关联一个头像。当用户在某个网站使用相同的邮箱时，网站可以自动显示 Gravatar 头像。

2. 功能实现

我们将使用 JavaScript 编写一个简单的网页应用，输入邮箱地址后可以获取并显示该邮箱对应的头像。对于 QQ 邮箱，我们将使用 QQ 的头像 API；对于 非 QQ 邮箱，我们将使用 Gravatar 服务。

3. 代码解析

以下是获取邮箱用户头像的完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取邮箱用户头像示例 (QQ & Gravatar)</title>
    <style>
        body {
            font-family: sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        img {
            border: 1px solid #ccc;
            padding: 5px;
            margin-top: 20px;
            max-width: 100px; /* 控制图片大小 */
            height: auto;
        }
        #avatarUrl {
            word-break: break-all; /* 防止长链接溢出 */
        }
        .error {
            color: red;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>
<body>

    <h1>获取邮箱用户头像 (QQ & Gravatar)</h1>

    <p>输入一个邮箱地址，然后点击按钮获取其头像。本示例支持 QQ 邮箱和 Gravatar 服务。</p>
    <p>对于非 QQ 邮箱，会尝试通过 Gravatar 获取。如果该邮箱未注册 Gravatar，将显示默认图案。</p>

    <div>
        <label for="emailInput">邮箱地址:</label>
        <input type="text" id="emailInput" value="test@qq.com" size="30">
        <button id="getAvatarButton">获取头像</button>
    </div>

    <h2>头像预览:</h2>
    <img id="avatarImage" src="" alt="用户头像">

    <h2>头像 URL:</h2>
    <p><span id="avatarUrl"></span></p>
    <p id="errorMessage" class="error"></p>

    <script>
        function getQQAvatarUrl(email) {
            if (!email || !email.toLowerCase().endsWith('@qq.com')) {
                return "";
            }
            const qqNumber = email.split('@')[0];
            if (!/^\d+$/.test(qqNumber)) return "";
            return `https://q1.qlogo.cn/g?b=qq&nk=${qqNumber}&s=100`;
        }

        function getGravatarUrl(email, size = 100, defaultImage = 'identicon') {
            if (!email) return "";
            const cleanEmail = email.trim().toLowerCase();
            const md5Hash = CryptoJS.MD5(cleanEmail).toString();
            return `https://www.gravatar.com/avatar/${md5Hash}?s=${size}&d=${defaultImage}`;
        }

        function getAvatarUrl(email) {
            const qqAvatarUrl = getQQAvatarUrl(email);
            if (qqAvatarUrl) return qqAvatarUrl;
            return getGravatarUrl(email);
        }

        const emailInput = document.getElementById('emailInput');
        const getAvatarButton = document.getElementById('getAvatarButton');
        const avatarImage = document.getElementById('avatarImage');
        const avatarUrlSpan = document.getElementById('avatarUrl');
        const errorMessageSpan = document.getElementById('errorMessage');

        getAvatarButton.addEventListener('click', function() {
            const email = emailInput.value.trim();
            errorMessageSpan.textContent = "";

            if (email) {
                const avatarLink = getAvatarUrl(email);
                if (avatarLink) {
                    avatarImage.src = avatarLink;
                    avatarUrlSpan.textContent = avatarLink;
                    avatarImage.onerror = function() {
                        avatarImage.src = "";
                        avatarUrlSpan.textContent = "无法加载头像。URL: " + avatarLink;
                        errorMessageSpan.textContent = "无法加载该邮箱对应的头像。";
                    };
                    avatarImage.onload = function() {
                        errorMessageSpan.textContent = "";
                    };
                } else {
                    avatarImage.src = "";
                    avatarUrlSpan.textContent = "";
                    errorMessageSpan.textContent = "请输入有效的邮箱地址。";
                }
            } else {
                avatarImage.src = "";
                avatarUrlSpan.textContent = "";
                errorMessageSpan.textContent = "请输入邮箱地址。";
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            const defaultEmail = emailInput.value.trim();
            if (defaultEmail) {
                const avatarLink = getAvatarUrl(defaultEmail);
                if (avatarLink) {
                    avatarImage.src = avatarLink;
                    avatarUrlSpan.textContent = avatarLink;
                }
            }
        });
    </script>

</body>
</html>

4. 关键技术点

  • MD5 哈希：Gravatar 使用邮箱地址的 MD5 哈希来获取头像，因此我们需要计算邮箱地址的 MD5 值。这里使用了 crypto-js 库来计算哈希。

  • 头像 URL 生成：

    • QQ 邮箱：根据邮箱的前缀（即 QQ 号码），构建头像 URL。
    • Gravatar：使用 MD5 哈希和头像大小参数生成头像 URL。

5. 错误处理与用户提示

我们在头像加载过程中添加了错误处理，如果头像无法加载（例如邮箱对应的头像不存在或出现网络问题），会显示相关错误信息，提示用户可能的原因。

6. 实际应用

这种方式可以广泛应用于各种 Web 应用和系统，尤其适用于需要显示用户头像的场景。例如，社交网络、论坛、聊天应用等。

7. 总结

本文介绍了如何通过邮箱地址获取用户头像，使用了 QQ 邮箱头像 API 和 Gravatar 两种常见的服务。通过 JavaScript 和 MD5 哈希算法，我们可以轻松地实现这一功能，并通过简单的前端代码将其集成到网页中。