Cargando gravatar usando jQuery

Question

Sólo tratando de cajón de un simple formulario de comentarios en un blog. Quiero cargar gravatar del usuario (usando jQuery) cuando él / ella 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>

Aquí están el resto de las opciones de la 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 / burbuja / maestro / README.md funciona bien. Después de eso, acaba de hacer:

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

Me pareció que 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, que son probablemente mejor que codifica el correo electrónico en el servidor para que los correos electrónicos de los usuarios no son visibles públicamente si nos fijamos en la fuente.

Answer 2

mi violín que proporciona la función

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

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

Asegúrese de incluir también el MD5-generador de archivos de JS-facto estándar de Joseph Myers con un

<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 utilizarlo 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 está separado de jQuery. Me encontré con que la blueimp-MD5 biblioteca tiene la mayoría de estrellas de los diversos paquetes MD5 en GitHub, y es más o menos autónomo (aproximadamente 6 kb miniaturizada). Si está utilizando nodo y / o Browserify, esta solución podría funcionar bien para que:

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

A continuación, puede establecer un atributo de imagen src usando jQuery como esto:

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