使用jquery加载gravatar

Question

我只是试图在博客上创建一个简单的评论表单。当用户在电子邮件框中写入时，我想要使用jQuery加载用户的Gravatar。

我该怎么做？

- Tim Skauge

Answer 1

Gravatar的URL看起来像这样：

http://www.gravatar.com/avatar/<md5hashofemail>

这里是获取URL的其余选项。

所以你需要做的就是包含一个名为md5的函数，该函数返回用户电子邮件的md5哈希值。有许多在线工具可以实现此功能，但我认为https://github.com/blueimp/JavaScript-MD5/blob/master/README.md很好用。之后，只需执行以下操作：

// get the email
var email = $('#email').val();
// -- maybe validate the email? 

// create a new image with the src pointing to the user's gravatar
var gravatar = $('<img>').attr({src: 'http://www.gravatar.com/avatar/' + md5(email)});
// append this new image to some div, or whatever
$('#my_whatever').append(gravatar);

// OR, simply modify the source of an image already on the page
$('#image').attr('src', 'http://www.gravatar.com/avatar/' + md5(email));

我觉得这是显而易见的，但为了后人着想，我会补充一下：

如果用户的电子邮件是私有的，并且您正在像stackoverflow一样在列表中显示它们，那么最好在服务器上对电子邮件进行编码，以便在查看源代码时不会公开显示用户电子邮件。

- Paolo Bergantino

---

因此，在使用JavaScript加载Gravatars时存在问题，因为在客户端输出用户的电子邮件和MD5哈希值并不是一个好主意。 - Sander Versluys

@Sander Versluys：如果您只是在用户输入电子邮件时从文本框中加载它，则不会出现问题。 - Mehrdad Afshari

@Paolo - 正如 @Mehrdad 所说，如果您正在从用户在文本框中输入的电子邮件生成哈希，则没有问题。但如果您要将其用于在公共可见页面上显示 Gravatars，则会面临更大的问题。例如，如果论坛使用此功能在帖子旁边显示Gravatars，则可以查看源代码并查看每个人的电子邮件地址。 - russau

谢谢，这刚刚为我省了大量的谷歌搜索。我正在使用它来预览注册表单上的 Gravatar。 - Colonel Sponsz

根据 https://en.gravatar.com/site/implement/hash/，您应该在电子邮件上使用 'trim' 和 'strtolower'/'toLower'/等函数来生成一致的哈希值。 - Aoi Karasu

这是一篇不错的文章，链接在此：http://itsolutionstuff.com/post/how-to-get-gravatar-image-from-email-using-jqueryexample.html - Chirag Khatsuriya

Answer 2

请查看我提供的功能示例代码

get_gravatar_image_url (email, size, default_image, allowed_rating, force_default)

只需要提供电子邮件地址是必填项 - 其他内容使用默认值。

一定要包括来自Joseph Myers的事实标准MD5生成器JS文件。

<script src="http://www.myersdaily.org/joseph/javascript/md5.js"></script>

- AlexGrafe

Answer 3

麻烦的部分是使用MD5哈希实现生成URL，这与jQuery分开。我发现blueimp-md5库在GitHub上的各种MD5包中拥有最多的星标，并且它几乎是自包含的（大约6kb压缩）。如果您正在使用Node和/或Browserify，则此解决方案可能非常适合您：

var md5 = require("blueimp-md5");
function gravatar(email){
  var base = "http://www.gravatar.com/avatar/";
  var hash = md5(email.trim().toLowerCase());
  return base + hash;
}

然后，您可以使用jQuery设置图像的src属性，如下所示：

var email = "[e-mail]";
$("#image").attr("src", gravatar(email));

- curran

Answer 4

哇，感谢您的这篇文章。但是如果您有自己的空白图像，并且想要使用它来替代Gravatar。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.12.0"><script>

<img id="image" src="images/mydefault.png" />

<script>

    var src = 'http://www.gravatar.com/avatar/' + 
                  md5('[e-mail]') + '?default=' + encodeURIComponent(GetRootDomain() + '/Content/images/nopic-small.png');

    $('#image').attr('src', src);

</script>

- jayson.centeno

---

对于未来查找此答案的人，上述详细信息中未包含'md5.js'。我知道这是13年的事情，但如果您能更新它并提供'md5.js'的来源，那将有助于其他人。 - Zac Grierson