2009-04-01 16 views

risposta

48

L'url gravatar assomiglia a questo:

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

Here are the rest of the options for the URL.

Quindi tutto quello che sta andando ad avere a che fare è includere una funzione chiamata MD5 che restituisce l'hash md5 di posta elettronica dell'utente. Ci sono molti online che fanno questo, ma credo che lo https://github.com/blueimp/JavaScript-MD5/blob/master/README.md funzioni bene. Dopo di che, basta fare:

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

Ho pensato che questo era ovvio, ma vorrei aggiungere che per amore dei posteri:

Se le email degli utenti sono privati ​​e si sta mostrando questa ala-StackOverflow in un profilo, probabilmente stai meglio codificando l'e-mail sul server in modo che le e-mail degli utenti non siano pubblicamente visibili se guardi all'origine.

+3

Ti salverò un google search: http://www.webtoolkit.info/javascript-md5.html –

+1

quindi c'è un problema con l'utilizzo di javascript per caricare gravatars, perché non è una buona idea per l'output dei tuoi utenti email e client hash md5 –

+0

@Sander Versluys : Non ci sono problemi se lo carichi da una casella di testo appena l'utente inserisce la sua email. –

4

check out my fiddle fornendo la funzione

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

fornendo solo l'e-mail è obbligatoria - il resto utilizza i valori predefiniti.

Assicurarsi di includere anche la de-facto standard MD5-generator JS file da Joseph Myers con

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

Ho provato quel violinista e non ha funzionato . – erm3nda

1

Wow, grazie per questo post. Ma se nel caso hai la tua immagine vuota e vuoi usarla 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('[email protected]') + '?default=' + encodeURIComponent(GetRootDomain() + '/Content/images/nopic-small.png'); 

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

</script> 
0

La parte difficile sta generando l'URL utilizzando un'implementazione di hash MD5, che è separata da jQuery. Ho scoperto che la libreria blueimp-md5 ha il maggior numero di stelle dei vari pacchetti MD5 su GitHub ed è praticamente autosufficiente (circa 6kb minified). 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'immagine src attributo utilizzando jQuery come questo:

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