ajax从远程服务器获取图像

Question

我在这里撞墙了。 我不知道我在做什么，呸！ 我正在尝试使用 jquery ajax 从远程服务器请求 gif 图像。 我认为它正在做它应该做的事情，但我现在得到了数据，不知道该去哪里。 这是我用来从服务器获取数据的函数：

   function showGetResult(name){
         var result = null;
         var URL = name;
         $.ajax({
            url: URL,
            type: 'get',
            dataType: 'html',
            async: false,
            crossDomain: 'true',
            success: function(data, status) {
                console.log("Status: "+status+"\nData: "+data);
                result = data;
            } 
         });
         return result;
    };

当我获得 gif 图像数据时，它会向我抛出这个......

GIF87ad d T |F$ xtcS Ǫ$ z <.,dYT ~d l wted TFD⽴ dO:TNC,%$L=5Ķ 4 ~| ʼ$ nTDFT |eS ƹ s v tR< n]LJCĨ zdtn \\D2<><̰ d^VdRE °$LbdlWD ua ~p zp |vlLC;4%<2-\\N<L2 tnl"$ jD>,,:$T>+ zY D95, 4BLl~t ̌ 435\\\\ | | $,$\\fldJL ¼t^? δ dbl ĩ tjeTJE0JD L>+,:4 T> 44:D<) |ZD ~y Ƭ zh⾥ Ҽ̶ n[ ©D2- z\\ |$"lbX sD7+ z4+$ lYU l vl lR<4&$D0#\\QL ~, ||^P4-, u̪ |oalRF o |oo$ #$ lfd dI< t j\\DBD\\VTdWL sdtYDTE<ı te\\ ʴ \\FDDD L>D |L9,,64 zt |f \\ \\F<̲ TfdlYLLFD\\OD 42, |jY\\J;l^L*,D>:l^U, zm>,|je\\JD, dd / a . @B ڞx 1 A hg p. c 2B@ "5N a! q b k- Ċ F Hh P1S𤁗Ξ1M L & Y ɢ̀ 4 \\ V# H v SF T , '֩eg ɖm >>!~ { O7F$ S O l\\; C /? * 1& M b 4ZӼx!DH ' M =& b <n 7V- ^ ʒ ⃯ _ Hp = <_ cD q )K o 9 -˼,\\XUUyp K1 XUUyp K1 Bp S< \\0 B x 2&a | { b M: ; =? q U 2 / E_TTH- QH 0( @!r ]y lc p 1 O? = 8& Pq Ў/ ,p )M 1 5 U*h@ ń ! \\ { FH s a E 6M &: ю6L & @ B \\ ; < . 2 k qL d U. f 0 S%R !! &! $ 9Qow IW<{`B qp 6 @FOc X N>2{ q /b AO c & M; d -\\ l/ Á "tѻ " C P_͋] Ņ = x A U K J S; # b 67 VL Ci @ K & &; |8L-{x ;: B 4i4 2 F䃱 H&2 kq { Y 6Cm W 0 .D7 S Z 8 ao T ;!Dn *{ ю '& p K1 pM d- ڸ 3 ܞ{l z b . ~I B 5$ )] E= P %.! : 9 qN|@0p < < c 0!h !?8B_ a at k % h!3\\0 H@ # h }1 . H] q ax X p @:D .D j ( P+? a d WJ ) Y̘03&M 0H $4 lƯxH p MG* a 8 Ae 1 G 01 P ; Zx lP ^ f \\ It +Br ( lH b EZ %! A 1 W# A 0 50 03+8 S } _}@ ҡ 7xG; )< . 1 ڜ a0I$A t ͬ u A <So t Qo,Gn l g tЋ3CY _ U0= ! G L! & L V IL C1 M$p )C∵N? LF T p ؘ /Z m J6 ^ ?x x UT y % ) Ih p , , - ! I = $ % (@V '8 wpc bюi &h bqm i D-$> $Α > BP7 % @, > , K< a|! Kl < ] ) Z+x 4Lb PO̠ E> ! C1n P *0 \\t MT" 0 e Ŕ ,: MLY] X @ IL ja r < d sT ~Ā @.N 8 ʸ + Aa& ƚ = 2 r ֨ X M @ !u 0+6 (c a #̀ G+ġ B 80 3 J E~a ) ˠ. Q4[D l B5~ XH ] vV m ( C1t! aCɘ' k qМ > # - UhP 6 TA5 Flgj+# u} ^ &8 xJ 6_ Lq@" &D 5 $/ !xC,聇} F1 q v xw Z0 3 F, e A] U $ sf F1, . ˥ + j d ! * | p 6T !# T { 8|Und QlP]y 䁗 , y ȩ I$ 5 H =| He= 7V P a A )TJ 1 o n 0 @ %I1y Ld@L I !9p~ :J .q\\ @{ ( | p b p@ M0T!Ӑg :p = Lp B@L eu 7 R&3 P83 D= R =n p 3 1 : n@7 2b0 钐 . B : bp50 S@Y 0W }I0 0 y 2c3bJ @9 E!~R :@W~@ p p( S$k' (3 Ő 2( WB Jd u o t dؗ} t IG 0XY E/ D , Ѡ ܰ $ Vn A, 8 ?@FP6 b% L O z]1 } Hw W2 c 4 l !? h V , SiA pU n b ipF < p P uo t IG 0XY E/ D , Ѡ ܰ $ Vn A, 8 ?@FP6 b% L O z]1 } Hw W2 c 4 l !? h V , SiA pU n b ipF < p P uo p P uo aNq\\ _p \\ V [ H XfL hk9 >I " /4n 8d@6pWPg Pc C[t{ , p? b& RP1 PK5 ʀ } D W 4aN h1b u:3 Y pé x0ڠ t D 7! D0? & ) } @ E7 }pR'!9 H J 1 @! L! 9 Pp< Qڠ p 4 P?x s BA F@n@ j L CE D i) Eg W _ z~ $ a _P, 】 tI$Иg sg | Z ?p= @ 9, 0 1 a# pCV0Y0 L ({ ] ( } व q ֙JEG ~ 0 ͐] y( oP @?@ # i Еn P${ G 0 D: } T JEZ bzd ! 9 0P \\ +p( A I P { nP ^ w , [ ɟ DE P X 80 O + /G p Ve : ={ +n 2 " P , pi [ 4ɰ ʊ Y Q nP hak pe x } Zn@ 0 Z H #:0_y ; pM U 4 } @ : ~ p Z 0 H %7 j RP + :T P To j 补 p J 0F Ⱥ E' y < Hp ZP #zp e 0 SͰ8 P J ~ 9 0 b{|0 "j Y- { 0 @ F 8 pܻ ; $ 7 pP < Ee b g( = * u# p b p-P+ZP og )0a P R Pa 0" %, 9@ ~ J

