Đang tải gravatar bằng cách sử dụng jquery

Question

Chỉ cố gắng tạo một mẫu nhận xét đơn giản trên blog. Tôi muốn tải gravatar của người dùng (bằng cách sử dụng jQuery) khi anh/cô ấy viết này trong hộp thư điện tử.

Tôi có thể làm như thế nào?

Answer 1

Url gravatar trông như thế này:

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

Here are the rest of the options for the URL.

Vì vậy, tất cả các bạn sẽ phải làm là bao gồm một chức năng gọi là md5 mà trả về băm md5 của email của người dùng. Có rất nhiều trực tuyến làm điều này, nhưng tôi tin rằng https://github.com/blueimp/JavaScript-MD5/blob/master/README.md hoạt động tốt. Sau đó, chỉ cần làm:

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

Tôi nghĩ đây là hiển nhiên, nhưng tôi sẽ thêm nó vì hậu thế của:

Nếu email người dùng là tư nhân và bạn đang hiển thị này ala-stackoverflow trong một danh sách, có lẽ bạn nên tắt mã hóa email trên máy chủ để email của người dùng không hiển thị công khai nếu bạn nhìn vào nguồn.

Answer 2

séc ra my fiddle cung cấp các chức năng

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

Chỉ cung cấp email là bắt buộc - phần còn lại sử dụng các giá trị mặc định.

Hãy chắc chắn cũng bao gồm việc de-facto tiêu chuẩn MD5-generator JS file từ Joseph Myers với

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

Answer 3

Wow cảm ơn cho bài đăng này. Nhưng nếu trong trường hợp bạn có hình ảnh trống của riêng bạn và bạn muốn sử dụng nó thay vì 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

Phần khó khăn là tạo URL bằng cách thực hiện băm MD5, tách biệt với jQuery. Tôi thấy rằng thư viện blueimp-md5 có nhiều ngôi sao nhất trong số các gói MD5 khác nhau trên GitHub và nó khá độc lập (khoảng 6kb được giảm thiểu). Nếu bạn đang sử dụng Node và/hoặc Browserify, giải pháp này có thể làm việc tốt cho bạn:

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

Sau đó, bạn có thể thiết lập một hình ảnh src thuộc tính sử dụng jQuery như thế này:

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