Get Image/PNG mit einem AJAX-Request

Habe ich einen Image/PNG, die aussieht wie diese, zurück von meinem python-service.

PNG


IHDRX,(ã=¤tEXtSoftwareAdobe ImageReadyqÉe< iTXtXML:com.adobe.xmp<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.0-c060 61.134777, 2010/02/12-17:32:00        "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmp:CreatorTool="Adobe Photoshop CS5 Windows" xmpMM:InstanceID="xmp.iid:8A9233331E5811E49DC3AD8FB4C1BE20" xmpMM:DocumentID="xmp.did:8A9233341E5811E49DC3AD8FB4C1BE20"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:8A9233311E5811E49DC3AD8FB4C1BE20" stRef:documentID="xmp.did:8A9233321E5811E49DC3AD8FB4C1BE20"/> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>+xÝÇPLTEõÌÌsssÈÈÈÌ'&í±±ÕÕÕÓ²²ÑÑÑÍÍͶµ¶öööøøøüüüVVXâkk°°°ÆÆÆØ88óóóúúú###®­®ÄÄÄ^]ÀÀÀkklªªªÑnmÛGGºººØÛäÜÜÜäääòòòùääßßßÞÞÞ¾¾¾áááéìô®¦¦¦ÙÙÙÙéééØØØäÖ++ïïðëëëDDE~~~êêêxxxÑ&&¡¡¡¹»Âeee¼¼¼ííí¥65²´¼¸¸¸ëÊÌÔæææ444ɪ­´íñúÜWWøTS£¤«üññú55ÒÕÝ¿¤¦ÁÄËÐ..¢î²áäìuuwØ**Ö--ñôý{|Ê77ÝÇǧyyº«±ÍÐÙþþþøklqcdiÜß轿ÆËAA¼²³®°·ûË]]ŽÂÀ´º[\]Ø%%Ï((°¥«ñòõµ·¾ËÅËÝ??ÅÇÏ´³´z00·¹¿ÏÀÀ¨©°ñÞÞxzãÓÓ¬¢§ÇÉÑÕ((õùÿåèðéêí¦§­ÀÁÈ¡¢§Â¹¼·±³±²¹ÚÛàýýýopu»º»øììÐ++¿¼Áñññ­©¬èàà×11KKMàãä½½½Õ&&vw|ÐÑÔÇ  ;;<ñê꿾½þüü°©©ûûûôõ÷æèë¹¹¹ÕØáÀ¿¾Ë..+++º·¸óóöÄÅÈü÷÷QQT×,, §··»``bòðð½¾½¼»Áhhi002Ã00¨¨¨Òùùù»»»ûüüÌÌÌùúúúúùÂÂÁ¹º¹¤£¤ííðëëï¿¿¿´´¸ÅÇÇßàã×''¹ºº½¾¿Ó,,õõõÏÏÖ ËËÐÊÊÊ···ÙÏÏpppõööööõ³³³´´´Ý'(÷÷÷ÆÀÈÅÅŬ«¬­­«ÁÁÁÁÂÄÁÁÀïôññ§§§@@D×ØÜ{{{ÿÿÿ8$tZL¿IDATxÚì@Óçÿ%4   CIC´`0Mø×H2£æÔÙê6ª®ú§snÔÕ³çZë:=m7éõ¥N÷'îÒ»aI.w;zÙ­;ʸÁ¸Ëàr·£ßóyï÷oþàz-èóFoB4/ßÏóy>Ïó,¢¢ú?Ð"ú[email protected]Á¢¢`Ý1ªGbo©(XïT
ÖûC'i``@×lÖ×7R´(X6Tî9úe/17R²([email protected]ÆËl·{(Y¬[§*UÃUI¹QÚHÿ(X·U
+,À±EÁº¬#©"`¡À®jjÜ4R°æ[Îã*))¹3\Õä&Q²(X·Á+W¹¹),
Ö¸GÙËU^Rw#ËUnn¦þQ°fÉU#«$ÂUaÙy~EÉ¢`Í+¨0ðÝá*×JÁ¢Xá¡`OâªÇUn®ÝÝHÁ¢º¹añ3ö(®H$,à*×pÇ(X³ãjZ!Y® uÇ9<° ;}hHÁM $1p ,yØ°bÀºÓx
Ö,+2
AXlÑãÊÀè'5KÃÀ  £
ËÀ©<³E5KÃ
²j
¹Ñ`3ë)XTÓåf°
©"`ÉÙZC,BT>}½g
)X³0¬«

und ich möchte dieses Bild mit einem AJAX-request habe ich etwas getan, wie dies

$http.get(site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" + $scope.viewmodel.region + "/" + date + "/map/, {'cache': true}).then(function(data){
          console.log(data);
          map.src=data.data;
          map.flag=false;

        })

Aber das funktioniert nicht muss ich codieren base64 ersten ? wie kann ich dies tun ?

  • Warum bist du nicht einfach: map.src = site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" + $scope.viewmodel.region + "/" + date + "/map/?
  • Prüfen Sie das stackoverflow.com/a/20048852/387194
  • mein problem ist, ich brauchte, um geladen werden asynchron, die ich hatte, bevor es ging, aber das ist nicht das, was ich Suche
InformationsquelleAutor azelix | 2016-02-02



2 Replies
  1. 1

    Müssen Sie zum erstellen von data-URI und Kodieren von binären Daten base64:

    var arr = new Uint8Array(data.data);
    var raw = String.fromCharCode.apply(null, arr);
    var b64=btoa(raw);
    map.src='data:image/png;base64,' + b64;
    • ich hatte diesen Fehler Failed to execute ‚btoa‘ auf ‚Fenster‘: Der string kodiert werden, enthält Zeichen außerhalb des Latin1-Bereich. Meine html sieht so aus <img class=“img-responsive center-block“ ng-src=“Karte.src“ Bild-onload=“imgLoadedCallback(map)“>
    • Ich habe aktualisiert die Antwort.
    • Ich habe dieses <img class=“img-responsive center-block“ ng-src=“data:image/png;base64,“ Bild-onload=“imgLoadedCallback(map)“ src=“data:image/png;base64,“> haben Sie eine Idee, warum es nicht zu generieren, die base64 ?
  2. 0

    Ich gefunden habe, diese zu beantworten, und es funktioniert perfekt :

     var xhr = new XMLHttpRequest();
            xhr.open( "GET", site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" + $scope.viewmodel.region + "/" + date + "/map/, true );
    
            //Ask for the result as an ArrayBuffer.
            xhr.responseType = "arraybuffer";
    
            xhr.onload = function( e ) {
              //Obtain a blob: URL for the image data.
              var arrayBufferView = new Uint8Array( this.response );
              var blob = new Blob( [ arrayBufferView ], { type: "image/png" } );
              var urlCreator = window.URL || window.webkitURL;
              var imageUrl = urlCreator.createObjectURL( blob );
              map.src = imageUrl;
              map.flag=false;
            };
    
            xhr.send();

    Credits : Jan_Miksovsky http://jsfiddle.net/jan_miksovsky/yy7zs/

    EDIT : mit AngularJS $http :

     $http.get(site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" + $scope.viewmodel.region + "/" + date + "/map/" + $scope.viewmodel.cmap, {responseType: "arraybuffer"}).
                success(function(data) {
    
                  var arrayBufferView = new Uint8Array( data );
                  var blob = new Blob( [ arrayBufferView ], { type: "image/png" } );
                  var urlCreator = window.URL || window.webkitURL;
                  var imageUrl = urlCreator.createObjectURL( blob );
                  map.src = imageUrl;
                  map.flag=false;
                }).
                error(function(data, status) {
                  console.log( $scope.info = "Request failed with status: " + status);
                });

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.