A + h 7 V ~ 0 0ʰ ~ נd ? ?P j Q˰ #

/ uي в < 4E $ } ( I 7 Ѱn P] # | 0 c Sa a ! ZI c !ɰ 7Pqp 70 e @ l9 P b5 re HϽ @I @aׇW KI} u u @~ ] LX Z~ x }ܓ$ % \\ P ;7 *z@ 7 Fp-p& P PF0 % &mJ]4 y Ev t !p H t t@ 0 p. ׀* P: bpky= R? l 1 $ g, q I 8 {A 0J u 7 Z ܀ k:d] {]0 n 1&cq !W W \\! E @ ޵ ϚZ n ""h- ~ x< t P oPzh a ^ KUQ ZE E + Q P 4 D ( {o [ + r } t U͠ 4 vb I Ѐ O @ C0R \\PP v@T +O ~ G | ) 0 {n ( ؼ ] + Uq PW yP p ǠR(/ L@T@ }P q ! g9 + г 9@F+@ɀ aPW T X E { 6 x@ Vp ~ q9 0p

J y ;W" Š 9 e؆ 4 F 1 T|@ b & S 9& P27 (adF } G0 0. Zp { + |@inp 8ˁ\\N :h k p O\\n&p# P\\ ( YV Pސ YV P @4 h& K=,N 惯e X G ( е2 p 8 k pb= Y2Ӱ -Uv @ Ub FIsO ) 9X, x|1 l d@Ǜ P( C C2 / G ǐؐ + * U0 R 5 I 2 x !( U4 J ~ JS4 г H傣3 @~ %;r U- I Ƒ$ 5n O? qk7 Xm6 &!MX/N ť 0h '&pHp #Gң $kF jC?pn iv1 ; u Gb3 Y3 9j c 'U ؋3o_ ~ 86O1 Dq V a ^ > r Ǐ,2( 1D , 4 ) ' j(" 8r# C F v ZRs 6#-LL 4. b R u GB- a, V-- p ?< +@B " j e#?&|W b Azθ , , ) + a I e H@ H T ͏a d E- ". hf <L B .԰ a &"? k 7 A w G_ޙ g yԀ b^P (& a &B8 ? j h&(N 񃶴 . #P .𐡇 (L b ^ t =p+w@r G } H 4 p C h #t t8?n (@ \\Y $ q !C} CA ^ jˁ &~p v y &Fp hA p dYǏx 2 & j = !Õx q#5 G厎$ "#RK S )~ 7 % y* +*8% p =^ [2 V e Y Zx | q^ [ Bô 厎 !~@ V P [ 3 Q G1 x6" |Xл V J7B"f T /H $ ʀ# h L :,R # ʏd ø ！ Z ！ .n@ q v m if x _G J S/$c ! >LV o r v BK U Lh > w e . 2@ @) * HY3 4> c " 萃 i y$ F *? ! 蒌​​ Dl Y E* @ z P È ]b!6 7 'fpp ) ^@ B(%"7 * 2 #* s YJ H B dܠV:B2< JT V yK 6d^0EeH FGj n )F 8x 黠 ^ B;^Rc!X d be WDD% [-18 DI% AP P w b _4 |A A% t! A # 3 B C / B r ^% Lr @ ! 8D = cZ (W 9, )5 fL 7 إH ҂ = b ！ h [r 1 gpqy Qd |KҖz \\ k "R z G E,b U hbn :4 ̊zs \\ P Z0i" T+ D n8K- :L！ [ t 1JtЛ+ i jQ ,~ ^h ! C-zG k "+@ FP {^) ; P 70D |] U "CZ\\ A 3J Ƃ7 m+ |( X, Q Y +H m!B u %R] V K ;B +FRwg @ V ,r [ DC Vg P> OCB=" . c 0y *@ Co8n-B "D4,3 !(@Bo s%m c :Go" 0 x g pG-f (h P 0P @ P ? - G0 ) \\@4~ *r h| @ > sզ+h R ܀t Tz t B| X-tP BZd = / ]LBbL PVP L"i" &b& l  Ɋ A- 2$ , &0j [ BB w 0 5 -B)j > BL M 7 ~ @ ($ B n f D: .m Mn~ XC7hӪ[@ {:0 0m U "P Hyj vA + 2hY T ah @ l - D !/ $. VR D P R\\ ٶ ~ q & E 9I " +w# h M D80 ?_P 3 ? rC> 8( l n Ab F 1; )Ra !P 2% d d' + C U7 m U 0 " | 8j P kp 2 Z h h+ ?( yH\\Ќ ;p # Mh = hY ځ0@h (Mx ZH# p8 J0 % _ ? 3h8(58 t X8 7Plh whfh } S؂ - a 7 H cЂ2p K d u h$P " a7 #X8 + K ; 8 |hz` 8 @ m X t( w lP S0 0 U Z $x p(( ɩ I2M`0Ě ; "B b = ) C v Ʉ' #0 jȅoІs 6 9 zp W " mX Z 0 N zx p&8 c\\p0 \\ ) x % A R F Ћ 3 7 8j Zk ? 3(I>p !@<z(@>^ @ e C\\ X bx 0 8 0?B #( # `Ѝ F ( ,h z Xh " J46Ȃ7 8 h @.HU{jU # 8 >ȃU ]( y X v x @ L h@蒈d A N I w q 2 V "|p mH j{ 7x.P>{ ~ j _X 0 3X b؂ } qx * 7 L / H^ . M 4 ^ I\\ pH2 f E ^ ; % } ڃ. v vh1 NX 2 + ,P x ( 1 x @. tܜ " 0I i k ?8 @UЁ 8+ ;p # Mh = hY ځ0@h (Mx ZH# p8 J0 % _ ? 3h8(58 t X8 7Plh whfh } S؂ - a 7 H cЂ2p K d u h$P " a7 #X8 + K ; 8 |hz` 8 @ m X t( w lP S0 0 U Z $x p(( ɩ I2M`0Ě ; "B b = ) C v Ʉ' #0 jȅoІs 6 9 zp W " mX Z 0 N zx p&8 c\\p0 \\ ) x % A R F Ћ 3 7 8j Zk ? 3(I>p !@<z(@>^ @ e C\\ X bx 0 8 0?B #( # `Ѝ F ( ,h z Xh " J46Ȃ7 8 h @.HU{jU # 8 >ȃU ]( y X v x @ L h@蒈d A N I w q 2 V "|p mH j{ 7x.P>{ ~ j _X 0 3X b؂ } qx * 7 L / H^ . M 4 ^ I\\ pH2 f E ^ ; % } ڃ. v vh1 NX 2 + ,P x ( 1 x @. tܜ " 0I i k ?8 @UЁ 8+ a8# 1x h 2 f&i 3 q 1p S qH ~8 \\ Qj@ h 8xL | z ) ) @ x 4R M = l 5| OY J8h H ? $ h Є Y b Jȁ0 I j &0 q q0 6 J @ 2( U0? ! Pr pȁ2 = s 8 w( J L | # w bȂ3h y c S X:| wP S ոF+ N i 0 \\xd4 ;hx kxZ +J/F H A ^ 18 ȇq 8 @mP{ !P [ e _؇JO lq 1 0-h k8n ? 0 %8 X j  ; H VQ+r J m PA | a # B @w (& { =8 # X08 l 8 fh th m mA K 3؆v0 ,P I( X v h J ' 7h$@ )M !@ %)l "i4O؃]hl( 7 ,0 ^ q

