jquery - 使用 jquery 加载 gravatar

Question

只是想在博客上创建一个简单的评论表单。当他/她在电子邮件框中写这个时，我想加载用户的 gravatar（使用 jQuery）。

我怎样才能做到这一点？

Answer 1

gravatar 网址如下所示：

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));

我认为这很明显，但为了后代，我会添加它：

如果用户电子邮件是私人的，并且您在列表中显示此 ala-stackoverflow，则最好在服务器上对电子邮件进行编码，以便在查看源时用户电子邮件不公开可见。

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>

Answer 3

哇感谢这篇文章。但是，如果您有自己的空白图像并且想要使用它而不是 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('yourmail@gmail.com') + '?default=' + encodeURIComponent(GetRootDomain() + '/Content/images/nopic-small.png');

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

</script>

Answer 4

棘手的部分是使用与 jQuery 分离的 MD5 哈希实现生成 URL。我发现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;
}

然后你可以src像这样使用 jQuery 设置图像属性：

var email = "someone@example.com";
$("#image").attr("src", gravatar(email));