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 ; CREATOR: 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% 0 C% 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% 01% 14С% 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% 08PP

**

Я не смог преобразовать этот ответ в качестве источника изображения. Я что-то делаю неправильно? Вот что я уже пробовал:

// var binaryData = [];

// binaryData.push (response);

// var img = новое окно.Image();

// img.src = window.URL.createObjectURL (ответ);

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

Также попытался с вызовом угловой $ службы 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