Caricamento di gravatar utilizzando jquery

Question

Sto solo cercando di creare un semplice modulo di commento su un blog.Voglio caricare il gravatar dell'utente (usando jQuery) quando lo scrive nella casella di posta elettronica.

Come lo posso fare?

Answer 1

L'URL di gravatar è simile al seguente:

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

Ecco le altre opzioni per l'URL.

Quindi tutto ciò che dovrai fare è includere una funzione chiamata md5 che restituisce l'hash md5 dell'e-mail dell'utente.Ci sono molti online che lo fanno, ma ci credo https://github.com/blueimp/JavaScript-MD5/blob/master/README.md funziona bene.Dopodiché, fai semplicemente:

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

Pensavo fosse ovvio, ma lo aggiungerò per il bene dei posteri:

Se le e-mail degli utenti sono private e stai mostrando questo ala-stackoverflow in un elenco, probabilmente faresti meglio a codificare l'e-mail sul server in modo che le e-mail degli utenti non siano visibili pubblicamente se guardi la fonte.

Answer 2

mio violino fornendo la funzione

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

che fornisce solo l'e-mail è obbligatoria -. Il resto utilizza i valori predefiniti

Assicurati di includere anche l'MD5-generatore di file JS de-facto standard da Joseph Myers con

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

Answer 3

Wow, grazie per questo post. Ma se nel caso in cui si dispone di una propria immagine vuota e si desidera utilizzarlo al posto del 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

La parte difficile sta generando l'URL utilizzando un'implementazione hash MD5, che è separato da jQuery. Ho trovato che il blueimp-md5 biblioteca ha il maggior numero di stelle dei vari pacchetti MD5 su GitHub, e è praticamente autosufficiente (circa 6kb minimizzato). Se si utilizza il nodo e / o Browserify, questa soluzione potrebbe funzionare bene per voi:

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

Quindi è possibile impostare un attributo dell'immagine src utilizzando jQuery in questo modo:

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