Get Image/PNG with an AJAX Request

Question

I have a Image/PNG which looks like this, returned by my 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>Ïó,¢¢ú?Ð"úO@EÁ¢¢`Ý1ªGbo©(XïT|Ñ
ÖûC'i``@×lÖ×7R´(X6Tî9úe/17R²(XU@ÆË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¬«

and i want to get this image by an AJAX request i have done something like this

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

        })

But this is not working do i have to encode it to base64 first ? how can i do this ?

Why aren't you just: `map.src = site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" + $scope.viewmodel.region + "/" + date + "/map/`? — Quentin, Feb 02 '16 at 15:58
my problem is i needed to be loaded asynchronously i had that before it worked but that's not what i'm looking for — azelix, Feb 02 '16 at 16:01

jcubic · Answer 1 · 2016-02-02T16:01:37.513

0

You need to create data URI and encode your binary data as 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;

edited Feb 02 '16 at 16:01

answered Feb 02 '16 at 15:57

jcubic

61,973
54
229
402

i had this error Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. My html looks like this – azelix Feb 02 '16 at 15:59
I got this do you have any idea why it fails to generate the base64 ? – azelix Feb 02 '16 at 16:06

azelix · Accepted Answer · 2016-02-03T10:33:26.843

I have found this answer, and it works perfectly :

 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 : with 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);
            });

Get Image/PNG with an AJAX Request

2 Answers2