Ładowanie gravatar za pomocą jquery

Question

Po prostu próbuje utworzyć prosty formularz komentarza na blogu. Chcę załadować gravatar użytkownika (przy użyciu jQuery), gdy on/ona pisze to w skrzynce e-mail.

Jak mogę to zrobić?

Answer 1

gravatar url wygląda następująco:

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

Here are the rest of the options for the URL.

Więc masz zamiar zrobić to obejmować funkcję o nazwie md5, która zwraca hash md5 e-mail użytkownika. Istnieje wiele internetowych, które to robią, ale uważam, że https://github.com/blueimp/JavaScript-MD5/blob/master/README.md działa dobrze. Po tym, po prostu zrobić:

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

Myślałem, że to oczywiste, ale dodam go dla dobra potomności za:

Jeśli e-maile użytkowników są prywatne i jesteś pokazując ten ala-stackoverflow w wykazie, prawdopodobnie lepiej jest kodować wiadomość e-mail na serwerze, aby wiadomości e-mail użytkowników nie były publicznie widoczne, jeśli spojrzeć na źródło.

Answer 2

Wyjazd my fiddle realizowanie funkcji

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

Tylko dostarczanie e-mail jest obowiązkowe - reszta korzysta z wartości domyślnych.

Koniecznie także de facto standardem MD5-generator JS file od Joseph Myers z

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

Answer 3

Wow dzięki za tego posta. Ale jeśli masz własny pusty obraz i chcesz go użyć zamiast gravatar.

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

Answer 4

Najtrudniejszą częścią jest generowanie adresu URL za pomocą implementacji skrótu MD5, która jest oddzielna od jQuery. Zauważyłem, że biblioteka blueimp-md5 ma najwięcej gwiazdek z różnych pakietów MD5 na GitHub i jest prawie samowystarczalna (około 6kb minęło). Jeśli używasz węzła i/lub Browserify, to rozwiązanie może działać dobrze dla ciebie:

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

Następnie można ustawić zdjęcie src atrybut przy użyciu jQuery tak:

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