javascript - 转换 jquery ajax 调用的响应(需要处理 gravatar 的 404 错误)以将 gravatar 获取到图像源

Question

这是我的代码:

var hashEmail = md5.createHash(email);

$.get("http://www.gravatar.com/avatar/" + hashEmail + "?d=404")
                        .then(function(response) {
                            var data = 'data:image/jpeg;base64,' + response;
                            $('.result').html('<img src="' + data + '" class="img-circle"/><span class="username username-hide-mobile" ng-bind="'+ attributes.name +'"></span>'); 
                        }, function(response) {
                           return defaultProfileImage();
                        });

我得到的回复如下:

**

���%10JFIF�%01%01�%01�%01�����;创建者:gd-jpeg v1.0(使用 IJG JPEG v80)，质量 = 90��C �%03%02%02%03%02%02%03%03%03%03%04%03%03%04%05%08%05%05%04%04%05%07%07%06% 08%0C%0C%0C%0B%0B%0B%0E%12%10%0E%11%0E%0B%0B%10%16%10%11%13%14%15%15%15%0C% 0F%17%18%16%14%18%12%14%15%14…C%01%03%04%04%05%04%05%05%05%14%0B%14%14% 14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14% 14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%11 %08�P�P

**

我无法将此响应转换为图像源。我做错了什么吗？这是我已经尝试过的:

// var binaryData = [];

// binaryData.push(response);

// var img = new window.Image();

// img.src = window.URL.createObjectURL(response);

// scope.imageUrl = img.src;

// scope.imageUrl = (window.URL || window.webkitURL).createObjectURL(img);

// scope.imageUrl = window.btoa(unescape(encodeURIComponent(response)));

// let blob = new Blob([response], { type: 'image/jpeg' });

// scope.imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);

// scope.imageUrl = response;

// return scope.imageUrl;

还尝试使用 Angular $http 服务调用，但遇到 CORS 问题，因此有人建议使用 Jquery Ajax 调用

Answer 1

我通过使用 FileReader API 和 XMLHttpRequest 成功解决了此类问题

var hashEmail = md5.createHash(email);

toImageUri('https://www.gravatar.com/avatar/' + hashEmail + '?d=404', function(imgDataUri){
             $('.result').html('<img src="' + imgDataUri + '" class="img-circle"/>'); 
    });

    function toImageUri(url, callback){
       var xhr = new XMLHttpRequest();
           xhr.responseType = 'blob';
           xhr.onload = function() {
               var reader  = new FileReader();
               reader.onloadend = function () {
               callback(reader.result);
           }
              reader.readAsDataURL(xhr.response);
          };
            xhr.open('GET', url);
            xhr.send();
    }

如果您确实需要纯 jQuery 解决方案，请查看此链接 https://github.com/acigna/jquery-ajax-native