2

I wrote a HTML page who calls thmbnail.ws to generate thumbnail for given URL (in this code it's a map from gmap), this is my code :

 $.ajax({
  url: 'https://cors-anywhere.herokuapp.com/http://api.thumbnail.ws/api/API_KEY/thumbnail/get?url=http://maps.google.com/?q=36.82,10.17&width=800',
  crossDomain: true,
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  contentType: "image/jpeg",

  success: function (data) {
   console.log('Thumbnail Call OK');
   console.log('Data Type : ' + typeof(data));
   $('#map2').html('Image : <img src="data:image/jpeg;base64,' + data + '" />');
  }
 });

This is the execution result :

execution result

I thought the response is base64 encoded data, so i've tried to put data into an img tag (in div#map2) but no way : As you can see I have strange chars in the image area ! Debugger says result is image/jpeg, if I click on "Response" tab I have this : Reponse content

And when I clik "here" I have the good image : the final generated image

I can't figure out the right data type and how to display it in my page !

Sami
  • 717
  • 6
  • 28
  • If you are getting raw JPEG (i.e. not base64 encoded JPEG) then you can convert it. Someone else felt your pain and posted a handy Stackoverflow Q & A before about this: http://stackoverflow.com/questions/20035615/using-raw-image-data-from-ajax-request-for-data-uri – user268396 Mar 09 '17 at 21:59
  • Alternatively: if all you need is an image and you can get it with a plain HTTP GET request... have you considered simply pointing the `src` of your `img` element to the URL of your `ajax()` call instead? – user268396 Mar 09 '17 at 22:01
  • thanks, with the answer's code I have an error message with "var arr = new Uint8Array(data)" : TypeError: invalid arguments ! Found similar problem here : https://github.com/servo/servo/issues/12503 ... seems to have no solution :( – Sami Mar 10 '17 at 08:55
  • @user268396 it works thanks, but i'd like to do a demo to show my students how we can use REST calls using AJAX – Sami Mar 10 '17 at 09:01

0 Answers0