Подтвердить что ты не робот

Загрузка gravatar с использованием jquery

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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 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 в листинге, вам, вероятно, лучше кодировать электронную почту на сервере, чтобы пользовательские электронные письма не были публично видны, если вы посмотрите на источник.

Ответ 2

проверьте мою скрипту, предоставляющую функцию

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>

Ответ 3

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

<script src="md5.js"></script>

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

<script>

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

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

</script>

Ответ 4

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

Затем вы можете установить атрибут image src с помощью jQuery следующим образом:

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