Question

I have a webservice call that will return an image, now I want to save this image to the filesystem in the server.

The problem is, I cannot make the webservice call from the server, as the webservice application runs on each user machine and a request is made to the service as http://localhost/get_image, which returns the image.

How do I save this image on the server?

Answer 1

You can use HTML5 to load image using javascript and send base64 encoded response to sever where you can decode the response and write image to a file. Here is the approach

1. Create a form with following html elements
   • canvas element: to get the image
   • text area: to store the base 64 encoded response and send response to server

2. Ensure that the webservice response headers has “Access-Control-Allow-Origin: *” to allow cross origin resource sharing

3. Jquery code

var myCanvas = document.getElementById('canvasId');    
var ctx = myCanvas.getContext('2d');    
var img = new Image;    
img.crossOrigin = 'anonymous';    
img.src = "web service url which returns image";    
img.onload = function(){
  console.log( img.width, img.height );
  // set canvas height and width to image height and width else only part of image will get created
  myCanvas.height = img.height;    
  myCanvas.width = img.width;    
  ctx.drawImage(img,0,0); // Or at whatever offset you like    
  var dataURL = myCanvas.toDataURL("image/png");    
  dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");    
  $('#some_text_area_id').val(dataURL); // set the response in text area    
  $('#form_id').submit();   // submit the form
};

1. Server side – Decode the response using “base64” ruby library

File.open('test.png',"wb") do |file|
  file.write(Base64.decode64(params[:text_area]))
end