2012-01-17 4 views
2

У меня есть вызов webservice, который вернет изображение, теперь я хочу сохранить это изображение в файловой системе на сервере.Как сохранить изображение, возвращаемое веб-сервисом?

Проблема заключается в том, что я не могу выполнить вызов webservice с сервера, так как приложение webservice запускается на каждом пользовательском компьютере, и запрос подается в службу как http://localhost/get_image, который возвращает изображение.

Как сохранить это изображение на сервере?

+0

base64 закодировать это, POST для сервер и сохранить там. –

+0

То, что я пытаюсь сейчас, - $ .ajax ({url: 'http: // localhost: 8080/image', success: function (msg) {$ ('# some_field'). Val (Base64.encode (msg)); $ ('# nuser'). submit();}}); но система зависает на линии Base64.encode – rrd

+0

Base64, вероятно, не определен (это не основной объект JS). Попробуйте загрузить библиотеку кодирования JavaScript base64 (http://code.google.com/p/stringencoders/source/browse/trunk/javascript/base64.js? r = 210) –

ответ

4

Вы можете использовать HTML5 для загрузки изображения с помощью javascript и отправки ответа с кодировкой base64 на сервер, где вы можете декодировать ответ и записывать изображение в файл. Здесь подход

  1. Создания формы со следующими HTML элементов
    • холстом элемент: чтобы получить изображение
    • текстовой области: для хранения базы 64 закодированных ответа и отправить ответ на сервер
  2. Убедитесь, что заголовки ответа веб-службы имеют «Access-Control-Allow-Origin: *», чтобы разрешить совместное использование ресурсов скрещиванием частот

  3. Jquery код на стороне

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. Сервер - Decode ответ с помощью "base64" рубин библиотека
File.open('test.png',"wb") do |file| 
    file.write(Base64.decode64(params[:text_area])) 
end 
+0

Спасибо Surbhi, который отлично работал – rrd

+0

Убедитесь, что ваши браузеры поддерживают HTML5. Вы можете принять тест на http://html5test.com/ – crazycrv

0

Я предпочитаю использовать carrierwave камня для загрузки URL изображения

http://railscasts.com/episodes/253-carrierwave-file-uploads?autoplay=true

+0

Волна переноса имеет возможность для загрузки файла с использованием URL-адреса изображения, но проблема в моем случае - это URL-адрес изображения например, http: // localhost: 8080/image, поскольку изображения извлекаются из запроса webservice с клиентского компьютера , поэтому сервер не получит никакого изображения – rrd

0

Как было отмечено выше кодирование base64 следует использовать при передаче изображения через провод. Base64 представляет двоичные данные в формате строки ASCII. Он специально предназначен для передачи содержимого MIME-кодирования и хранения сложных данных в XML.

Вы можете попробовать Javascript кодирование base64 декодирование здесь http://rumkin.com/tools/compression/base64.php

Кроме того, убедитесь, что вы используете file.write и file.read вместо file.puts и file.gets при попытке записать детские файлы изображений

File.open('a.png', 'rb') do |infile| 
    File.open('b.png', 'wb') do |outfile| 
     outfile.write(infile.read) 
    end 
end 

Хотя лучшим решением является возвращение URL-адреса изображения в качестве ответа веб-службы и выборки изображения с сервера ресурсов.