$ http.get从jpg到img [英] $http.get from jpg to img

问题描述

我正在尝试使用$ http.get加载一个图像，因为它稍后将来自服务器，而且我真的不知道该怎么做:/

I'm trying to load one image with $http.get because it'll later come from the server, and I dont really know what to do:/

我现在拥有的代码是:

在服务中，我会这样:

return $http.get('resources/mock-data/image.jpg', {
      headers: {
        'Content-Type': 'image/jpg'
      }
    });

这让我很高兴，它带有一个像这样的二进制数据:?JFIF ?(％！1！％)，... 383,7(-.+

that returns me a promisse, that comes with a binary data like this: ����JFIF��� ( %!1!%),...383,7(-.+

????，$& ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,、、、、、、 ... A?1AQ?aq 2 BRr.#3b $4S Ccst 5D .<！1AQ?''aq 2 3Br #$4b C R ? .Ԑ-o> vJ4?>aW.s̯. I.& s s?l.?Z..6- ...- r.Rh; T！T !?R[ Muw EKO Cً p (LJ...nUjul 5m v>} ԙҺʵ ڸ x c] +Ո($( ( ?s { g y 0 w' #^d kI> W?JpJQ ^ }: c g# G ^ 5N v< ҡ i fJ k ul 9 6zKe ٘ | Z ۭ W.) : j L qU x b 9RVg5(jI5A V \F \1 4 G9 (hhk9 #H + 1?s?Ȃ K @ { \ W)T]# m Ӕ U _ B=&a θx l ]nΛfX_2y8 Q 4\ ++O 0！~~ ̱t; K^ +5 _H ?UQ v k & ;; RV ó I.x ] 2ڟB.Ԑ％(@ ， ?E:5&.P {R IŘ R:8 |4 H 0XW? r 5 lg p Ǜ1 V 0 {'?C ʴ # M 〜͟ i >I ÿ 0 -} < 5 V JT v f3 b; Vg3? P@ @ !! ％/lk .S ᔂʘx ۵ 9 =p -- ٽm q E( K％ ]ż[w gѾ+％ m?l8 ^ Vn? !! @ қ

 ,$&,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,�������K!1AQ"aq��2���BRr�#3b����$4S���Ccst���5D������< !1AQ"aq�����2���3Br�#$4b�C����R��?��� Ԑ-�o>�vJ4�>�aW�s̯�����I�&��ϻ��sl���Z��.�6-���-�r�R�hK;���֮�T!� �k����R [�Muw�EKO����Cً����p��(LJ ���nUjul�5m�v>}�ԙҺʵ��ڸ��x��c]���+ Ո ($(����(�s{�g��y���0�w'���#^d�i�k I>�'WJpJQ������^�}:��c�g#�G�^��5N��v<�ҡ��i���fJ�k�ul��9����6zKe��٘|Zۭ��W��)�'�:�j�L�qU�x������b��9RVg5�� (jI5AV\F�\�1�4�G�� 9� (� h�k9�#H+��1�sȂ��K������@{�\�W)T]#��m�Ӕ�U��_��B=�&�a��Θx�l�]nΛfX_2y8���Q������4\�+�O��0!�~̱�t;�����K^�+��5������_H�UQ��v��k��&;������RV�ó�����I�x���]���2ڟB� Ԑ% (@�,��E:5&.P���{R���IŘ��R:8|4����ػ����H�0X W�r��5�l�g�G��p����l���Ǜ1���� �V���0�{'��� ��C�ʴ�#�M�~͟��i�>I�ÿ��0�-}����<��5�V��JT�v����f3�b;��Vg3����P@�@!�%/lk�S����ᔂʘx�۵�9�=p���-������ٽ��m�q��E(��K%�]ż[w�gѾ�+%�m�l8^�Vn���!@��қ��

那只是它的一部分...长度是12500 ...

that is just a part of it... it is 12500 of length...

在控制器上，我像这样解析为base64:

on the controller i get like this to parse to base64:

var base64 = 'data:image/jpg;base64,' + btoa(unescape(encodeURIComponent(image.data)))
  console.log(base64);
  $scope.fullImage = base64;

图像是被告的回应，数据是我上面放置的二进制文件的位置.

where the image is the response of the promisse, and data is where the binary i putted above is.

我的看法如下:

  <img ng-src="{{fullImage}}" class="coolin_home_full_image"/>

因此，任何人都对如何解决此问题有任何想法

so, anybody has any idea on how to fix this

推荐答案

我终于弄清楚了它是什么.

I finally figured out what was it.

我正在调用不带标题的$ http get，因此它没有返回给我bufferBuffer而是一个字符串，我用以下命令修复了该问题:

I was calling the $http get without the header, so it was not returning me a bufferArray but a string, i fixed with:

var deferred = $q.defer();
    var promise = deferred.promise;
    $http.get('resources/mock-data/image.jpg', {}, {
      headers: {
        'Content-Type': 'image/jpg'
      },
      responseType: 'blob'
    }).then(function(image) {
      var blob = new Blob([image.data], {
        type: 'image/jpeg'
      });
      var fr = new FileReader();
      fr.onload = function() {
        deferred.resolve(fr.result);
      };
      fr.readAsDataURL(blob);
    }, function(error) {
      deferred.reject(error);
    });

    return promise;

然后在控制器中，您仅调用promise的返回，并在img之类的

and then in the controller you call just the return of the promise and throws inside a img like

<img ng-src="{{fullImage}}" />

这篇关于$ http.get从jpg到img的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！