Загрузка граватара с помощью jquery - PullRequest
Новая
       26

Загрузка граватара с помощью jquery

23 голосов
/ 01 апреля 2009

Просто пытаюсь написать простую форму комментария в блоге. Я хочу загрузить граватару пользователя (используя jQuery), когда он / она пишет это в ящик электронной почты.

Как я могу это сделать?

Ответы [ 4 ]

51 голосов
/ 01 апреля 2009

Граватарский 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));

Я думал, что это было очевидно, но я добавлю это для потомков:

Если пользовательские электронные письма являются частными, и вы показываете этот ala-stackoverflow в листинге, вам, вероятно, лучше кодировать электронную почту на сервере, чтобы электронные письма пользователей не были публично видны, если вы посмотрите на источник.

4 голосов
/ 26 июля 2013

проверить моя скрипка с функцией 

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

Обязательно указывать только электронную почту - для остальных используются значения по умолчанию.

Не забудьте также включить фактический стандартный файл JS-генератора MD5 от Джозефа Майерса с 

<script src="http://www.myersdaily.org/joseph/javascript/md5.js"></script>
1 голос
/ 07 ноября 2013

Ух, спасибо за этот пост. Но если у вас есть собственное пустое изображение, и вы хотите использовать его вместо граватара. 

<script src="md5.js"></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>
0 голосов
/ 04 мая 2016

Сложная задача - генерировать URL с помощью реализации хеширования MD5, которая отделена от jQuery. Я обнаружил, что в библиотеке blueimp-md5 больше всего звездочек из различных пакетов MD5 на GitHub, и она в значительной степени автономна (уменьшена до 6 КБ). Если вы используете 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));
...