_H^ a \\ Myj8l j +P _ @ ?( 4 08bw p 8 k W ]!˦ PA@ 1q w ;mh lȂ" z e \\x[ eP ^ I @ }x m &8 i8 i8 1x- J _hP| | * r ' - 9m F ІH } 7 , z 8hO & O( z 2h /P = q +r Q = ib 7 "F J. 8k-[ h 4 N ^ _H 1 [0U 7 nP. pD M n8 A - )0z \\ȅs8 y0 ~ yNe p 7xp j돁 j !h? xq f H K WȂb 7 +h = 7 } [@ w qY$R ymC Xp zh [p s 50 |@ $8 0 J h 2H ц 2& WqQ /`> 8 zh , ֍e \\H X Ё l j P0 H 1 G [ c ,8 "t7" | 8 n 鍝9 0 u xO 1 <0J ȃ hz h w ҆) ? 2ɁX wPI X l d@1 z郅 ;

这是什么，我该怎么办？？ 谢谢。

Answer 1

 var data_received = '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'; /* PUT THIS INSIDE AJAX SUCCESS */ var img = $('<img id="image_id">'); img.attr('src', 'data:image/png;base64,' + data_received); img.appendTo('#image_div');

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="image_div"> </div>

不是答案而是建议。 为什么不只获取 ajax 请求中的图像 url（以防图像托管在某处）并使用此 url 作为img标签中的src属性。

 $.ajax({
        url: URL,
        type: 'get',
        dataType: 'html',
        async: false,
        crossDomain: 'true',
        success: function(data, status) {
            console.log("Status: "+status+"\nData: "+data);
            result = data;

            /* creating image assuming data is the url of image */
            var img = $('<img id="image_id">');
            img.attr('src', data);
            img.appendTo('#id_of_element_where_you_want_to_add_image'); 
        } 
});

或者，如果您在 ajax 响应中获取编码图像，则可以使用：

$.ajax({
        url: URL,
        type: 'get',
        dataType: 'html',
        async: false,
        crossDomain: 'true',
        success: function(data, status) {
            console.log("Status: "+status+"\nData: "+data);
            result = data;

            /* creating image */
            var img = $('<img id="image_id">');
            img.attr('src', 'data:image/gif;base64,' + data);
            img.appendTo('#id_of_element_where_you_want_to_add_image'); 
        } 
});

Answer 2

You can use this code for various photo format just replace png as gif, jpeg (Just Change url only and copy paste the code)

First generate the raw base64 then convert into image get base64 raw data of image from responseBody using jquery ajax
      
    $.ajax({
          type: "GET",
          url: "imageURL",
          beforeSend: function (xhr) {
            xhr.overrideMimeType('text/plain; charset=x-user-defined');
          },
          success: function (result, textStatus, jqXHR) {       
            if(result.length < 1){
                alert("The thumbnail doesn't exist");
                $("#thumbnail").attr("src", "data:image/png;base64,");
                return
            }
        
            var binary = "";
            var responseText = jqXHR.responseText;
            var responseTextLen = responseText.length;
        
            for ( i = 0; i < responseTextLen; i++ ) {
                binary += String.fromCharCode(responseText.charCodeAt(i) & 255)
            }
            $("#thumbnail").attr("src", "data:image/png;base64,"+);
    
           /* PUT THIS INSIDE AJAX SUCCESS */
            var img = $('<img id="image_id">');
            img.attr('src', 'data:image/png;base64,' + btoa(binary));
            img.appendTo('#image_div');
          },
          error: function(xhr, textStatus, errorThrown){
            alert("Error in getting document "+textStatus);
          } 
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image_div">
  
</div>