Cargando gravatar usando jquery

Question

Solo intento crear un formulario de comentario simple en un blog. Quiero cargar el gravatar del usuario (usando jQuery) cuando escribe esto en el buzón de correo electrónico.

¿Cómo puedo hacer eso?

Answer 1

La url gravatar se ve así:

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

Here are the rest of the options for the URL.

Así que todo lo que vas a tener que hacer es incluir un llamado MD5 función que devuelve el hash MD5 de correo electrónico del usuario. Hay muchos en línea que hacen esto, pero creo que https://github.com/blueimp/JavaScript-MD5/blob/master/README.md funciona bien. Después de eso, simplemente:

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

pensé que esto era obvio, pero voy a añadir que por el bien de la posteridad:

Si los correos electrónicos de los usuarios son privadas y que está mostrando esta ala-stackoverflow en un perfil, Probablemente sea mejor que codifique el correo electrónico en el servidor para que los correos electrónicos de los usuarios no sean públicamente visibles si mira la fuente.

Answer 2

la salida my fiddle que proporciona la función

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

proporcionando Sólo el correo electrónico es obligatoria - el resto utiliza los valores por defecto.

Asegúrese de incluir también el de-facto estándar MD5-generator JS file de Joseph Myers con

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

Answer 3

Wow gracias por este post. Pero si en caso de que tenga su propia imagen en blanco y desea utilizarla en lugar 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 difícil está generando la URL usando una implementación hash MD5, que es independiente de jQuery. Descubrí que la biblioteca blueimp-md5 tiene la mayor cantidad de estrellas de los diversos paquetes MD5 en GitHub, y es prácticamente autónoma (aproximadamente 6 kb minificado). Si está utilizando nodo y/o Browserify, esta solución podría funcionar bien para usted:

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

entonces se puede establecer una imagen src atributo usando jQuery así:

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