2017-03-21 3 views
0

イメージは、PHPサーバー上のディレクトリに格納されています。AngularJSを使用して画像データを表示する方法は? (奇妙な応答形式)

サービス:

.factory('PhotoService', function($q, $http) { 
    return { 
    getPhoto: function(photoName) { 
    var url = dirInfo.template_directory + 'quoteCalc/images/Upload/' +  photoName; 
    return $http.get(url).then(function(response) { 
     return response.data; 
    }) 
    .catch(function(error) { 
     return "Photo not found: " + error; 
    }); 
} 
} 
}) 

私はこの機能を使用してコントローラにそのファクトリを呼び出します。データは正常に返されますが、フォーマットはオフで、イメージは表示されません。

function init() { 
    let photo; 
    PhotoService.getPhoto(imageName).then(function(result) { 
     $scope.imgstr = result; 
    }); 
}; 
init(); 

image/response.dataはこの奇妙な形式です。私はそれをどうするか分からない。私が試してみました:

var blob = new Blob([response.data], {type: 'application/octet- binary'}); 
return URL.createObjectURL(blob); 

var reader = new FileReader(); 
return reader.readAsDataURL(response.data); 

<img ng-src="data:image/png;base64,{{imgstr}}" /> 

何も動作します。助けてください。

これが返されるものです。

�����ExifMM*� ���(1�2��ï%HAppleiPhone 

6HH9.2.12016:02:09 9時00分51秒 RZ」「0221bv | & 2016 F2342340100 23 4" : 2時09分09:00:512016:02:09午前九時00分51秒 JM @ bSIsApple iOSMM
.H。 bplist00OVz 2 . Vu iX e 9 o z f l) 1 | yg g wz o Xem '@ D1 \vW S w 8 〜H(OwwboI Tp\ "9". )xNT > G $O R!i 3 d - + 20 ux7 Q%+#3 "#j & dY" 7J < = | [T) L qL�vFEh:_*HR$hcl�Q?&C*zXJ�*hX_�.*3A;V-f2ubplist00�UflagsUvalueUepochYtimescale��:�;��#-/8: ?���+0�B����-$SSAppleiPhone 6 back camera 4.15mm f/2.2NW2:K RTZTbjv/$dz�d��2������2016:02:09A���http://ns.adobe.com/xap/1.0/<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="XMP Core 5.4.0"> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:mwg-rs="http://www.metadataworkinggroup.com/schemas/regions/" xmlns:stArea="http://ns.adobe.com/xmp/sType/Area#" xmlns:apple-fi="http://ns.apple.com/faceinfo/1.0/" xmlns:stDim="http://ns.adobe.com/xap/1.0/sType/Dimensions#"> <mwg-rs:Regions rdf:parseType="Resource"> <mwg-rs:RegionList> <rdf:Seq> <rdf:li rdf:parseType="Resource"> <mwg-rs:Area rdf:parseType="Resource"> <stArea:y>0.363000</stArea:y> <stArea:w>0.042000</stArea:w> <stArea:x>0.969000</stArea:x> <stArea:h>0.056000</stArea:h> <stArea:unit>normalized</stArea:unit> </mwg-rs:Area> <mwg-rs:Type>Face</mwg-rs:Type> <mwg-rs:Extensions rdf:parseType="Resource"> <apple-fi:AngleInfoYaw>90</apple-fi:AngleInfoYaw> <apple-fi:AngleInfoRoll>0</apple-fi:AngleInfoRoll> <apple-fi:ConfidenceLevel>99</apple-fi:ConfidenceLevel> <apple-fi:Timestamp>2147483647</apple-fi:Timestamp> <apple-fi:FaceID>3</apple-fi:FaceID> </mwg-rs:Extensions> </rdf:li> </rdf:Seq> </mwg-rs:RegionList> <mwg-rs:AppliedToDimensions rdf:parseType="Resource"> <stDim:h>2448</stDim:h> <stDim:w>3264</stDim:w> <stDim:unit>pixel</stDim:unit> </mwg-rs:AppliedToDimensions> </mwg-rs:Regions> </rdf:Description> </rdf:RDF> </x:xmpmeta> ��� ��f��� "} 1AQa!" Q2#のBRの$の3BR
%&「()* 456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz
w!1AQaq "2 B #3R br $4 % & '()* 56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz ? ʌ >c E rw(f ? tų - ) |1 I' sԓֿ )))))))))))} W & grXO、8 = ^}:私は\ =、#7F9Páǵ6 。 '^ ZSڸ$ U $;?UQ < Z | O7dS {Jの%'?I��8#~���#P�w!olᏵr��m�X�w �?ʬ�.;��7�:u�U-F�e"�լW� W�y��*�S��j��8n*A�Ar|�8#�;3�,oĺ��� VR�Tb������^M��en?&<:�R���7���Ӟ��7��4ۘ�wj�w1��ҹ{�-[D�w�/p�����;u�)�<ێN��� B ?w���Z�ݦŊ>���j��J��֗Kk�Zб�T$��ǽz}��g}�h������ʄ�Ԫ-��$�̅����_lV�%L�By��:�k��Ԥ�DP6���Ҷ���؟ְt�c~uc�Yp[<r}ju�>�Fx�Z�K�Qx�?/l�T�j �gPx�)J�� F�� 6�Q���FNy�G���ݿ0�� G��&���U�)#aT�w��6�IsYGGv����� �݀I���ϵ,Nܠ���? ����z��>��f)�Nr�듁�֩l�m�h�� G K9 B6 1 S!2Iԃ I ) X x R Q T p9 X oz3F 58F 2w㊢[L ո�á���j$ ��g�X�9䵹F��� F B^hxW [Y;?R3׾I2T = Q {Y {たTF#X7 VP)XPAK | D | [ Ml|G k !!# x\ 6wDs s Ѕ [ \ & t (((t((((((((((((((((((( > {6 #Y Gs ( O? ݍJ sk& $ b+ < { R
q 9 ߱ G y06 ^KX2 9h |q 0、  } ޕ :

P '}のL *Պ電子�x'3�=�\���2��n�h����q����Z�W�nؠdu�;����:��s�-�$���7�y�����E�jR'�1��?:�,Rl��1�g sϥ2ʋ�@R v���u����{X�s��}m�%�@bxR\z���f� SのXX3

+0

URLを 'img'に直接設定してテストしましたか? – Satpal

+0

イメージは常に$ scope.imgstrに設定されています。 この接続は問題ありませんが、イメージの形式を読み取ることはできません。 –

+1

なぜ '$ http'でイメージを取得していますか?あなたは単に ''のようなことをすることはできませんか? – Phil

答えて

1

@Philのコメントは、私が状況を複雑にする方法であることを示しました。私は角度コントローラーにURLを作成し、それをng-srcで使用しました。私は完全にサービスを削除し、それは素晴らしい動作します。

0

上記あなたの応答フォーマットは、base64コードでありません、それで今、それが私としてレンダリングされる方法があります魔法使い。応答コンテンツをBase64コンテンツにエンコードしようとしても、それは動作しません。サーバー側に保存されているものと返されているものを確認してください。

関連する問題