获取 Gravatar 图像 - Javascript

Gravatar 是一个用于全球使用的头像服务，只需在 Gravatar 网站上注册账号并上传头像，而后在使用 Gravatar 的网站上，只需输入注册时所使用的电子邮件地址，即可自动获得头像。

这里提供一种在 Javascript 中通过 Gravatar API 获取头像的方法。首先，我们需要知道在 Gravatar 中头像的获取方式，其中最常用的方式是通过邮件地址的 MD5 值进行获取。

步骤

1. 导入 crypto-js 库

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/core.min.js" integrity="sha512-KNwb+TJalbNfNmRGEcy+PIO/r2Jj9zje1868ZnUCfSS3YmLAjJ+xwGm8jNxVVJeb3eWKjm6U5x6L8JrbPjFcCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/md5.min.js" integrity="sha512-jSEdoz3qU9KT6pBx6RZMsM+AkSlglJ71Qv8Fw6HcwI2uKwh27X9gVONHEEbvNcm7fYrKNcuTDxn7VQR8wCt34A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

2. 编写获取头像 URL 的函数

function getGravatarUrl(email, size) {
  const baseUrl = 'https://www.gravatar.com/avatar/';
  const md5Email = CryptoJS.MD5(email.trim().toLowerCase()).toString();
  const query = new URLSearchParams();
  query.set('s', size);
  query.set('d', 'mp'); // 默认头像
  return `${baseUrl}${md5Email}?${query.toString()}`;
}

其中，参数 email 和 size 分别表示邮件地址和头像大小。

3. 在页面上使用获取到的头像 URL

<img src="https://www.gravatar.com/avatar/0d81f0eff93fe49b6ba84c4055408e0c?s=200&d=mp" alt="user avatar">

这里的 URL 是通过调用 getGravatarUrl 函数获取到的。

总结

通过上述步骤，我们可以使用 Javascript 获取到 Gravatar 的头像 URL，并在需要的页面上使用。如果需要，我们也可以通过修改 getGravatarUrl 函数中的参数来实现更多样的效果。